:root {
  color-scheme: light;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  background: #f7f2e9;
  color: #3f3529;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: #f7f2e9;
}

button,
input,
select {
  font: inherit;
}

button {
  border: 0;
  border-radius: 8px;
  background: #4f7f69;
  color: white;
  cursor: pointer;
  font-weight: 800;
  min-height: 46px;
  padding: 0 18px;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.secondary {
  background: #eaf0e8;
  color: #3f3529;
}

.shell {
  width: min(1060px, calc(100vw - 32px));
  margin: 0 auto;
  padding: 24px 0 48px;
}

.shell:has(.review-arena) {
  padding-top: 8px;
  padding-bottom: 8px;
}

.shell:has(.duel-stage) {
  width: min(1360px, calc(100vw - 32px));
}

.shell:has(.memory-recall-stage) {
  width: min(1440px, calc(100vw - 32px));
  padding-top: 16px;
  padding-bottom: 16px;
}

.shell:has(.memory-recall-stage) .topbar {
  margin-bottom: 14px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

.topbar h1 {
  margin: 0;
  color: #3f3529;
  font-size: 30px;
  letter-spacing: 0;
}

.topbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.eyebrow {
  margin: 0 0 3px;
  color: #756c61;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}

.connection {
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  padding: 8px 12px;
}

.connection.online {
  background: #e5eee4;
  color: #4f7f69;
}

.connection.offline {
  background: #ffe1df;
  color: #9d2f27;
}

.session-control {
  min-height: 34px;
  border: 1px solid #d8c9ba;
  padding: 0 12px;
  background: #fffdf8;
  color: #7a5540;
  font-size: 13px;
}

.session-control[aria-pressed="true"] {
  border-color: #4f7f69;
  background: #e5eee4;
  color: #294c3d;
}

.session-control.agreement-button {
  min-width: 104px;
}

.session-control.agreement-button:not(.agreement-half):not(.agreement-full) {
  border-color: #d8c9ba;
  background: #fffdf8;
  color: #7a5540;
}

.session-control.agreement-button.agreement-full {
  color: #fffdf8;
}

.panel,
.player,
.notice {
  background: #fffdf8;
  border: 1px solid rgba(63, 53, 41, 0.08);
  border-radius: 8px;
  box-shadow: none;
}

.panel {
  padding: 24px;
}

.intro {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  gap: 28px;
  align-items: center;
}

.intro h2,
.panel h2 {
  margin: 0 0 8px;
  font-size: 25px;
  letter-spacing: 0;
}

.intro p,
.panel p {
  margin: 0 0 18px;
  color: #596760;
}

.profile-form,
.settings-grid {
  display: grid;
  gap: 14px;
}

.avatar-picker {
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}

.avatar-picker legend {
  margin-bottom: 7px;
  color: #625a50;
  font-size: 14px;
  font-weight: 800;
}

.avatar-options {
  display: grid;
  grid-template-columns: repeat(5, 66px);
  gap: 2px;
}

.avatar-option {
  position: relative;
  display: block;
  width: 66px;
  height: 66px;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 8px;
  background: #fffdf8;
  cursor: pointer;
}

.avatar-option:hover {
  border-color: #b7cbb9;
}

.avatar-option:has(input:checked) {
  border-color: #4f7f69;
  box-shadow: 0 0 0 3px rgba(135, 168, 138, 0.22);
}

.avatar-option input {
  position: absolute;
  width: 1px;
  min-height: 1px;
  margin: 0;
  opacity: 0;
}

.avatar-option input:focus-visible + .avatar-portrait {
  outline: 3px solid rgba(79, 127, 105, 0.45);
  outline-offset: -3px;
}

.avatar-portrait {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  transform: scale(2.05);
  transform-origin: 50% 54%;
}

.avatar-emoji {
  line-height: 1;
}

.settings-grid {
  grid-template-columns: minmax(260px, 2fr) repeat(2, minmax(120px, 1fr));
}

.rank-range-inputs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
}

.rank-range-separator {
  color: #756c61;
  font-size: 18px;
  font-weight: 800;
  text-align: center;
}

label {
  display: grid;
  gap: 6px;
  color: #625a50;
  font-size: 14px;
  font-weight: 800;
}

input,
select {
  width: 100%;
  border: 1px solid #d8d0c5;
  border-radius: 8px;
  background: white;
  color: #3f3529;
  min-height: 46px;
  padding: 0 12px;
}

input:focus,
select:focus {
  border-color: #87a88a;
  outline: 3px solid rgba(135, 168, 138, 0.2);
}

.actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.players {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

.player {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 54px;
  gap: 12px;
  align-items: center;
  padding: 14px;
}

.player.you {
  border-color: rgba(79, 127, 105, 0.4);
}

.player.opponent {
  border-color: rgba(122, 85, 64, 0.24);
}

.player.opponent .avatar {
  background: #f1e4d1;
}

.player.disconnected {
  opacity: 0.58;
}

.avatar {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 8px;
  overflow: hidden;
  background: #edf2e9;
  font-size: 27px;
}

.player-main {
  min-width: 0;
}

.player-main strong,
.player-main span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-main span {
  color: #68756e;
  font-size: 13px;
}

.set-score {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: #4f7f69;
  color: white;
  font-size: 24px;
  font-weight: 900;
}

.dots {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 9px;
}

.dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #d7ded9;
}

.dot.won {
  background: #87a88a;
}

.dot.half-won {
  background: linear-gradient(90deg, #87a88a 50%, #d7ded9 50%);
}

.notice {
  margin-bottom: 14px;
  padding: 12px 14px;
  color: #8a332b;
}

.settings-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0;
}

.settings-summary span {
  border: 1px solid #d6ddd8;
  border-radius: 8px;
  padding: 10px 12px;
  font-weight: 800;
}

.challenge-panel {
  display: grid;
  gap: 16px;
  margin-top: 18px;
}

.challenge-panel h3 {
  margin: 0;
  color: #3f3529;
  font-size: 18px;
}

.challenge-panel.sent {
  border: 1px solid #d6ddd8;
  border-radius: 8px;
  padding: 14px;
  background: #fffdf8;
}

.incoming-challenge-status {
  display: flex;
  min-height: 54px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 18px;
  padding: 8px 8px 8px 14px;
  border: 1px solid #d6ddd8;
  border-radius: 8px;
  background: #f4f7f1;
  color: #3f3529;
  font-weight: 800;
}

.incoming-challenge-status button {
  min-height: 44px;
  flex: 0 0 auto;
}

.challenge-dialog {
  width: min(520px, calc(100vw - 32px));
  max-height: min(720px, calc(100vh - 32px));
  overflow: auto;
  margin: auto;
  padding: 24px;
  border: 1px solid rgba(63, 53, 41, 0.12);
  border-radius: 16px;
  background: #fffdf8;
  color: #3f3529;
  box-shadow: 0 24px 70px rgba(63, 53, 41, 0.24);
}

.challenge-dialog::backdrop {
  background: rgba(45, 39, 33, 0.34);
  backdrop-filter: blur(3px);
}

.challenge-dialog-heading {
  display: flex;
  align-items: center;
  gap: 14px;
}

.challenge-dialog-icon {
  display: grid;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  place-items: center;
  border-radius: 12px;
  background: #e5eee4;
  color: #4f7f69;
}

.challenge-dialog-icon svg {
  width: 23px;
  height: 23px;
  stroke-width: 1.8;
}

.challenge-dialog h2 {
  margin: 0;
  font-size: 24px;
}

.challenge-dialog-heading .eyebrow {
  margin-bottom: 3px;
}

.challenge-dialog > p {
  margin: 16px 0 0;
  color: #596760;
  line-height: 1.5;
}

.challenge-dialog .settings-summary {
  margin: 18px 0 22px;
}

.challenge-dialog-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.challenge-dialog-actions button {
  width: 100%;
  min-height: 46px;
}

.accept-challenge {
  width: min(100%, 360px);
}

.lobby-waiting {
  font-weight: 800;
}

.settings-grid button {
  grid-column: 1 / -1;
}

.mode-picker {
  grid-column: 1 / -1;
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}

.mode-picker legend,
.meaning-bank h3 {
  margin: 0 0 7px;
  color: #625a50;
  font-size: 14px;
  font-weight: 800;
}

.segmented-control {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(100%, 720px);
  overflow: hidden;
  border: 1px solid #cfc6bb;
  border-radius: 8px;
  background: #fff;
}

.segmented-control label {
  position: relative;
  display: block;
  cursor: pointer;
}

.segmented-control input {
  position: absolute;
  width: 1px;
  min-height: 1px;
  opacity: 0;
}

.segmented-control span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  border-right: 1px solid #cfc6bb;
  color: #625a50;
  font-weight: 800;
}

.segmented-control label:last-child span {
  border-right: 0;
}

.segmented-control input:checked + span {
  background: #315f50;
  color: #fff;
}

.segmented-control svg {
  width: 18px;
  height: 18px;
}

.memorization-settings {
  grid-template-columns: minmax(130px, 0.45fr) minmax(260px, 1fr) minmax(180px, 0.7fr);
}

.memorization-mode-summary {
  display: grid;
  align-content: center;
  min-height: 70px;
  border-left: 4px solid #da7b61;
  padding: 10px 14px;
  background: #fff7f2;
}

.memorization-mode-summary strong,
.memorization-mode-summary span {
  display: block;
}

.crossword-settings {
  grid-template-columns: minmax(280px, 1fr) minmax(150px, 0.45fr) minmax(260px, 0.85fr);
}

.crossword-mode-summary {
  display: grid;
  align-content: center;
  min-height: 70px;
  border-left: 4px solid #557aa3;
  padding: 10px 14px;
  background: #f1f6fb;
}

.crossword-mode-summary strong,
.crossword-mode-summary span {
  display: block;
}

.crossword-mode-summary span {
  margin-top: 4px;
  color: #66788b;
  font-size: 13px;
}

.memorization-mode-summary span {
  margin-top: 4px;
  color: #756c61;
  font-size: 13px;
}

.memory-mode-icon {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 8px;
  background: #e8f0ed;
  color: #315f50;
}

.memory-mode-icon svg {
  width: 38px;
  height: 38px;
}

.memory-study-stage,
.memory-recall-stage,
.memory-result-stage {
  width: min(100%, 940px);
  margin: 0 auto;
}

.memory-stage-status,
.memory-recall-header,
.memory-recall-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.memory-stage-status {
  margin-bottom: 10px;
}

.memory-timer {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #315f50;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.memory-timer svg {
  width: 18px;
  height: 18px;
}

.memory-progress {
  height: 7px;
  overflow: hidden;
  border-radius: 8px;
  background: #dfe5e1;
}

.memory-progress span {
  display: block;
  height: 100%;
  background: #da7b61;
  transition: width 300ms linear;
}

.discover-word-card {
  display: flex;
  flex-direction: column;
  min-height: 590px;
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid rgba(63, 53, 41, 0.12);
  border-radius: 8px;
  background: #fffdf8;
}

.discover-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 28px 32px 20px;
  border-bottom: 1px solid #ebe5dc;
}

