.rki-game,
.rki-game * {
  box-sizing: border-box;
}

.rki-game {
  --rki-ink: #183b47;
  --rki-muted: #60737a;
  --rki-accent: #147d86;
  --rki-accent-dark: color-mix(in srgb, var(--rki-accent) 76%, #000);
  --rki-button-text: #fff;
  --rki-gold: #e6a23c;
  --rki-paper: #fffdf7;
  --rki-surface: color-mix(in srgb, var(--rki-paper) 78%, #fff);
  --rki-surface-strong: color-mix(in srgb, var(--rki-paper) 55%, #fff);
  --rki-good: #2e8b57;
  --rki-bad: #c8463b;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  margin: 1rem 0;
  border: 1px solid color-mix(in srgb, var(--rki-accent) 24%, white);
  border-radius: 20px;
  background: var(--rki-paper);
  color: var(--rki-ink);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  box-shadow: 0 14px 40px rgba(24, 59, 71, 0.12);
}

.rki-header {
  padding: clamp(1rem, 3vw, 1.75rem) clamp(1rem, 4vw, 2rem) 0;
}

.rki-title {
  margin: 0;
  color: var(--rki-ink);
  font-size: clamp(1.35rem, 3vw, 2rem);
  line-height: 1.15;
}

.rki-meta,
.rki-instructions {
  margin: 0.45rem 0 0;
}

.rki-meta {
  color: var(--rki-ink);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.rki-instructions {
  max-width: 70ch;
  color: var(--rki-ink);
}

.rki-body {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(15rem, 0.75fr);
  gap: clamp(1rem, 3vw, 2rem);
  padding: clamp(1rem, 4vw, 2rem);
}

.rki-game--clues-bottom .rki-body {
  grid-template-columns: minmax(0, 1fr);
}

.rki-game--clues-bottom .rki-clues {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 2rem);
  width: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
}

.rki-game--clues-bottom .rki-clue-list,
.rki-game--clues-bottom .rki-word-list {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.rki-clue-group {
  min-width: 0;
}

.rki-board-area,
.rki-clues {
  min-width: 0;
}

.rki-grid-scroll {
  max-width: 100%;
  overflow: auto;
  overscroll-behavior-inline: contain;
  padding: 0.3rem;
}

.rki-crossword-grid,
.rki-wordsearch-grid {
  display: grid;
  margin: 0 auto;
  gap: 3px;
  touch-action: none;
  user-select: none;
}

.rki-crossword-grid {
  --rki-cw-cell-size: clamp(2.1rem, 6vw, 3rem);
  width: max-content;
  min-width: 0;
}

.rki-wordsearch-grid {
  --rki-ws-cell-size: clamp(2rem, 6vw, 2.9rem);
  width: max-content;
  min-width: 0;
}

.rki-cell {
  position: relative;
  display: grid;
  width: var(--rki-cw-cell-size);
  aspect-ratio: 1;
  place-items: center;
}

.rki-cell--blocked {
  background: transparent;
}

.rki-cell--open {
  overflow: hidden;
  border: 1px solid rgba(24, 59, 71, 0.35);
  border-radius: 6px;
  background: var(--rki-surface-strong);
  box-shadow: 0 2px 4px rgba(24, 59, 71, 0.08);
}

.rki-cell--active {
  border-color: var(--rki-gold);
  background: #fff7da;
  box-shadow: 0 0 0 2px rgba(230, 162, 60, 0.35);
}

.rki-cell--correct {
  border-color: var(--rki-good);
  background: #e9f8ef;
}

.rki-cell--wrong {
  border-color: var(--rki-bad);
  background: #fff0ee;
}

.rki-cell__number {
  position: absolute;
  z-index: 1;
  top: 1px;
  left: 3px;
  color: var(--rki-muted);
  font-size: clamp(0.5rem, 1.4vw, 0.68rem);
  font-weight: 800;
  line-height: 1;
}

.rki-cell__input {
  width: 100%;
  height: 100%;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0.25rem 0 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--rki-ink) !important;
  font: 750 clamp(1.05rem, 3vw, 1.45rem)/1 "Segoe UI", Arial, sans-serif !important;
  text-align: center;
}

.rki-game .rki-ws-cell {
  appearance: none !important;
  display: grid !important;
  width: var(--rki-ws-cell-size) !important;
  height: var(--rki-ws-cell-size) !important;
  aspect-ratio: 1 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  place-items: center !important;
  align-items: center !important;
  justify-items: center !important;
  border: 1px solid rgba(20, 125, 134, 0.3) !important;
  border-radius: 9px !important;
  background: var(--rki-surface-strong) !important;
  box-shadow: none !important;
  color: var(--rki-ink) !important;
  font: 750 clamp(0.95rem, 3vw, 1.3rem)/1 "Segoe UI", Arial, sans-serif !important;
  line-height: 1 !important;
  text-align: center !important;
  text-indent: 0 !important;
  text-transform: none !important;
  cursor: pointer !important;
  touch-action: none;
}

.rki-game .rki-ws-cell--selecting {
  border-color: var(--rki-gold) !important;
  background: #fff0bb !important;
  transform: scale(1.04) !important;
}

.rki-game .rki-ws-cell--found {
  border-color: var(--rki-good) !important;
  background: #ccefd8 !important;
  color: #155b34 !important;
}

.rki-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1rem;
}

.rki-game .rki-btn {
  min-height: 44px;
  padding: 0.7rem 1rem;
  border: 1px solid var(--rki-accent);
  border-radius: 10px;
  background: var(--rki-accent) !important;
  color: var(--rki-button-text) !important;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}

.rki-game .rki-btn:hover,
.rki-game .rki-btn:focus-visible {
  background: var(--rki-accent-dark) !important;
  color: var(--rki-button-text) !important;
}

.rki-game .rki-btn--secondary {
  background: var(--rki-surface-strong) !important;
  color: var(--rki-accent-dark) !important;
}

.rki-game .rki-btn--secondary:hover,
.rki-game .rki-btn--secondary:focus-visible {
  background: var(--rki-accent-dark) !important;
  color: var(--rki-button-text) !important;
}

.rki-status {
  min-height: 1.5em;
  margin: 0.65rem 0 0;
  color: var(--rki-ink);
  font-weight: 700;
}

.rki-clues {
  align-self: start;
  max-height: none;
  overflow: visible;
  padding: 0.85rem;
  border: 1px solid rgba(20, 125, 134, 0.16);
  border-radius: 14px;
  background: var(--rki-surface);
}

.rki-clues__heading {
  margin: 0.5rem 0 0.6rem;
  color: var(--rki-ink);
  font-size: 1rem;
}

.rki-clue-list,
.rki-word-list {
  display: grid;
  gap: 0.55rem;
}

.rki-game .rki-clue {
  appearance: none !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  gap: 0.55rem !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 44px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0.72rem 0.25rem !important;
  border: 0 !important;
  border-bottom: 1px solid color-mix(in srgb, var(--rki-accent) 18%, transparent) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--rki-ink) !important;
  font: inherit !important;
  line-height: 1.45 !important;
  letter-spacing: normal !important;
  text-align: left !important;
  text-decoration: none !important;
  text-indent: 0 !important;
  text-transform: none !important;
  white-space: normal !important;
  cursor: pointer !important;
}

.rki-game .rki-clue:hover,
.rki-game .rki-clue:focus-visible,
.rki-game .rki-clue--active {
  border-bottom-color: var(--rki-gold) !important;
  background: var(--rki-surface-strong) !important;
  color: var(--rki-ink) !important;
}

.rki-game .rki-clue__number,
.rki-game .rki-clue__content,
.rki-game .rki-clue__text {
  color: var(--rki-ink) !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-style: normal !important;
  line-height: 1.45 !important;
  letter-spacing: normal !important;
  text-align: left !important;
  text-decoration: none !important;
  text-transform: none !important;
  white-space: normal !important;
}

.rki-game .rki-clue__number {
  font-weight: 800 !important;
}

.rki-clue__content,
.rki-word {
  display: grid;
  gap: 0.45rem;
}

.rki-clue__image,
.rki-word .rki-clue__image {
  width: min(100%, 12rem);
  max-height: 9rem;
  border-radius: 9px;
  object-fit: contain;
}

.rki-clue__audio {
  width: min(100%, 16rem);
  height: 34px;
}

.rki-word {
  padding: 0.65rem;
  border-radius: 9px;
  background: var(--rki-surface-strong);
}

.rki-word--found {
  background: #e4f7eb;
  color: #276a43;
  text-decoration: line-through;
}

.rki-empty {
  margin: 1rem 2rem 2rem;
  padding: 1rem;
  border-radius: 10px;
  background: #fff6d9;
}

@media (max-width: 760px) {
  .rki-game {
    border-radius: 14px;
  }

  .rki-body,
  .rki-game--clues-right .rki-body {
    grid-template-columns: 1fr;
  }

  .rki-clues {
    max-height: none;
  }

  .rki-game--clues-bottom .rki-clue-list,
  .rki-game--clues-bottom .rki-word-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .rki-game--clues-bottom .rki-clues {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .rki-game * {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}