.discover-card-header h2 {
  margin: 0;
  color: #24221e;
  font-size: 38px;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.discover-word-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 13px;
}

.study-audio-button {
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  background: #315f50;
}

.discover-card-content {
  display: grid;
  flex: 1;
  grid-template-columns: 1fr;
  align-items: stretch;
}

.discover-card-content.has-study-image {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.85fr);
}

.discover-card-copy {
  align-self: center;
  padding: 34px 32px;
}

.discover-definition {
  margin: 0;
  color: #302b25;
  font-size: 23px;
  line-height: 1.45;
}

.discover-translation {
  margin: 18px 0 0;
  color: #246b80;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.45;
}

.discover-example {
  margin-top: 28px;
  border-left: 4px solid #da7b61;
  padding: 16px 18px;
  background: #fff3eb;
  color: #51473e;
  font-size: 18px;
  font-style: italic;
  line-height: 1.5;
}

.discover-study-image {
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
}

.discover-word-card footer {
  display: flex;
  justify-content: flex-end;
  padding: 12px 18px;
  border-top: 1px solid #ebe5dc;
  color: #756c61;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.discover-card-navigation {
  align-items: center;
  justify-content: space-between !important;
}

.study-navigation-button {
  display: grid;
  place-items: center;
  width: 42px;
  min-width: 42px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  background: #315f50;
}

.study-navigation-button svg {
  width: 20px;
  height: 20px;
}

.memory-countdown .countdown {
  font-size: 76px;
}

.memory-recall-stage {
  width: 100%;
  padding: 16px;
  border: 1px solid rgba(63, 53, 41, 0.08);
  border-radius: 8px;
  background: #fffdf8;
}

.memory-recall-header {
  margin-bottom: 12px;
}

.memory-recall-header h2 {
  margin: 0;
  font-size: 25px;
}

.memory-recall-actions span {
  color: #756c61;
  font-size: 13px;
  font-weight: 800;
}

.memory-recall-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(300px, 0.8fr);
  align-items: start;
  gap: 14px;
}

.memory-answer-list {
  display: grid;
  gap: 4px;
}

.memory-answer-row {
  display: grid;
  grid-template-columns: 30px minmax(180px, 1fr) minmax(150px, 220px);
  align-items: center;
  gap: 7px;
  min-height: 46px;
  border: 1px solid #e1dbd2;
  border-radius: 8px;
  padding: 3px 6px;
  background: #fff;
}

.memory-answer-row.audio-active {
  border-color: #da7b61;
  box-shadow: 0 0 0 3px rgba(218, 123, 97, 0.15);
}

.memory-row-number {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #e8f0ed;
  color: #315f50;
  font-size: 13px;
  font-weight: 900;
}

.memory-spelling-field {
  position: relative;
  display: grid;
  align-items: center;
  width: 100%;
  min-width: 0;
  min-height: 36px;
  cursor: text;
}

.memory-spelling-input {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  min-height: 100%;
  border: 0;
  padding: 0;
  opacity: 0;
  cursor: text;
}

.memory-spelling-input:focus {
  outline: 0;
}

.memory-typing-slots {
  display: grid;
  grid-template-columns: repeat(var(--memory-slot-count), minmax(4px, 16px));
  justify-content: start;
  gap: 2px;
  width: 100%;
  min-width: 0;
  padding: 2px;
}

.memory-typing-slot {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  height: 30px;
  color: #3f3529;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
}

.memory-typing-slot::after {
  position: absolute;
  right: 0;
  bottom: 1px;
  left: 0;
  height: 2px;
  border-radius: 2px;
  background: #aab9b2;
  content: "";
}

.memory-typing-slot.filled {
  color: #315f50;
}

.memory-spelling-field:focus-within .memory-typing-slot::after,
.memory-typing-slot.filled::after {
  background: #4f7f69;
}

.meaning-drop-zone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 36px;
  overflow: hidden;
  border: 1px dashed #b9c4be;
  padding: 5px 8px;
  background: #f7faf8;
  color: #68756e;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
}

.meaning-drop-zone span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meaning-drop-zone svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

.meaning-drop-zone.filled {
  border-style: solid;
  border-color: #87a88a;
  background: #edf5ef;
  color: #294c3d;
}

.meaning-drop-zone.drag-over,
.meaning-drop-zone.selectable:hover {
  border-color: #da7b61;
  background: #fff3eb;
}

.meaning-bank {
  min-width: 0;
  margin: 0;
  border-left: 1px solid #e1dbd2;
  padding-left: 14px;
}

.meaning-bank-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}

.meaning-card {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-height: 46px;
  border: 1px solid #d9d2c9;
  padding: 5px 8px;
  background: #fff;
  color: #3f3529;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
}

.meaning-card svg {
  width: 17px;
  height: 17px;
  color: #8b8176;
}

.meaning-card.selected {
  border-color: #da7b61;
  background: #fff3eb;
  color: #713e2c;
}

.meaning-card.assigned {
  opacity: 0.36;
}

.memory-auto-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: min(100%, 360px);
  min-height: 42px;
  margin: 14px auto 0;
  border: 1px solid #b9cfc5;
  border-radius: 8px;
  background: #edf5ef;
  color: #315f50;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.memory-auto-submit svg {
  width: 18px;
  height: 18px;
}

.memory-result-heading {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin-bottom: 22px;
  text-align: center;
}

.memory-result-heading h2 {
  margin: 0;
  font-size: 30px;
}

.memory-scoreboard {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.memory-score-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  border: 1px solid #dccfc2;
  border-radius: 8px;
  padding: 13px;
  background: #fffdf8;
}

.memory-score-card.you {
  border-color: #87a88a;
}

.memory-score-card .avatar {
  width: 48px;
  height: 48px;
}

.memory-score-card strong,
.memory-score-card span {
  display: block;
}

.memory-score-card span {
  margin-top: 3px;
  color: #756c61;
  font-size: 12px;
}

.memory-score-card b {
  color: #315f50;
  font-size: 28px;
}

.memory-score-card small {
  color: #756c61;
  font-size: 12px;
}

.memory-result-list {
  overflow: hidden;
  border: 1px solid #e1dbd2;
  border-radius: 8px;
  background: #fffdf8;
}

.memory-result-row {
  display: grid;
  grid-template-columns: 34px minmax(120px, 0.35fr) minmax(0, 1fr) 56px;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  border-bottom: 1px solid #e9e3db;
  padding: 8px 12px;
  font-size: 13px;
}

.memory-result-row:last-child {
  border-bottom: 0;
}

.memory-result-marks {
  display: flex;
  justify-content: flex-end;
  gap: 5px;
  color: #315f50;
}

.memory-result-marks svg {
  width: 18px;
  height: 18px;
}

.memory-result-marks .correct {
  color: #315f50;
}

.memory-result-marks .incorrect {
  color: #ad4d42;
}

.discover-card-header .study-audio-button {
  position: static;
  top: auto;
  left: auto;
}

.memory-result-heading .reaction.big {
  font-size: 72px;
  line-height: 1;
}

.memory-result-stage > #returnToLobby {
  display: block;
  margin: 20px auto 0;
}

.shell:has(.crossword-stage) {
  width: min(1460px, calc(100vw - 32px));
  padding-top: 16px;
}

.crossword-ready {
  min-height: 430px;
}

.crossword-mode-icon {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 8px;
  background: #eaf1f8;
  color: #41698f;
}

.crossword-mode-icon svg {
  width: 40px;
  height: 40px;
}

.crossword-ready > p {
  max-width: 680px;
}

.crossword-ready .eyebrow {
  margin-bottom: -12px;
}

.crossword-range-note {
  border-left: 4px solid #c88c48;
  padding: 9px 12px;
  background: #fff7ea;
  color: #7a5428 !important;
  font-size: 13px;
  font-weight: 800;
}

.crossword-rule-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 9px;
}

.crossword-rule-row span,
.crossword-status-items span,
.crossword-status-items strong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  border: 1px solid #d4e0eb;
  border-radius: 8px;
  padding: 0 11px;
  background: #f4f8fc;
  color: #41698f;
  font-size: 13px;
  font-weight: 900;
}

.crossword-rule-row svg,
.crossword-status-items svg {
  width: 17px;
  height: 17px;
}

.crossword-stage,
.crossword-result-stage {
  width: 100%;
  margin: 0 auto;
}

.crossword-statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.crossword-statusbar h2 {
  margin: 0;
  font-size: 26px;
}

.crossword-status-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.crossword-status-items strong.crossword-timer {
  min-width: 102px;
  border-color: #aac0d5;
  background: #41698f;
  color: white;
  font-variant-numeric: tabular-nums;
}

.crossword-role-callout {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
  border-left: 4px solid #557aa3;
  padding: 10px 12px;
  background: #edf4fa;
  color: #365b7d;
  font-size: 13px;
  font-weight: 800;
}

.crossword-role-callout svg {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
}

.crossword-role-callout > span {
  flex: 1 1 auto;
}

.crossword-workspace {
  display: grid;
  grid-template-columns: minmax(500px, 1.25fr) minmax(340px, 0.75fr);
  align-items: start;
  gap: 14px;
}

.crossword-board-panel,
.crossword-clue-panel,
.crossword-result-layout > .crossword-grid-wrap,
.crossword-answer-review {
  border: 1px solid rgba(63, 53, 41, 0.1);
  border-radius: 8px;
  background: #fffdf8;
}

.crossword-board-panel {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.crossword-grid-wrap {
  width: 100%;
  overflow: auto;
  padding: 8px;
}

.crossword-grid {
  display: grid;
  grid-template-columns: repeat(var(--crossword-columns), minmax(30px, 1fr));
  grid-template-rows: repeat(var(--crossword-rows), auto);
  gap: 2px;
  width: min(100%, calc(var(--crossword-columns) * 56px));
  min-width: calc(var(--crossword-columns) * 30px);
  margin: 0 auto;
}

.crossword-cell {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: 1px solid #9ba9b5;
  border-radius: 3px;
  background: #fff;
  color: #263d52;
  text-transform: uppercase;
}

.crossword-cell.filled {
  border-color: #557aa3;
  background: #edf4fa;
}

.crossword-cell.revealed {
  border-color: #a9822d;
  background: #fff3cf;
  color: #694812;
}

.crossword-cell.revealed::after {
  position: absolute;
  right: 3px;
  bottom: 2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #c2932f;
  content: "";
}

.crossword-cell.highlighted {
  border-color: #bf473f;
  background: #fff0ee;
  box-shadow: inset 0 0 0 2px rgba(191, 71, 63, 0.18);
}

.crossword-cell.conflict {
  border-color: #b94e45;
  background: #fff0ee;
  box-shadow: inset 0 0 0 2px rgba(185, 78, 69, 0.13);
}

.crossword-cell-number {
  position: absolute;
  top: 2px;
  left: 3px;
  color: #687786;
  font-size: clamp(7px, 1vw, 10px);
  font-weight: 900;
  line-height: 1;
}

.crossword-cell-letter {
  padding-top: 2px;
  font-size: clamp(15px, 2.4vw, 25px);
  font-weight: 900;
  line-height: 1;
}

.crossword-conflict-letters {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  overflow: hidden;
  color: #9b3028;
  font-size: clamp(10px, 1.5vw, 16px);
  text-transform: uppercase;
}

.crossword-conflict-letters::after {
  position: absolute;
  width: 140%;
  height: 1px;
  background: #d39b96;
  content: "";
  transform: rotate(-45deg);
}

.crossword-conflict-letters b {
  text-align: center;
}

.crossword-partner-progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid #e2e8ed;
  padding-top: 14px;
}

.crossword-partner-progress > div:first-child {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #536372;
  font-size: 13px;
}

.crossword-partner-progress svg {
  width: 17px;
  height: 17px;
}

.crossword-partner-entries {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}

.crossword-partner-entries > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: #e7eaec;
  color: #7a8288;
  font-size: 12px;
  font-weight: 900;
}

.crossword-partner-entries > span.placed {
  background: #dce9f4;
  color: #41698f;
}

.crossword-partner-entries > span.confirmed {
  background: #dcecdf;
  color: #315f50;
}

.crossword-partner-entries svg {
  width: 11px;
  height: 11px;
}

.crossword-clue-panel {
  max-height: calc(100svh - 185px);
  overflow: auto;
  padding: 14px;
}

.crossword-clue-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.crossword-clue-heading h3 {
  margin: 0;
  font-size: 21px;
}

.crossword-clue-heading span {
  color: #75808a;
  font-size: 12px;
  font-weight: 800;
}

.crossword-clue-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 12px;
  border-radius: 8px;
  background: #eef2f5;
  padding: 4px;
}

.crossword-clue-tab {
  display: grid;
  gap: 2px;
  min-height: 48px;
  border: 0;
  border-radius: 6px;
  padding: 7px 8px;
  background: transparent;
  color: #63717c;
  text-align: left;
}

.crossword-clue-tab strong,
.crossword-clue-tab span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crossword-clue-tab strong {
  color: inherit;
  font-size: 13px;
}

.crossword-clue-tab span {
  font-size: 11px;
  font-weight: 800;
}

.crossword-clue-tab.active {
  background: #fff;
  color: #365b7d;
  box-shadow: 0 1px 4px rgba(53, 69, 85, 0.12);
}

.crossword-clue-group-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.crossword-clue-group-heading h4 {
  margin: 0;
  color: #365b7d;
  font-size: 15px;
}

.crossword-clue-group-heading span {
  border-radius: 999px;
  padding: 3px 8px;
  background: #eaf1f8;
  color: #41698f;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.crossword-clue-group.partner-owned .crossword-clue-group-heading span {
  background: #eef0f1;
  color: #6f777d;
}

.crossword-clue-list {
  display: grid;
  gap: 8px;
}

.crossword-entry-card {
  display: grid;
  gap: 8px;
  border: 1px solid #d9e0e6;
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.crossword-entry-card.confirmed {
  border-color: #8eb498;
  background: #f0f7f1;
}

.crossword-entry-card.highlighted {
  border-color: #bf473f;
  background: #fff7f5;
  box-shadow: 0 0 0 2px rgba(191, 71, 63, 0.1);
}

.crossword-entry-card.read-only:not(.confirmed) {
  background: #f8f9fa;
}

.crossword-entry-heading {
  display: flex;
  align-items: center;
  gap: 8px;
}

.crossword-entry-heading strong {
  color: #365b7d;
}

.crossword-entry-heading span {
  margin-left: auto;
  color: #7b858e;
  font-size: 11px;
  font-weight: 800;
}

.crossword-entry-heading svg {
  width: 19px;
  height: 19px;
  color: #3e7851;
}

.crossword-entry-card > p,
.crossword-entry-card blockquote {
  margin: 0;
  color: #3f464c;
  font-size: 13px;
  line-height: 1.4;
}

.crossword-entry-card blockquote {
  border-left: 3px solid #b7cadc;
  padding: 7px 9px;
  background: #f6f9fc;
  color: #64717c;
  font-style: italic;
}

.crossword-clue-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.crossword-translation {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 2px 6px;
  background: #fff7dc;
  color: #7a5b1b;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.2;
}

.crossword-part-of-speech {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px 7px;
  background: #eaf1f8;
  color: #41698f;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.crossword-entry-owner {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #727b82;
  font-size: 12px;
  font-weight: 800;
}

.crossword-entry-owner svg {
  width: 16px;
  height: 16px;
}

.crossword-entry-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 6px;
}

.crossword-entry-input {
  min-height: 40px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 900;
}

.crossword-entry-controls button {
  min-height: 40px;
  padding: 0 11px;
  font-size: 12px;
}

.crossword-help-button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #e9f0f6;
  color: #365b7d;
}

.crossword-help-button svg {
  width: 16px;
  height: 16px;
}

.crossword-scan-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  margin-left: auto;
  white-space: nowrap;
  background: #fff0ee;
  color: #90413c;
}

.crossword-scan-button svg {
  width: 16px;
  height: 16px;
}

.crossword-result-stage {
  width: min(100%, 1160px);
}

.crossword-result-heading {
  display: grid;
  justify-items: center;
  gap: 6px;
  margin-bottom: 18px;
  text-align: center;
}

.crossword-result-heading .reaction {
  font-size: 68px;
  line-height: 1;
}

.crossword-result-heading h2,
.crossword-result-heading p {
  margin: 0;
}

.crossword-result-layout {
  display: grid;
  grid-template-columns: minmax(420px, 1fr) minmax(360px, 0.9fr);
  align-items: start;
  gap: 14px;
}

.crossword-result-layout > .crossword-grid-wrap {
  padding: 18px;
}

.crossword-answer-review {
  overflow: hidden;
}

.crossword-answer-row {
  display: grid;
  grid-template-columns: 86px minmax(100px, 0.45fr) minmax(0, 1fr) 22px;
  align-items: center;
  gap: 9px;
  min-height: 58px;
  border-bottom: 1px solid #e7e1d9;
  padding: 9px 11px;
}

.crossword-answer-row:last-child {
  border-bottom: 0;
}

.crossword-answer-row > span {
  color: #66727c;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.crossword-answer-row > strong {
  color: #365b7d;
  text-transform: uppercase;
}

.crossword-answer-row > p {
  margin: 0;
  color: #606b73;
  font-size: 12px;
  line-height: 1.3;
}

.crossword-answer-row > svg {
  width: 18px;
  height: 18px;
}

.crossword-answer-row.correct > svg {
  color: #3e7851;
}

.crossword-answer-row.incorrect > svg {
  color: #ad4d42;
}

.crossword-result-stage > #returnToLobby {
  display: block;
  margin: 20px auto 0;
}

.empty-state {
  display: grid;
  place-items: center;
  min-height: 160px;
  color: #66736c;
  font-weight: 800;
}

.arena {
  display: grid;
  justify-items: center;
  gap: 18px;
  min-height: 390px;
  text-align: center;
}

.review-arena {
  width: min(100%, 540px);
  margin: 0 auto;
}

.duel-stage {
  display: grid;
  grid-template-columns: minmax(230px, 340px) 540px minmax(230px, 340px);
  align-items: stretch;
  justify-content: center;
  gap: 28px;
  width: 100%;
}

.duel-side-player {
  position: relative;
  align-self: center;
  min-width: 0;
  min-height: 220px;
  border: 1px solid rgba(63, 53, 41, 0.08);
  border-radius: 8px;
  padding: 22px;
  background: #fffdf8;
}

.duel-side-player.round-winner {
  border-color: #4f7f69;
  box-shadow:
    0 0 0 4px rgba(135, 168, 138, 0.22),
    0 18px 36px rgba(79, 127, 105, 0.16);
}

.duel-side-player.round-winner-animate {
  animation: winner-panel 980ms cubic-bezier(0.18, 0.9, 0.24, 1);
}

.duel-side-player.round-leading {
  border-color: #4f7f69;
  box-shadow: 0 0 0 4px rgba(135, 168, 138, 0.12);
}

.duel-side-player.challenge-cue {
  border-color: #b56a35;
  animation: challenge-cue-panel 520ms ease-out infinite alternate;
}

.duel-side-player.near-miss {
  border-color: #b56a35;
  box-shadow: 0 0 0 4px rgba(181, 106, 53, 0.12);
}

.duel-side-player.round-loser {
  border-color: #b76a5f;
}

.duel-win-reaction {
  position: absolute;
  top: -34px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  border-radius: 999px;
  background: #f2f8ef;
  box-shadow:
    0 0 0 6px rgba(135, 168, 138, 0.2),
    0 18px 34px rgba(79, 127, 105, 0.28);
  font-size: 42px;
  line-height: 1;
  animation: winner-reaction 1100ms cubic-bezier(0.16, 1.16, 0.24, 1);
  z-index: 2;
}

.duel-win-reaction.pending {
  width: auto;
  height: auto;
  background: transparent;
  box-shadow: none;
  color: #4f7f69;
  font-weight: 900;
  font-size: 34px;
  animation: none;
}

.duel-cue-reaction,
.duel-loss-reaction {
  position: absolute;
  top: -22px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  line-height: 1;
  animation: winner-reaction 820ms ease-out;
}

.duel-cue-reaction {
  background: #fff1df;
  color: #b56a35;
  animation: none;
}

.duel-cue-reaction svg {
  width: 22px;
  height: 22px;
}

.duel-loss-reaction {
  font-size: 28px;
}

.duel-loss-reaction.near {
  font-size: 25px;
}

.duel-win-reaction.settled,
.duel-loss-reaction.settled {
  animation: none;
}

.duel-side-player .dot.latest-win {
  animation: score-dot-pop 980ms cubic-bezier(0.18, 0.9, 0.24, 1);
}

.duel-side-player.you {
  border-color: rgba(79, 127, 105, 0.4);
}

.duel-side-player.opponent {
  border-color: rgba(122, 85, 64, 0.24);
}

.duel-player-heading {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.duel-player-avatar {
  display: grid;
  place-items: center;
  width: 80px;
  height: 80px;
  flex: 0 0 80px;
  border-radius: 8px;
  overflow: hidden;
  background: #edf2e9;
  font-size: 42px;
}

.duel-side-player.opponent .duel-player-avatar {
  background: #f1e4d1;
}

.duel-player-identity {
  min-width: 0;
}

.duel-player-identity strong,
.duel-player-identity span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.duel-player-identity strong {
  color: #3f3529;
  font-size: 20px;
}

.duel-player-identity span,
.duel-round-score > span,
.duel-set-score span {
  color: #756c61;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.duel-score-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px;
  align-items: end;
  gap: 14px;
  margin-top: 28px;
}

.duel-round-score {
  min-width: 0;
}

.duel-round-score .dots {
  margin-top: 10px;
}

.duel-set-score {
  display: grid;
  justify-items: center;
  gap: 5px;
}

.duel-set-score strong {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 8px;
  background: #4f7f69;
  color: #fffdf8;
  font-size: 25px;
}

.duel-side-player.opponent .duel-set-score strong {
  background: #7a5540;
}

.round-context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 32px;
  margin: 0 2px 7px;
  color: #756c61;
  font-size: 13px;
  font-weight: 800;
}

.round-context-copy {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}

.round-context-copy strong {
  color: #3f3529;
  font-size: 17px;
  font-weight: 900;
}

.round-context .connection {
  flex: 0 0 auto;
  padding: 6px 10px;
  font-size: 12px;
}

.review-game-card {
  --review-side-padding: clamp(19px, 3.75vw, 30px);
  display: flex;
  flex-direction: column;
  height: min(770px, calc(100svh - 65px));
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(63, 53, 41, 0.06);
  border-radius: 8px;
  background: #fffdf8;
}

.review-card-header {
  padding: 26px var(--review-side-padding) 0;
}

.review-card-header-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}

.review-game-card:has(.revealed-body) .review-card-header-inner {
  width: min(92%, 430px);
  margin-right: auto;
  margin-left: auto;
}

.review-card-header h2 {
  min-width: 0;
  margin: 0;
  color: #24221e;
  font-size: 30px;
  font-weight: 900;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.meaning-play-button {
  display: grid;
  place-items: center;
  width: 80px;
  height: 30px;
  min-height: 30px;
  flex: 0 0 80px;
  border-radius: 999px;
  padding: 0;
  background: #4f7f69;
  color: #fffdf8;
}

.meaning-play-button svg {
  width: 20px;
  height: 20px;
}

.review-card-body {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  min-height: 0;
  padding: 30px 24px 54px;
  text-align: center;
}

.review-card-body.revealed-body {
  display: block;
  overflow: hidden;
  padding: 18px var(--review-side-padding) 24px;
  text-align: left;
}

.review-result-content {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
  min-height: 0;
}

.round-result-burst {
  position: absolute;
  top: 18px;
  right: 22px;
  width: 92px;
  height: 92px;
  pointer-events: none;
  z-index: 2;
}

.round-burst-piece {
  --burst-x: 0px;
  --burst-y: 0px;
  --burst-rotate: 0deg;
  position: absolute;
  top: 46px;
  left: 46px;
  width: 8px;
  height: 14px;
  border-radius: 3px;
  background: #87a88a;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.2) rotate(0deg);
  animation: round-confetti-burst 1200ms ease-out forwards;
}

.round-result-burst.lost .round-burst-piece {
  background: #d65f7d;
}

.round-burst-piece:nth-child(3n) {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #e9c46a;
}

.round-burst-piece:nth-child(4n) {
  background: #b56a35;
}

.round-burst-piece-1 { --burst-x: -40px; --burst-y: -36px; --burst-rotate: -118deg; animation-delay: 0ms; }
.round-burst-piece-2 { --burst-x: -18px; --burst-y: -48px; --burst-rotate: 76deg; animation-delay: 40ms; }
.round-burst-piece-3 { --burst-x: 8px; --burst-y: -50px; --burst-rotate: -62deg; animation-delay: 75ms; }
.round-burst-piece-4 { --burst-x: 34px; --burst-y: -34px; --burst-rotate: 132deg; animation-delay: 20ms; }
.round-burst-piece-5 { --burst-x: -48px; --burst-y: -6px; --burst-rotate: 96deg; animation-delay: 90ms; }
.round-burst-piece-6 { --burst-x: 48px; --burst-y: -4px; --burst-rotate: -142deg; animation-delay: 55ms; }
.round-burst-piece-7 { --burst-x: -34px; --burst-y: 28px; --burst-rotate: 158deg; animation-delay: 30ms; }
.round-burst-piece-8 { --burst-x: -8px; --burst-y: 44px; --burst-rotate: -92deg; animation-delay: 110ms; }
.round-burst-piece-9 { --burst-x: 22px; --burst-y: 40px; --burst-rotate: 118deg; animation-delay: 65ms; }
.round-burst-piece-10 { --burst-x: 44px; --burst-y: 22px; --burst-rotate: -74deg; animation-delay: 100ms; }
.round-burst-piece-11 { --burst-x: -8px; --burst-y: -24px; --burst-rotate: 144deg; animation-delay: 10ms; }
.round-burst-piece-12 { --burst-x: 16px; --burst-y: 18px; --burst-rotate: -128deg; animation-delay: 85ms; }

.victory-fireworks {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: hidden;
  pointer-events: none;
}

.victory-fireworks::before {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 35%, rgb(255 255 255 / 10%), transparent 48%);
  content: "";
  opacity: 0;
  animation: firework-sky-glow 3s ease-out forwards;
}

.firework-burst {
  --burst-color: #ffd166;
  --burst-delay: 0ms;
  position: absolute;
  left: 50vw;
  top: 28vh;
  width: 1px;
  height: 1px;
}

.firework-rocket,
.firework-flash,
.firework-ring,
.firework-particle {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  pointer-events: none;
}

.firework-rocket {
  width: 3px;
  height: clamp(48px, 8vh, 86px);
  border-radius: 999px;
  background: linear-gradient(to bottom, var(--burst-color), rgb(255 255 255 / 88%) 22%, transparent 100%);
  filter: drop-shadow(0 0 5px var(--burst-color));
  transform: translate(-50%, clamp(190px, 38vh, 390px));
  transform-origin: 50% 0%;
  opacity: 0;
  animation: firework-launch 430ms cubic-bezier(0.22, 0.7, 0.32, 1) var(--burst-delay) both;
}

.firework-flash {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: radial-gradient(circle, white 0 12%, var(--burst-color) 28%, transparent 72%);
  filter: drop-shadow(0 0 16px var(--burst-color));
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
  animation: firework-flash 420ms ease-out calc(var(--burst-delay) + 390ms) both;
}

.firework-ring {
  width: 18px;
  height: 18px;
  border: 2px solid color-mix(in srgb, var(--burst-color) 80%, white);
  border-radius: 999px;
  box-shadow: 0 0 9px var(--burst-color), inset 0 0 7px var(--burst-color);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.2);
  animation: firework-ring 680ms ease-out calc(var(--burst-delay) + 405ms) both;
}

.firework-particle {
  --spark-x: 0px;
  --spark-y: -90px;
  --spark-angle: 0deg;
  --spark-color: #ffd166;
  --spark-stagger: 0ms;
  width: 4px;
  height: 19px;
  border-radius: 999px;
  background: linear-gradient(to bottom, white 0%, var(--spark-color) 28%, color-mix(in srgb, var(--spark-color) 55%, transparent) 58%, transparent 100%);
  box-shadow: 0 0 7px var(--spark-color);
  opacity: 0;
  transform: translate(-50%, -50%) rotate(var(--spark-angle)) scaleY(0.2);
  transform-origin: 50% 15%;
  animation: firework-particle 960ms cubic-bezier(0.18, 0.62, 0.28, 1) calc(var(--burst-delay) + 405ms + var(--spark-stagger)) both;
}

.firework-particle:nth-of-type(3n) {
  width: 3px;
  height: 13px;
}

.firework-particle:nth-of-type(4n) {
  width: 5px;
  height: 23px;
}

.firework-burst-1 {
  --burst-delay: 0ms;
  left: 17vw;
  top: 27vh;
}

.firework-burst-2 {
  --burst-delay: 210ms;
  left: 81vw;
  top: 22vh;
}

.firework-burst-3 {
  --burst-delay: 460ms;
  left: 48vw;
  top: 20vh;
}

.firework-burst-4 {
  --burst-delay: 720ms;
  left: 68vw;
  top: 43vh;
}

.firework-burst-5 {
  --burst-delay: 990ms;
  left: 26vw;
  top: 53vh;
}

.firework-burst-6 {
  --burst-delay: 1260ms;
  left: 88vw;
  top: 54vh;
}

.firework-burst-7 {
  --burst-delay: 1540ms;
  left: 49vw;
  top: 50vh;
}

.review-result-top {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: min(92%, 430px);
  margin-right: auto;
  margin-left: auto;
}

.review-result-content.has-image .review-image-frame {
  flex: 0 1 auto;
  min-height: 0;
  margin-top: auto;
}

.review-result-content.has-image .continue-round {
  margin-top: 24px;
}

.review-result-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.review-meta-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.meta-chip,
.result-badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 13px;
  font-weight: 800;
}

.meta-chip {
  background: #f1e4d1;
  color: #3f3529;
}

.ipa-chip {
  overflow-wrap: anywhere;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
}

.result-badge {
  gap: 5px;
  margin-left: auto;
  background: #e5eee4;
  color: #4f7f69;
}

.result-badge svg {
  width: 16px;
  height: 16px;
}

.result-badge.gave-up {
  background: #f1e4d1;
  color: #7a5540;
}

.result-badge.near-miss,
.result-badge.lost {
  background: #fff1df;
  color: #9a5a2b;
}

.result-badge.lost {
  background: #ffe1df;
  color: #9d2f27;
}

.give-up-button {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  border: 1px solid #d8c9ba;
  background: #fffdf8;
  color: #7a5540;
  font-size: 14px;
}

.give-up-button svg {
  width: 17px;
  height: 17px;
}

.gave-up-text {
  color: #7a5540 !important;
}

.near-miss-text {
  color: #b56a35 !important;
}

.review-definition {
  margin: 0;
  color: #3f3529;
  font-size: 19px;
  line-height: 1.45;
}

.review-example {
  width: 100%;
  border-radius: 8px;
  padding: 13px 16px;
  background: #f1e4d1;
  color: #3f3529;
  font-size: 17px;
  font-style: italic;
  line-height: 1.4;
}

.review-image-frame {
  position: relative;
  display: grid;
  place-items: center;
  width: min(92%, 430px);
  margin-right: auto;
  margin-left: auto;
  overflow: hidden;
  border-radius: 8px;
  aspect-ratio: 4 / 3;
}

.review-meaning-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
  object-fit: contain;
  aspect-ratio: auto;
}

.continue-round {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: min(100%, 260px);
  margin: 0 auto;
}

.continue-round svg {
  width: 18px;
  height: 18px;
}

.prompt-state {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 999px;
  background: rgba(135, 168, 138, 0.14);
  color: #4f7f69;
}

.prompt-state.challenge,
.challenge-countdown {
  background: #fff1df;
  color: #b56a35;
}

.prompt-state svg {
  width: 22px;
  height: 22px;
}

.countdown {
  display: grid;
  place-items: center;
  width: 150px;
  height: 150px;
  border-radius: 999px;
  background: #4f7f69;
  color: white;
  font-size: 58px;
  font-weight: 900;
}

.countdown.compact {
  width: 88px;
  height: 88px;
  font-size: 38px;
}

.countdown-placeholder {
  visibility: hidden;
}

.answer-anchor {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 58px;
}

.slot-frame {
  width: min(
    calc(100% - 52px),
    max(
      164px,
      calc(
        var(--slot-count, 8) * 24px + var(--optional-count, 0) * 27px + 20px
      )
    )
  );
}

.countdown-slot-frame {
  display: grid;
  place-items: center;
  min-height: 58px;
}

.answer-form {
  position: relative;
  min-height: 58px;
}

.spelling-entry {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  width: 100%;
  min-height: 58px;
  border-radius: 8px;
  cursor: text;
}

.spelling-entry input {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  outline: 0;
  opacity: 0;
  cursor: text;
}

.typing-slots {
  display: flex;
  z-index: 1;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 3px;
  width: 100%;
  padding: 6px 8px;
}

.typing-slot {
  position: relative;
  display: inline-block;
  width: 21px;
  min-width: 21px;
  height: 42px;
  flex: 0 0 21px;
  color: #3f3529;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
}

.typing-slot.optional {
  width: 48px;
  min-width: 48px;
  flex-basis: 48px;
}

.typing-slot.filled {
  color: #4f7f69;
}

.slot-letter {
  position: absolute;
  inset: 0 0 8px;
  display: grid;
  place-items: center;
}

.slot-line {
  position: absolute;
  bottom: 4px;
  left: 50%;
  width: 18px;
  height: 2px;
  transform: translateX(-50%);
  border-radius: 2px;
  background: #3f3529;
}

.typing-slot.filled .slot-line {
  background: #87a88a;
}

.slot-parenthesis {
  position: absolute;
  top: 1px;
  color: #3f3529;
  font-size: 28px;
  font-weight: 700;
}

.slot-parenthesis.left {
  left: 1px;
}

.slot-parenthesis.right {
  right: 1px;
}

.typing-slot.active::after {
  position: absolute;
  top: 4px;
  left: -4px;
  width: 2px;
  height: 30px;
  background: #4f7f69;
  content: "";
  animation: caret-blink 1s steps(1) infinite;
}

.typing-slot.active.caret-after::after {
  right: -4px;
  left: auto;
}

.spelling-entry.wrong {
  background: #ffe9e7;
}

.spelling-entry.wrong .typing-slot {
  color: #b43a31;
}

.spelling-entry.wrong .slot-line {
  background: #b43a31;
}

.spelling-entry.locked {
  background: #e5eee4;
}

.spelling-entry.locked .typing-slot,
.spelling-entry.locked .slot-parenthesis {
  color: #4f7f69;
}

.spelling-entry.locked .slot-line {
  background: #87a88a;
}

.icon-button {
  position: absolute;
  top: 0;
  left: calc(100% + 8px);
  width: 44px;
  min-height: 58px;
  padding: 0;
  background: #edf2e9;
  color: #4f7f69;
}

.icon-button svg {
  width: 22px;
  height: 22px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.ready-control {
  width: min(100%, 380px);
  min-height: 78px;
  font-size: 18px;
}

.agreement-button {
  --agreement-fill: 0%;
  overflow: hidden;
  border: 1px solid #4f7f69;
  background: linear-gradient(
    to right,
    #4f7f69 var(--agreement-fill),
    #fffdf8 0
  );
  color: #294c3d;
  transition:
    background 180ms ease,
    color 180ms ease,
    border-color 180ms ease;
}

.agreement-button.agreement-half {
  --agreement-fill: 50%;
}

.agreement-button.agreement-full {
  --agreement-fill: 100%;
  color: #fffdf8;
}

.match-celebration {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 620px);
  height: 170px;
  margin: 0 auto 8px;
  overflow: visible;
}

.result .reaction {
  position: relative;
  z-index: 1;
  font-size: 62px;
  animation: trophy-celebration 1100ms cubic-bezier(0.16, 1.16, 0.24, 1);
  filter: drop-shadow(0 16px 18px rgba(122, 85, 64, 0.18));
}

.result .reaction.big {
  font-size: 96px;
}

.celebration-piece {
  --piece-x: 0px;
  --piece-y: 0px;
  --piece-rotate: 0deg;
  position: absolute;
  left: 50%;
  top: 54%;
  width: 10px;
  height: 18px;
  border-radius: 3px;
  background: #87a88a;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.4) rotate(0deg);
  animation: confetti-burst 1250ms ease-out forwards;
}

.celebration-piece:nth-child(3n) {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #e9c46a;
}

.celebration-piece:nth-child(3n + 1) {
  background: #b56a35;
}

.celebration-piece:nth-child(4n) {
  background: #4f7f69;
}

.flower-piece {
  --flower-x: 0px;
  --flower-y: 0px;
  --flower-rotate: 0deg;
  --flower-size: 30px;
  position: absolute;
  left: 50%;
  top: 54%;
  display: grid;
  place-items: center;
  width: var(--flower-size);
  height: var(--flower-size);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.18) rotate(0deg);
  animation: flower-scatter 1900ms cubic-bezier(0.14, 0.86, 0.23, 1) forwards;
  z-index: 0;
}

.flower-piece::before {
  content: "✿";
  color: #d65f7d;
  font-size: var(--flower-size);
  line-height: 1;
  filter: drop-shadow(0 8px 8px rgba(122, 85, 64, 0.16));
}

.flower-piece:nth-child(4n)::before {
  content: "❀";
  color: #e9a84f;
}

.flower-piece:nth-child(4n + 1)::before {
  content: "✾";
  color: #87a88a;
}

.flower-piece:nth-child(4n + 2)::before {
  content: "✽";
  color: #b56a35;
}

.flower-1 { --flower-x: -280px; --flower-y: -118px; --flower-rotate: -140deg; --flower-size: 34px; animation-delay: 0ms; }
.flower-2 { --flower-x: -238px; --flower-y: -164px; --flower-rotate: 82deg; --flower-size: 26px; animation-delay: 40ms; }
.flower-3 { --flower-x: -194px; --flower-y: -96px; --flower-rotate: -68deg; --flower-size: 30px; animation-delay: 90ms; }
.flower-4 { --flower-x: -156px; --flower-y: -148px; --flower-rotate: 152deg; --flower-size: 38px; animation-delay: 20ms; }
.flower-5 { --flower-x: -118px; --flower-y: -74px; --flower-rotate: -116deg; --flower-size: 24px; animation-delay: 125ms; }
.flower-6 { --flower-x: -78px; --flower-y: -176px; --flower-rotate: 118deg; --flower-size: 31px; animation-delay: 65ms; }
.flower-7 { --flower-x: -42px; --flower-y: -112px; --flower-rotate: -34deg; --flower-size: 26px; animation-delay: 155ms; }
.flower-8 { --flower-x: 8px; --flower-y: -188px; --flower-rotate: 172deg; --flower-size: 34px; animation-delay: 30ms; }
.flower-9 { --flower-x: 48px; --flower-y: -108px; --flower-rotate: -94deg; --flower-size: 28px; animation-delay: 115ms; }
.flower-10 { --flower-x: 94px; --flower-y: -166px; --flower-rotate: 76deg; --flower-size: 36px; animation-delay: 55ms; }
.flower-11 { --flower-x: 134px; --flower-y: -82px; --flower-rotate: -156deg; --flower-size: 25px; animation-delay: 145ms; }
.flower-12 { --flower-x: 178px; --flower-y: -136px; --flower-rotate: 128deg; --flower-size: 31px; animation-delay: 80ms; }
.flower-13 { --flower-x: 224px; --flower-y: -104px; --flower-rotate: -78deg; --flower-size: 39px; animation-delay: 10ms; }
.flower-14 { --flower-x: 270px; --flower-y: -154px; --flower-rotate: 96deg; --flower-size: 27px; animation-delay: 105ms; }
.flower-15 { --flower-x: -292px; --flower-y: -28px; --flower-rotate: 168deg; --flower-size: 29px; animation-delay: 75ms; }
.flower-16 { --flower-x: -240px; --flower-y: 26px; --flower-rotate: -88deg; --flower-size: 37px; animation-delay: 135ms; }
.flower-17 { --flower-x: -184px; --flower-y: 4px; --flower-rotate: 112deg; --flower-size: 24px; animation-delay: 25ms; }
.flower-18 { --flower-x: -134px; --flower-y: 50px; --flower-rotate: -132deg; --flower-size: 32px; animation-delay: 165ms; }
.flower-19 { --flower-x: -72px; --flower-y: 20px; --flower-rotate: 72deg; --flower-size: 27px; animation-delay: 95ms; }
.flower-20 { --flower-x: -12px; --flower-y: 54px; --flower-rotate: -168deg; --flower-size: 35px; animation-delay: 45ms; }
.flower-21 { --flower-x: 54px; --flower-y: 24px; --flower-rotate: 142deg; --flower-size: 25px; animation-delay: 150ms; }
.flower-22 { --flower-x: 116px; --flower-y: 58px; --flower-rotate: -62deg; --flower-size: 33px; animation-delay: 70ms; }
.flower-23 { --flower-x: 168px; --flower-y: 10px; --flower-rotate: 158deg; --flower-size: 28px; animation-delay: 120ms; }
.flower-24 { --flower-x: 226px; --flower-y: 44px; --flower-rotate: -108deg; --flower-size: 36px; animation-delay: 35ms; }
.flower-25 { --flower-x: 292px; --flower-y: -18px; --flower-rotate: 88deg; --flower-size: 29px; animation-delay: 170ms; }
.flower-26 { --flower-x: -54px; --flower-y: -38px; --flower-rotate: -72deg; --flower-size: 23px; animation-delay: 15ms; }
.flower-27 { --flower-x: 24px; --flower-y: -34px; --flower-rotate: 94deg; --flower-size: 24px; animation-delay: 130ms; }
.flower-28 { --flower-x: 88px; --flower-y: -32px; --flower-rotate: -126deg; --flower-size: 22px; animation-delay: 60ms; }

.piece-1 { --piece-x: -145px; --piece-y: -86px; --piece-rotate: -118deg; animation-delay: 20ms; }
.piece-2 { --piece-x: -110px; --piece-y: -118px; --piece-rotate: 72deg; animation-delay: 80ms; }
.piece-3 { --piece-x: -70px; --piece-y: -96px; --piece-rotate: -48deg; animation-delay: 40ms; }
.piece-4 { --piece-x: -34px; --piece-y: -128px; --piece-rotate: 132deg; animation-delay: 110ms; }
.piece-5 { --piece-x: 18px; --piece-y: -116px; --piece-rotate: -86deg; animation-delay: 55ms; }
.piece-6 { --piece-x: 58px; --piece-y: -134px; --piece-rotate: 104deg; animation-delay: 90ms; }
.piece-7 { --piece-x: 102px; --piece-y: -96px; --piece-rotate: -154deg; animation-delay: 35ms; }
.piece-8 { --piece-x: 142px; --piece-y: -72px; --piece-rotate: 64deg; animation-delay: 120ms; }
.piece-9 { --piece-x: -158px; --piece-y: -18px; --piece-rotate: 146deg; animation-delay: 70ms; }
.piece-10 { --piece-x: -118px; --piece-y: 22px; --piece-rotate: -72deg; animation-delay: 145ms; }
.piece-11 { --piece-x: -56px; --piece-y: -32px; --piece-rotate: 116deg; animation-delay: 15ms; }
.piece-12 { --piece-x: -10px; --piece-y: -64px; --piece-rotate: -148deg; animation-delay: 135ms; }
.piece-13 { --piece-x: 42px; --piece-y: -42px; --piece-rotate: 78deg; animation-delay: 65ms; }
.piece-14 { --piece-x: 82px; --piece-y: 6px; --piece-rotate: -96deg; animation-delay: 105ms; }
.piece-15 { --piece-x: 132px; --piece-y: 26px; --piece-rotate: 138deg; animation-delay: 50ms; }
.piece-16 { --piece-x: -92px; --piece-y: -62px; --piece-rotate: 92deg; animation-delay: 160ms; }
.piece-17 { --piece-x: 2px; --piece-y: 10px; --piece-rotate: -118deg; animation-delay: 25ms; }
.piece-18 { --piece-x: 118px; --piece-y: -42px; --piece-rotate: 88deg; animation-delay: 150ms; }

.revealed-word {
  border-bottom: 4px solid #87a88a;
  font-size: 42px;
  font-weight: 900;
}

.summary {
  display: grid;
  gap: 8px;
  width: min(100%, 620px);
  max-height: 260px;
  overflow: auto;
  text-align: left;
}

.summary div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid #d6ddd8;
  border-radius: 8px;
  padding: 10px 12px;
}

.summary div > span:nth-child(2) {
  flex: 1;
}

.summary strong {
  color: #4f7f69;
}

.summary strong.winner-you {
  color: #4f7f69;
}

.summary strong.winner-opponent {
  color: #9d2f27;
}

.summary strong.winner-opponent.near-miss-text {
  color: #b56a35;
}

.word-number {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: 999px;
  background: #edf2e9;
  color: #526159;
  font-size: 12px;
}

.toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  border-radius: 8px;
  background: #3f3529;
  color: white;
  font-weight: 800;
  padding: 12px 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
}

[class*="shake-"].wrong {
  animation: shake 260ms linear;
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-7px);
  }
  75% {
    transform: translateX(7px);
  }
}

@keyframes pop {
  0% {
    transform: scale(0.78);
  }
  60% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes trophy-celebration {
  0% {
    opacity: 0;
    transform: translateY(28px) scale(0.42) rotate(-8deg);
  }
  34% {
    opacity: 1;
    transform: translateY(-16px) scale(1.18) rotate(7deg);
  }
  58% {
    transform: translateY(4px) scale(0.96) rotate(-4deg);
  }
  78% {
    transform: translateY(-5px) scale(1.04) rotate(2deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0);
  }
}

@keyframes round-confetti-burst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.2) rotate(0deg);
  }
  18% {
    opacity: 1;
  }
  72% {
    opacity: 1;
    transform: translate(calc(-50% + var(--burst-x)), calc(-50% + var(--burst-y))) scale(1) rotate(var(--burst-rotate));
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--burst-x)), calc(-50% + var(--burst-y) + 24px)) scale(0.85) rotate(calc(var(--burst-rotate) + 80deg));
  }
}

@keyframes firework-sky-glow {
  0% {
    opacity: 0;
  }
  12%,
  78% {
    opacity: 0.65;
  }
  100% {
    opacity: 0;
  }
}

@keyframes firework-launch {
  0% {
    opacity: 0;
    transform: translate(-50%, clamp(190px, 38vh, 390px)) scaleY(0.35);
  }
  18% {
    opacity: 1;
  }
  82% {
    opacity: 1;
    transform: translate(-50%, 8px) scaleY(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, 0) scaleY(0.1);
  }
}

@keyframes firework-flash {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
  }
  18% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.25);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2.5);
  }
}

@keyframes firework-ring {
  0% {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(0.2);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(7.6);
  }
}

@keyframes firework-particle {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--spark-angle)) scaleY(0.15);
  }
  9% {
    opacity: 1;
  }
  62% {
    opacity: 1;
    transform: translate(calc(-50% + var(--spark-x)), calc(-50% + var(--spark-y))) rotate(var(--spark-angle)) scaleY(1);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--spark-x)), calc(-50% + var(--spark-y) + 38px)) rotate(calc(var(--spark-angle) + 8deg)) scaleY(0.38);
  }
}

@keyframes confetti-burst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.2) rotate(0deg);
  }
  18% {
    opacity: 1;
  }
  72% {
    opacity: 1;
    transform: translate(calc(-50% + var(--piece-x)), calc(-50% + var(--piece-y))) scale(1) rotate(var(--piece-rotate));
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--piece-x)), calc(-50% + var(--piece-y) + 36px)) scale(0.9) rotate(calc(var(--piece-rotate) + 80deg));
  }
}

@keyframes flower-scatter {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.18) rotate(0deg);
  }
  16% {
    opacity: 1;
  }
  58% {
    opacity: 1;
    transform: translate(calc(-50% + var(--flower-x)), calc(-50% + var(--flower-y))) scale(1.06) rotate(var(--flower-rotate));
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--flower-x)), calc(-50% + var(--flower-y) + 54px)) scale(0.82) rotate(calc(var(--flower-rotate) + 120deg));
  }
}

@keyframes winner-panel {
  0% {
    transform: scale(0.965);
    box-shadow: 0 0 0 0 rgba(135, 168, 138, 0);
  }
  32% {
    transform: scale(1.04);
    box-shadow:
      0 0 0 8px rgba(135, 168, 138, 0.28),
      0 22px 46px rgba(79, 127, 105, 0.22);
  }
  62% {
    transform: scale(0.992);
    box-shadow:
      0 0 0 13px rgba(135, 168, 138, 0.1),
      0 18px 36px rgba(79, 127, 105, 0.17);
  }
  100% {
    transform: scale(1);
    box-shadow:
      0 0 0 4px rgba(135, 168, 138, 0.22),
      0 18px 36px rgba(79, 127, 105, 0.16);
  }
}

@keyframes challenge-cue-panel {
  0% {
    box-shadow: 0 0 0 2px rgba(181, 106, 53, 0.12);
  }
  100% {
    box-shadow: 0 0 0 6px rgba(181, 106, 53, 0.23);
  }
}

@keyframes winner-reaction {
  0% {
    opacity: 0;
    transform: translateY(22px) scale(0.28) rotate(-18deg);
  }
  38% {
    opacity: 1;
    transform: translateY(-14px) scale(1.34) rotate(9deg);
  }
  64% {
    opacity: 1;
    transform: translateY(2px) scale(0.96) rotate(-4deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0);
  }
}

@keyframes score-dot-pop {
  0% {
    transform: scale(0.2);
    box-shadow: 0 0 0 0 rgba(79, 127, 105, 0);
  }
  45% {
    transform: scale(1.9);
    box-shadow: 0 0 0 7px rgba(79, 127, 105, 0.18);
  }
  72% {
    transform: scale(0.84);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(79, 127, 105, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .duel-side-player.round-winner-animate,
  .duel-win-reaction,
  .duel-side-player .dot.latest-win,
  .result .reaction,
  .celebration-piece,
  .flower-piece,
  .round-burst-piece,
  .victory-fireworks::before,
  .firework-rocket,
  .firework-flash,
  .firework-ring,
  .firework-particle {
    animation-duration: 1ms;
    animation-delay: 0ms;
  }
}

@keyframes caret-blink {
  0%,
  48% {
    opacity: 1;
  }
  49%,
  100% {
    opacity: 0;
  }
}

@media (max-width: 900px) {
  .memory-recall-grid {
    grid-template-columns: 1fr;
  }

  .meaning-bank {
    margin-top: 14px;
    border-top: 1px solid #e1dbd2;
    border-left: 0;
    padding-top: 14px;
    padding-left: 0;
  }

  .meaning-bank-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .shell {
    width: min(100% - 20px, 1060px);
    padding-top: 14px;
  }

  .topbar {
    align-items: center;
  }

  .intro,
  .players,
  .settings-grid,
  .actions {
    grid-template-columns: 1fr;
  }

  .panel {
    padding: 18px;
  }

  .incoming-challenge-status {
    align-items: stretch;
    flex-direction: column;
    padding: 12px;
  }

  .challenge-dialog {
    width: min(100% - 20px, 520px);
    padding: 20px;
  }

  .challenge-dialog-actions {
    grid-template-columns: 1fr;
  }

  .match-celebration {
    width: min(100%, 360px);
    height: 128px;
    transform: scale(0.78);
    transform-origin: center;
    margin-bottom: -6px;
  }

  .result .reaction.big {
    font-size: 78px;
  }

  .player {
    grid-template-columns: 48px minmax(0, 1fr) 46px;
  }

  .avatar,
  .set-score {
    width: 46px;
    height: 46px;
  }

  .review-card-body {
    padding-right: 22px;
    padding-left: 22px;
  }

  .review-game-card:has(.revealed-body) .review-card-header-inner,
  .review-result-top,
  .review-image-frame {
    width: min(72%, 430px);
  }
}

@media (max-width: 1100px) {
  .shell:has(.duel-stage) {
    width: min(100% - 20px, 760px);
  }

  .duel-stage {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .duel-side-player {
    align-self: stretch;
    min-height: 0;
    padding: 12px;
  }

  .duel-side-player.player-p1 {
    grid-column: 1;
    grid-row: 1;
  }

  .duel-side-player.player-p2 {
    grid-column: 2;
    grid-row: 1;
  }

  .duel-stage .review-arena {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .duel-player-avatar {
    width: 52px;
    height: 52px;
    flex-basis: 52px;
    font-size: 28px;
  }

  .duel-player-identity strong {
    font-size: 15px;
  }

  .duel-score-row {
    grid-template-columns: minmax(0, 1fr) 42px;
    gap: 8px;
    margin-top: 10px;
  }

  .duel-round-score .dots {
    margin-top: 5px;
  }

  .duel-set-score strong {
    width: 38px;
    height: 38px;
    font-size: 19px;
  }

  .duel-stage .review-game-card {
    height: min(680px, calc(100svh - 194px));
  }
}

@media (max-width: 480px) {
  .duel-side-player {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 38px;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 6px;
    row-gap: 4px;
    padding: 9px;
  }

  .duel-player-heading {
    grid-column: 1;
    grid-row: 1;
  }

  .duel-player-avatar {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    font-size: 23px;
  }

  .duel-player-heading {
    gap: 4px;
  }

  .duel-player-identity strong {
    font-size: 14px;
  }

  .duel-score-row {
    display: contents;
  }

  .duel-round-score {
    grid-column: 1;
    grid-row: 2;
  }

  .duel-round-score > span {
    display: none;
  }

  .duel-round-score .dots {
    margin-top: 0;
  }

  .duel-set-score {
    grid-column: 2;
    grid-row: 1 / 3;
  }

  .duel-set-score strong {
    width: 34px;
    height: 34px;
    font-size: 17px;
  }

  .duel-player-identity span,
  .duel-round-score > span,
  .duel-set-score span {
    font-size: 10px;
  }

  .duel-side-player .dot {
    width: 7px;
    height: 7px;
  }

  .duel-stage .review-game-card {
    height: min(680px, calc(100svh - 150px));
  }

  .duel-win-reaction {
    top: -12px;
    right: auto;
    left: 34px;
    width: 44px;
    height: 44px;
    font-size: 26px;
    box-shadow:
      0 0 0 4px rgba(135, 168, 138, 0.18),
      0 10px 18px rgba(79, 127, 105, 0.2);
  }

  .duel-cue-reaction,
  .duel-loss-reaction {
    top: 2px;
    right: auto;
    left: 32px;
    width: 28px;
    height: 28px;
    font-size: 20px;
  }

  .duel-cue-reaction svg {
    width: 17px;
    height: 17px;
  }

  .review-game-card:has(.revealed-body) .review-card-header-inner,
  .review-result-top,
  .review-image-frame {
    width: min(92%, 430px);
  }
}

@media (max-width: 760px) {
  .memorization-settings,
  .discover-card-content.has-study-image,
  .memory-scoreboard,
  .meaning-bank-list {
    grid-template-columns: 1fr;
  }

  .discover-word-card {
    min-height: 0;
  }

  .discover-card-header,
  .discover-card-copy {
    padding-right: 20px;
    padding-left: 20px;
  }

  .discover-card-header h2 {
    font-size: 30px;
  }

  .discover-definition {
    font-size: 19px;
  }

  .discover-study-image {
    min-height: 260px;
    max-height: 330px;
  }

  .memory-recall-stage {
    padding: 14px;
  }

  .memory-recall-header,
  .memory-stage-status {
    align-items: flex-start;
  }

  .memory-answer-row {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .meaning-drop-zone {
    grid-column: 2;
  }

  .memory-result-row {
    grid-template-columns: 30px minmax(0, 1fr) 48px;
  }

  .memory-result-row > span:nth-child(3) {
    grid-column: 2 / -1;
    grid-row: 2;
  }
}

@media (max-width: 480px) {
  .segmented-control,
  .memory-recall-actions {
    width: 100%;
  }

  .memory-recall-header {
    display: grid;
  }

  .memory-recall-actions {
    justify-content: space-between;
  }

  .memory-answer-row {
    padding: 6px;
  }

  .memory-score-card {
    grid-template-columns: 42px minmax(0, 1fr) auto;
  }
}

@media (max-width: 1050px) {
  .shell:has(.crossword-stage) {
    width: min(100% - 20px, 820px);
  }

  .crossword-workspace,
  .crossword-result-layout {
    grid-template-columns: 1fr;
  }

  .crossword-clue-panel {
    max-height: none;
  }
}

@media (max-width: 760px) {
  .crossword-settings,
  .crossword-workspace,
  .crossword-result-layout {
    grid-template-columns: 1fr;
  }

  .segmented-control {
    grid-template-columns: 1fr;
  }

  .segmented-control span {
    border-right: 0;
    border-bottom: 1px solid #cfc6bb;
  }

  .segmented-control label:last-child span {
    border-bottom: 0;
  }

  .crossword-statusbar {
    display: grid;
  }

  .crossword-status-items {
    justify-content: flex-start;
  }

  .crossword-board-panel,
  .crossword-clue-panel {
    padding: 10px;
  }

  .crossword-partner-progress {
    align-items: flex-start;
  }

  .crossword-answer-row {
    grid-template-columns: 76px minmax(0, 1fr) 22px;
  }

  .crossword-answer-row > p {
    grid-column: 2 / -1;
    grid-row: 2;
  }

  .crossword-answer-row > svg {
    grid-column: 3;
    grid-row: 1;
  }
}

@media (max-width: 480px) {
  .crossword-status-items span,
  .crossword-status-items strong {
    flex: 1;
    justify-content: center;
    padding: 0 7px;
  }

  .crossword-rule-row {
    display: grid;
    width: 100%;
  }

  .crossword-entry-controls {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .crossword-help-button {
    grid-column: 1 / -1;
    justify-content: center;
  }

  .crossword-partner-progress {
    display: grid;
  }

  .crossword-partner-entries {
    justify-content: flex-start;
  }
}