@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700;9..144,900&family=Work+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --sea: #0B6E7C;
  --sea-deep: #084C57;
  --sun: #F4B942;
  --coral: #FF6B4A;
  --ink: #14213D;
  --cream: #FFFBF2;
  --leaf: #3C9A5F;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Work Sans', sans-serif;
  color: var(--ink);
  background: var(--cream);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

.kw-display { font-family: 'Fraunces', serif; }

.madras {
  height: 10px;
  width: 100%;
  background-image: url("../img/madras-banner.b86afc835f94.png");
  background-repeat: repeat-x;
  background-size: auto 10px;
}

.kw-container {
  max-width: 880px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}
/* On phones, leave room for the fixed sound toggle (44px at top:16px) so it
   never sits on top of the first row of content (topbar buttons, links). */
@media (max-width: 480px) {
  .kw-container { padding-top: 72px; }
}

/* Site header (game/_site_nav.html) on every non-game page. Right padding
   keeps the brand/links clear of the fixed sound toggle. */
.kw-sitenav {
  max-width: 880px;
  margin: 0 auto;
  padding: 14px 76px 0 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  min-height: 60px;
}
.kw-sitenav-brand { font-weight: 900; font-size: 18px; color: var(--ink); text-decoration: none; white-space: nowrap; }
.kw-sitenav-brand em { font-style: normal; color: var(--coral); }
.kw-sitenav-links { display: flex; flex-wrap: wrap; gap: 4px; }
.kw-sitenav-links a {
  font-weight: 700;
  font-size: 14px;
  color: var(--sea);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 999px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 40px;
}
.kw-sitenav-links a:hover { background: rgba(11,110,124,0.08); }
.kw-sitenav-links a[aria-current="page"] { background: var(--sea); color: white; }
.kw-sitenav a:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
.kw-sitenav + .kw-container { padding-top: 24px; }
@media (max-width: 480px) {
  .kw-sitenav { padding: 16px 16px 0; }
  .kw-sitenav-brand { padding-right: 60px; line-height: 44px; }
  /* One swipeable row of links under the brand rather than wrapping to two. */
  .kw-sitenav-links { flex-wrap: nowrap; overflow-x: auto; width: calc(100% + 16px); margin-right: -16px; padding-bottom: 4px; scrollbar-width: none; }
  .kw-sitenav-links::-webkit-scrollbar { display: none; }
  .kw-sitenav-links a { font-size: 13px; padding: 8px 11px; background: white; border: 1px solid rgba(20,33,61,0.1); }
  .kw-sitenav + .kw-container { padding-top: 20px; }
}

.kw-header { text-align: center; margin-bottom: 36px; }

.kw-eyebrow {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sea);
  font-weight: 700;
  margin-bottom: 8px;
}

.kw-title {
  font-size: clamp(32px, 6vw, 52px);
  font-weight: 900;
  line-height: 1.05;
  color: var(--ink);
  margin: 0 0 6px;
}
.kw-title em { font-style: normal; color: var(--coral); }

.kw-subtitle { font-size: 16px; color: #5c5c5c; max-width: 480px; margin: 0 auto; }

.kw-card {
  background: white;
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 2px 0 rgba(20,33,61,0.06), 0 12px 30px rgba(20,33,61,0.07);
  border: 1px solid rgba(20,33,61,0.06);
  margin-bottom: 20px;
}

.kw-btn {
  font-family: 'Work Sans', sans-serif;
  font-weight: 700;
  font-size: 15px;
  padding: 13px 26px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.kw-btn:hover { transform: translateY(-2px); }
.kw-btn:active { transform: translateY(0); }
.kw-btn:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }

.kw-btn-primary { background: var(--coral); color: white; box-shadow: 0 4px 0 #C94B30; }
.kw-btn-primary:hover { box-shadow: 0 6px 0 #C94B30; }
.kw-btn-primary:active { box-shadow: 0 2px 0 #C94B30; }

.kw-btn-sea { background: var(--sea); color: white; box-shadow: 0 4px 0 var(--sea-deep); }
.kw-btn-sea:hover { box-shadow: 0 6px 0 var(--sea-deep); }
.kw-btn-sea:active { box-shadow: 0 2px 0 var(--sea-deep); }

.kw-btn-ghost { background: transparent; color: var(--ink); border: 2px solid rgba(20,33,61,0.15); box-shadow: none; }
.kw-btn-ghost:hover { border-color: var(--ink); }

.kw-input {
  font-family: 'Work Sans', sans-serif;
  font-size: 16px;
  padding: 13px 18px;
  border-radius: 12px;
  border: 2px solid rgba(20,33,61,0.15);
  width: 100%;
  background: var(--cream);
}
.kw-input:focus { outline: none; border-color: var(--sea); }
.kw-input:focus-visible { outline: 3px solid var(--sun); outline-offset: 1px; }

.kw-login-wrap { display: flex; flex-direction: column; align-items: center; padding-top: 8px; }
.kw-login-card { max-width: 420px; width: 100%; text-align: center; }
.kw-login-card .kw-input { margin: 20px 0; }
.kw-login-card .error { color: var(--coral); font-weight: 600; margin-bottom: 12px; }
.kw-login-hint { font-size: 13px; color: var(--muted, #6b7785); margin: 0 0 4px; }

.kw-login-tabs { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 20px 0 16px; }
.kw-tab {
  font-family: 'Work Sans', sans-serif;
  font-weight: 700;
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 2px solid rgba(20,33,61,0.15);
  background: white;
  cursor: pointer;
  color: var(--ink);
}
.kw-tab[data-active="true"] { border-color: var(--sea); background: var(--sea); color: white; }

.kw-avatar-pick { display: flex; gap: 16px; justify-content: center; margin: 4px 0 20px; }
.kw-avatar-opt {
  border: 3px solid transparent;
  border-radius: 999px;
  padding: 3px;
  background: none;
  cursor: pointer;
  line-height: 0;
}
.kw-avatar-opt img { width: 64px; height: 64px; border-radius: 999px; display: block; }
.kw-avatar-opt[data-selected="true"] { border-color: var(--sun); }
.kw-avatar-opt:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }

.kw-avatar-mini { width: 28px; height: 28px; border-radius: 999px; flex-shrink: 0; }

.kw-color-pick { display: flex; gap: 14px; justify-content: center; margin: 4px 0; }
.kw-color-opt { width: 38px; height: 38px; border-radius: 999px; border: 3px solid transparent; padding: 0; cursor: pointer; }
.kw-color-opt[data-active="true"] { border-color: var(--ink); box-shadow: 0 0 0 3px var(--sun); }
.kw-color-opt:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }

.kw-diffs { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 20px 0 8px; }
.kw-diff-pill {
  font-family: 'Work Sans', sans-serif;
  font-weight: 700;
  font-size: 14px;
  padding: 10px 20px;
  border-radius: 999px;
  border: 2px solid rgba(20,33,61,0.15);
  background: white;
  cursor: pointer;
  color: var(--ink);
}
.kw-diff-pill[data-active="true"] { border-color: var(--sea); background: var(--sea); color: white; }
.kw-diff-pill:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
.kw-diff-pill[data-locked="true"] { cursor: not-allowed; opacity: 0.55; background: var(--surface-2, #faf5e8); }
.kw-diff-pill[data-locked="true"][data-active="true"] { border-color: rgba(20,33,61,0.15); background: var(--surface-2, #faf5e8); color: var(--ink); }
.kw-diff-pill-lock { display: block; font-size: 11px; font-weight: 600; opacity: 0.75; margin-top: 2px; }

.kw-progress-track { background: rgba(20,33,61,0.08); border-radius: 999px; height: 8px; overflow: hidden; }
.kw-progress-fill { height: 100%; background: var(--sea); border-radius: 999px; transition: width 0.3s ease; }
.kw-progress-fill[data-graduated="true"] { background: var(--leaf); }

.kw-leaderboard { margin: 28px auto 0; max-width: 520px; }
.kw-lb-title { text-align: center; font-family: 'Fraunces', serif; font-weight: 700; font-size: 20px; margin-bottom: 4px; }
.kw-lb-sub { text-align: center; font-size: 12px; color: #888; margin-bottom: 16px; }
.kw-lb-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; margin-bottom: 6px; background: var(--cream); }
.kw-lb-row.gold { background: linear-gradient(90deg, #FFF3D6, var(--cream)); border: 1px solid #F4B94266; }
.kw-lb-rank { font-family: 'Fraunces', serif; font-weight: 700; font-size: 16px; color: var(--sea); width: 24px; }
.kw-lb-name { font-weight: 600; flex: 1; }
.kw-lb-meta { font-size: 11px; color: #999; text-transform: uppercase; letter-spacing: 0.04em; }
.kw-lb-score { font-family: 'Fraunces', serif; font-weight: 700; color: var(--coral); }
.kw-lb-empty { text-align: center; color: #999; font-size: 14px; padding: 20px; }

.kw-games { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-top: 28px; }
.kw-game-card {
  background: white;
  border-radius: 16px;
  padding: 22px;
  border: 2px solid rgba(20,33,61,0.08);
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  color: var(--ink);
  display: block;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.kw-game-card:hover { transform: translateY(-3px); border-color: var(--sea); }
.kw-game-card:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
.kw-game-emoji { font-size: 32px; margin-bottom: 10px; display: block; }
.kw-game-name { font-family: 'Fraunces', serif; font-weight: 700; font-size: 19px; margin-bottom: 4px; }
.kw-game-desc { font-size: 13px; color: #777; line-height: 1.4; }

/* How to Play (learn.GameGuide) -- the in-game modal plus the standalone
   /learn/how-to-play/ pages. Reuses the card/display type scale rather than
   introducing a new visual language. */
.kw-guide-label {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sea);
  margin-bottom: 6px;
}
.kw-guide-field { margin-top: 18px; }
.kw-guide-field p, .kw-guide-field ul, .kw-guide-field ol { margin: 0; color: var(--ink); line-height: 1.55; }
.kw-guide-field ul { padding-left: 20px; }
.kw-guide-field li { margin-bottom: 4px; }
.kw-guide-goal { font-size: 17px; font-weight: 600; line-height: 1.45; margin: 0 0 14px; }
.kw-guide-steps { margin: 0 0 16px; padding-left: 22px; line-height: 1.5; }
.kw-guide-steps li { margin-bottom: 8px; padding-left: 4px; }
.kw-guide-steps li::marker { color: var(--coral); font-weight: 800; }
.kw-guide-scoring { margin: 0; line-height: 1.5; }
.kw-guide-levels { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.kw-guide-level { background: var(--cream); border-radius: 12px; padding: 14px 16px; border: 1px solid rgba(20,33,61,0.08); }
.kw-guide-level h3 { font-family: 'Fraunces', serif; font-size: 16px; margin: 0 0 6px; }
.kw-guide-level p { margin: 0; font-size: 14px; line-height: 1.5; }
.kw-guide-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; margin-top: 24px; }
.kw-guide-btn { justify-content: flex-end; white-space: nowrap; min-height: 44px; min-width: 44px; }
@media (max-width: 480px) {
  .kw-guide-btn-text { display: none; }
  .kw-back.kw-guide-btn {
    justify-content: center;
    width: 44px;
    height: 44px;
    font-size: 18px;
    border-radius: 999px;
    border: 2px solid rgba(20,33,61,0.12);
    background: white;
  }
}

/* Modal: fixed overlay; the dialog itself scrolls so the close button in its
   header and the "Got it" button in its footer stay reachable on small phones. */
body.kw-modal-open { overflow: hidden; }
.kw-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px; }
.kw-modal[hidden] { display: none; }
.kw-modal-backdrop { position: absolute; inset: 0; background: rgba(20,33,61,0.55); }
.kw-modal-dialog {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  background: white;
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(20,33,61,0.3);
  overflow: hidden;
}
.kw-modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 20px 20px 12px; border-bottom: 1px solid rgba(20,33,61,0.08); }
.kw-modal-head .kw-eyebrow { margin-bottom: 2px; }
.kw-modal-title { font-size: 24px; font-weight: 900; line-height: 1.15; margin: 0; }
.kw-modal-gloss { font-size: 13px; color: #777; margin-top: 2px; }
.kw-modal-close {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 2px solid rgba(20,33,61,0.12);
  background: white;
  font-size: 18px;
  cursor: pointer;
  color: var(--ink);
}
.kw-modal-close:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
.kw-modal-body { padding: 16px 20px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.kw-modal-clock-note { font-size: 13px; color: #777; margin: 12px 0 0; }
.kw-modal-foot { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; padding: 12px 20px 16px; border-top: 1px solid rgba(20,33,61,0.08); }
@media (max-width: 480px) {
  .kw-modal { padding: 10px; align-items: flex-end; }
  .kw-modal-dialog { max-height: calc(100dvh - 20px); }
  .kw-modal-foot { flex-direction: column-reverse; align-items: stretch; text-align: center; }
  .kw-modal-foot .kw-btn { justify-content: center; }
  .kw-modal-foot .kw-back { justify-content: center; }
}

.kw-hud { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 10px; }
.kw-hud-stat { text-align: center; }
.kw-hud-val { font-family: 'Fraunces', serif; font-weight: 700; font-size: 22px; color: var(--sea); }
.kw-hud-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: #999; }

/* Kwéyòl Directions -- the map is a plain grid, deliberately not an
   illustrated background: the grid *is* the game logic (players/
   navigation_engine.py), so keeping the visual and logical map the same
   thing means they can never drift out of sync. */
.kw-nav-map-wrap { display: flex; justify-content: center; margin: 8px 0 4px; }
.kw-nav-map {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  width: min(360px, 90vw);
  aspect-ratio: 1 / 1;
  gap: 4px;
  background-color: #DCE7DA;
  border: 3px solid rgba(20,33,61,0.15);
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 8px 24px rgba(20,33,61,0.1);
}
.kw-nav-cell {
  background: white;
  border-radius: 8px;
  border: 1px solid rgba(20,33,61,0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.kw-nav-cell-empty { background: #EEF3EC; }
.kw-nav-landmark-emoji { font-size: 26px; line-height: 1; }
.kw-nav-landmark-label { font-size: 10px; font-weight: 700; color: var(--ink); text-align: center; padding: 0 2px; }
.kw-nav-cell-start { box-shadow: inset 0 0 0 2px var(--sea); }
.kw-nav-cell-destination { box-shadow: inset 0 0 0 2px var(--coral); }
.kw-nav-player {
  position: absolute;
  width: 33.333%;
  height: 33.333%;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.3));
  transition: left 0.45s ease, top 0.45s ease, transform 0.3s ease;
  pointer-events: none;
}
.kw-nav-word-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: white;
  border: 2px solid rgba(20,33,61,0.1);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin: 3px;
  cursor: pointer;
}
.kw-nav-word-chip:hover { border-color: var(--sea); color: var(--sea); }
.kw-nav-vocab-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 4px;
  border-bottom: 1px solid rgba(20,33,61,0.08);
  cursor: pointer;
}
.kw-nav-vocab-row:last-child { border-bottom: none; }
.kw-nav-vocab-row:hover { background: var(--surface-2, #faf5e8); }
.kw-nav-vocab-kweyol { font-weight: 800; color: var(--ink); }
.kw-nav-vocab-english { color: var(--muted, #6b7785); font-size: 14px; }
.kw-nav-vocab-badge {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--sea);
  background: rgba(11,110,124,0.1);
  border-radius: 999px;
  padding: 4px 10px;
}

.kw-match-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.kw-match-col { display: flex; flex-direction: column; gap: 10px; }
.kw-match-tile {
  padding: 16px;
  border-radius: 12px;
  border: 2px solid rgba(20,33,61,0.12);
  background: white;
  cursor: pointer;
  text-align: center;
  font-weight: 600;
  font-size: 16px;
  transition: all 0.15s ease;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kw-match-tile[data-selected="true"] { border-color: var(--sun); background: #FFF6DE; }
.kw-match-tile[data-matched="true"] { border-color: var(--leaf); background: #E9F7EE; opacity: 0.55; cursor: default; }
.kw-match-tile[data-wrong="true"] { border-color: var(--coral); background: #FFE9E4; }
.kw-match-tile:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
.kw-match-emoji { font-size: 28px; }
.kw-match-tile-image { padding: 8px; }
.kw-match-image {
  display: block;
  width: 100%;
  height: 64px;
  object-fit: contain;
  pointer-events: none;
}

.kw-quiz-q { text-align: center; margin-bottom: 24px; }
.kw-quiz-prompt-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--sea); font-weight: 700; margin-bottom: 8px; }
.kw-quiz-prompt { font-family: 'Fraunces', serif; font-size: 30px; font-weight: 700; }
.kw-quiz-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kw-quiz-opt {
  padding: 16px;
  border-radius: 12px;
  border: 2px solid rgba(20,33,61,0.12);
  background: white;
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
  text-align: center;
}
.kw-quiz-opt:hover { border-color: var(--sea); }
.kw-quiz-opt[data-correct="true"] { border-color: var(--leaf); background: #E9F7EE; }
.kw-quiz-opt[data-incorrect="true"] { border-color: var(--coral); background: #FFE9E4; }
.kw-quiz-opt:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
.kw-quiz-opt:disabled { cursor: default; }
.kw-quiz-opt-kweyol { display: block; font-size: 17px; font-weight: 700; }
.kw-quiz-opt-english { display: block; font-size: 12px; font-weight: 500; color: var(--muted, #6b7785); margin-top: 2px; text-transform: none; }

.kw-color-swatch {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 2px solid rgba(20,33,61,0.15);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4);
  margin: 0 auto;
}
.kw-quiz-q .kw-color-swatch { width: 120px; height: 120px; border-radius: 18px; border-width: 3px; }
.kw-quiz-opt-swatch-btn { padding: 10px; }
.kw-quiz-opt-swatch-btn .kw-color-swatch { width: 100%; height: 52px; border-radius: 10px; }

.kw-color-image-wrap { display: flex; justify-content: center; margin-bottom: 20px; }
.kw-color-image { width: 180px; height: 180px; object-fit: contain; }
.kw-color-opt[data-selected="true"] { border-color: var(--sea); background: #E6F3F4; }
.kw-color-opt[data-selected="true"][data-correct="true"] { border-color: var(--leaf); background: #E9F7EE; }

.kw-count-grid { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 420px; margin: 0 auto 20px; }
.kw-count-icon { width: 44px; height: 44px; object-fit: contain; }
.kw-color-note {
  margin-top: 18px;
  padding: 12px 16px;
  border-radius: 12px;
  background: #FFF6DE;
  border: 1px solid rgba(20,33,61,0.1);
  font-size: 14px;
  text-align: center;
  color: var(--ink);
}

/* Madras plaid, built from layered CSS gradients (not the reference photo) so it
   scales crisply at any size and stays tunable for contrast against the tiles.
   Used only as a frame around the board -- the playing surface itself stays
   plain cream so the tiles remain very readable, per the design brief. */
.kw-domino-madras {
  background-color: #C81E2C;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 38px, rgba(255,255,255,0.55) 38px 40px, transparent 40px 78px, rgba(255,255,255,0.55) 78px 80px, transparent 80px 140px),
    repeating-linear-gradient(90deg, transparent 0 20px, rgba(232,163,61,0.65) 20px 26px, transparent 26px 140px),
    repeating-linear-gradient(90deg, transparent 0 60px, rgba(42,169,160,0.55) 60px 64px, transparent 64px 140px),
    repeating-linear-gradient(90deg, transparent 0 100px, rgba(139,150,165,0.6) 100px 112px, transparent 112px 140px),
    repeating-linear-gradient(0deg, transparent 0 38px, rgba(255,255,255,0.5) 38px 40px, transparent 40px 78px, rgba(255,255,255,0.5) 78px 80px, transparent 80px 140px),
    repeating-linear-gradient(0deg, transparent 0 20px, rgba(232,163,61,0.45) 20px 26px, transparent 26px 140px),
    repeating-linear-gradient(0deg, transparent 0 60px, rgba(42,169,160,0.35) 60px 64px, transparent 64px 140px),
    repeating-linear-gradient(0deg, transparent 0 100px, rgba(139,150,165,0.4) 100px 112px, transparent 112px 140px);
  background-size: 140px 140px;
}

.kw-domino-table {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin: 14px auto;
}
/* Fixed footprint on purpose -- a real table doesn't grow as more bones land
   on it. The board itself scrolls internally (see .kw-domino-board's
   overflow: auto) once a long chain outgrows the visible square, so nothing
   above or beside it ever has to reflow. */
.kw-domino-board-wrap {
  padding: 16px;
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  width: 560px;
  max-width: 100%;
  flex-shrink: 0;
}
/* A plain badge, deliberately NOT dressed as part of the wooden table --
   only active (holding a real face-down tile) in a 3-player game, where the
   double-0 is set aside rather than dealt; every other player count shows
   the same empty slot. */
.kw-domino-boneyard-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  width: fit-content;
  margin: 0 auto 14px;
  background: white;
  border: 2px solid rgba(20,33,61,0.1);
  border-radius: 999px;
  padding: 6px 16px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.kw-domino-boneyard-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted, #6b7785);
}
.kw-domino-boneyard-tiles {
  display: flex;
  gap: 4px;
}
.kw-domino-yard-tile {
  width: 16px;
  height: 28px;
  border-radius: 3px;
  background-image: url("/static/game/img/domino-back.4c78eff71e15.svg");
  background-size: cover;
  background-position: center;
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.kw-domino-yard-empty {
  width: 16px;
  height: 28px;
  border-radius: 3px;
  border: 1.5px dashed rgba(20,33,61,0.25);
}
.kw-domino-board {
  background-color: #7A4A26;
  background-image:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.08) 0 2px, transparent 2px 34px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 17px),
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.12));
  border-radius: 14px;
  padding: 22px;
  aspect-ratio: 1 / 1;
  max-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  box-shadow: inset 0 2px 10px rgba(0,0,0,0.35);
}
.kw-domino-empty { color: rgba(255,255,255,0.75); font-style: italic; padding: 20px; text-align: center; }
/* Tiles inside are positioned with explicit x/y (see domino.js's
   layoutSnakeChain), so this just needs to be a positioning context sized to
   whatever the current chain's bounding box is -- flex centering on the parent
   keeps a short chain in the middle of the board instead of pinned to a corner. */
.kw-domino-board-inner { position: relative; flex-shrink: 0; }

.kw-domino-tile {
  display: flex;
  align-items: stretch;
  background: linear-gradient(180deg, #FFFDF7, #F3EAD6);
  border: 1px solid rgba(20,33,61,0.25);
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.7);
  overflow: hidden;
}
.kw-domino-half { padding: 8px 11px; min-width: 42px; text-align: center; cursor: pointer; }
.kw-domino-divider { width: 2px; background: rgba(20,33,61,0.3); margin: 6px 0; }
.kw-domino-kweyol { display: block; font-weight: 800; font-size: 14px; color: var(--ink); }
.kw-domino-english { display: block; font-size: 9px; font-weight: 600; color: var(--muted, #6b7785); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.02em; }
.kw-domino-double { box-shadow: 0 0 0 2px var(--sun), 0 2px 4px rgba(0,0,0,0.15); }

/* Each board tile is placed with an explicit x/y/width/height computed by
   layoutSnakeChain in domino.js, so it must be taken out of flow entirely --
   position: absolute lets those inline left/top/width/height styles govern
   placement instead of flex/margin, which is what makes only genuinely
   chain-adjacent tiles touch. */
.kw-domino-board-tile { position: absolute; border-radius: 3px; }
.kw-domino-board-tile.kw-domino-tile-vertical { flex-direction: column; }
.kw-domino-board-tile.kw-domino-tile-vertical .kw-domino-divider { width: auto; height: 2px; margin: 0 auto; }
/* Board tiles are fixed-size (see layoutSnakeChain in domino.js) and much
   smaller than a free-flowing hand tile, so their halves get a compact,
   number-first treatment -- the English gloss is dropped from the board face
   entirely since it's still one tap away via the existing definition
   popover, the same on-demand pattern hand tiles already rely on. */
.kw-domino-board-tile .kw-domino-half {
  min-width: 0;
  padding: 0;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kw-domino-board-tile .kw-domino-kweyol { font-size: 10px; line-height: 1.1; }
.kw-domino-board-tile .kw-domino-english { display: none; }

.kw-domino-hand { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; }
.kw-domino-hand-tile { cursor: pointer; transition: transform 0.12s ease; }
.kw-domino-hand-tile:not(.kw-domino-tile-disabled):hover { transform: translateY(-4px); }
.kw-domino-tile-disabled { opacity: 0.4; cursor: default; }
.kw-domino-tile-selected { box-shadow: 0 0 0 3px var(--sea), 0 2px 4px rgba(0,0,0,0.15); }

.kw-domino-players { display: flex; gap: 12px; justify-content: center; margin: 10px 0; flex-wrap: wrap; }
.kw-domino-player { background: white; border-radius: 14px; padding: 10px 14px; border: 2px solid rgba(20,33,61,0.1); text-align: center; min-width: 92px; }
.kw-domino-player-active { border-color: var(--sun); background: #FFF6DE; box-shadow: 0 0 0 3px rgba(244,185,66,0.25); }
.kw-domino-avatar { width: 36px; height: 36px; border-radius: 999px; margin: 0 auto 4px; display: flex; align-items: center; justify-content: center; font-size: 18px; background: var(--surface-2, #faf5e8); border: 2px solid rgba(20,33,61,0.15); overflow: hidden; }
.kw-domino-avatar img { width: 100%; height: 100%; object-fit: cover; }
.kw-domino-player-label { font-weight: 700; font-size: 12px; margin-bottom: 4px; }
/* Only one seat ever holds a nonzero score at a time -- winning a round
   zeroes every other seat's total, per the match-to-6 streak rule -- so this
   badge doubles as "who's currently ahead" at a glance. */
.kw-domino-player-score { font-size: 11px; font-weight: 800; color: var(--muted, #6b7785); margin-bottom: 4px; }
.kw-domino-player-score.kw-domino-score-leading { color: #B4790A; }
.kw-domino-bones { display: flex; gap: 2px; justify-content: center; flex-wrap: wrap; max-width: 84px; margin: 0 auto; }
.kw-domino-bone {
  width: 10px;
  height: 18px;
  border-radius: 2px;
  background-image: url("/static/game/img/domino-back.4c78eff71e15.svg");
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(0,0,0,0.4);
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.kw-domino-celebration {
  position: fixed;
  inset: 0;
  background: rgba(20,33,61,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  animation: kwDominoFadeIn 0.25s ease;
}
.kw-domino-celebration-card {
  background: white;
  border-radius: 24px;
  padding: 40px 48px;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0,0,0,0.35);
  animation: kwDominoPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.kw-domino-celebration-name { font-family: 'Fraunces', serif; font-size: 40px; font-weight: 800; color: var(--ink); margin-bottom: 6px; }
.kw-domino-celebration-sub { font-size: 16px; font-weight: 600; color: var(--muted, #6b7785); }
.kw-domino-confetti-piece {
  position: fixed;
  top: -20px;
  width: 10px;
  height: 16px;
  z-index: 199;
  animation: kwDominoConfettiFall linear forwards;
  border-radius: 2px;
}
@keyframes kwDominoFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes kwDominoPop { from { transform: scale(0.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes kwDominoConfettiFall {
  to { transform: translateY(105vh) rotate(540deg); opacity: 0.9; }
}
@media (prefers-reduced-motion: reduce) {
  .kw-domino-confetti-piece { display: none; }
  .kw-domino-celebration, .kw-domino-celebration-card { animation: none; }
}

.kw-xw-wrap { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; align-items: flex-start; }
.kw-xw-board { overflow-x: auto; padding: 4px; }
.kw-xw-grid { display: grid; gap: 1px; background: rgba(20,33,61,0.15); border: 1px solid rgba(20,33,61,0.15); width: max-content; }
.kw-xw-cell {
  position: relative;
  width: 32px;
  height: 32px;
  background: white;
}
.kw-xw-cell.kw-xw-blocked { background: transparent; }
.kw-xw-number {
  position: absolute;
  top: 1px;
  left: 2px;
  font-size: 8px;
  font-weight: 700;
  color: var(--sea);
  pointer-events: none;
  line-height: 1;
}
.kw-xw-input {
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  text-align: center;
  text-transform: lowercase;
  font-weight: 700;
  font-size: 16px;
  font-family: 'Work Sans', sans-serif;
  color: var(--ink);
  padding: 0;
}
.kw-xw-input:focus { outline: 2px solid var(--sun); outline-offset: -2px; }
.kw-xw-cell.kw-xw-highlight .kw-xw-input { background: #FFF6DE; }
.kw-xw-cell.kw-xw-selected .kw-xw-input { background: #FFE9B8; }
.kw-xw-cell.kw-xw-correct .kw-xw-input { background: #E9F7EE; color: var(--leaf); }
.kw-xw-cell.kw-xw-incorrect .kw-xw-input { background: #FFE9E4; color: var(--coral); }
.kw-xw-clues { display: flex; gap: 24px; flex-wrap: wrap; max-width: 420px; }
.kw-xw-clue-col h3 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--sea); margin: 0 0 8px; }
.kw-xw-clue-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.kw-xw-clue-item { cursor: pointer; font-size: 14px; padding: 4px 6px; border-radius: 6px; }
.kw-xw-clue-item:hover { background: #FFF6DE; }
.kw-xw-clue-item.kw-xw-active { background: #FFE9B8; font-weight: 700; }
.kw-xw-clue-item.kw-xw-done { text-decoration: line-through; opacity: 0.55; }
.kw-xw-clue-num { font-weight: 700; margin-right: 4px; }

.kw-fib-english { text-align: center; color: #777; font-style: italic; margin-bottom: 6px; font-size: 15px; }
.kw-fib-sentence { text-align: center; font-family: 'Fraunces', serif; font-size: 24px; font-weight: 600; margin-bottom: 22px; line-height: 1.5; }
.kw-fib-blank { border-bottom: 3px solid var(--coral); padding: 0 6px; color: var(--coral); }
.kw-fib-form { display: flex; gap: 10px; max-width: 360px; margin: 0 auto; }
.kw-fib-feedback { text-align: center; margin-top: 16px; font-weight: 600; min-height: 1.4em; }
.kw-fib-feedback.correct { color: var(--leaf); }
.kw-fib-feedback.incorrect { color: var(--coral); }

.kw-end { text-align: center; }
.kw-end-score { font-family: 'Fraunces', serif; font-size: 56px; font-weight: 900; color: var(--coral); margin: 10px 0; }
.kw-end-actions { display: flex; gap: 12px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }

.kw-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.kw-back { background: none; border: none; color: var(--sea); font-weight: 700; cursor: pointer; font-size: 14px; display: flex; align-items: center; gap: 4px; text-decoration: none; }
.kw-back:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
.kw-username { font-size: 13px; color: #999; }

.kw-sound-toggle {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 50;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 2px solid rgba(20,33,61,0.12);
  background: white;
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(20,33,61,0.1);
}
.kw-sound-toggle:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }

.ad-slot { margin: 24px 0; min-height: 90px; display: flex; align-items: center; justify-content: center; }
.ad-slot--placeholder {
  border: 1px dashed #c9bd97;
  border-radius: 10px;
  color: #a3987a;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

footer { text-align: center; padding: 20px; font-size: 0.8rem; color: #8a8267; }
.kw-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin-bottom: 10px; }
.kw-footer-links a { color: var(--sea); font-weight: 700; font-size: 14px; text-decoration: none; padding: 8px 4px; }
.kw-footer-links a:hover { text-decoration: underline; }

/* Wordle */
.kw-wordle-grid { display: flex; flex-direction: column; gap: 8px; align-items: center; margin: 20px 0; }
.kw-wordle-row { display: flex; gap: 8px; }
.kw-wordle-tile {
  width: 52px; height: 52px;
  border: 2px solid rgba(20,33,61,0.18);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 24px;
  text-transform: uppercase;
  background: white;
}
.kw-wordle-tile[data-state="correct"] { background: var(--leaf); border-color: var(--leaf); color: white; }
.kw-wordle-tile[data-state="present"] { background: var(--sun); border-color: var(--sun); color: white; }
.kw-wordle-tile[data-state="absent"] { background: #cfcac0; border-color: #cfcac0; color: white; }
.kw-wordle-keyboard { display: flex; flex-direction: column; gap: 8px; align-items: center; margin-top: 24px; }
.kw-wordle-krow { display: flex; gap: 6px; }
.kw-key {
  min-width: 34px; height: 44px; padding: 0 8px;
  border-radius: 6px; border: none;
  background: #e7e0cf; color: var(--ink);
  font-weight: 700; font-size: 13px;
  cursor: pointer;
  text-transform: uppercase;
}
.kw-key[data-state="correct"] { background: var(--leaf); color: white; }
.kw-key[data-state="present"] { background: var(--sun); color: white; }
.kw-key[data-state="absent"] { background: #a89f8d; color: white; }
.kw-key-wide { min-width: 56px; font-size: 11px; }

/* Typing test */
.kw-typing-prompt {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  line-height: 1.6;
  margin: 20px 0;
}
.kw-typing-prompt span.correct { color: var(--leaf); }
.kw-typing-prompt span.incorrect { color: var(--coral); text-decoration: underline; }
.kw-typing-prompt span.pending { color: #999; }
.kw-typing-input {
  width: 100%;
  min-height: 80px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 2px solid rgba(20,33,61,0.15);
  background: var(--cream);
  font-family: 'Work Sans', sans-serif;
  font-size: 18px;
  resize: none;
}
.kw-typing-input:focus { outline: none; border-color: var(--sea); }

/* Jumble */
.kw-jumble-letters { display: flex; gap: 10px; justify-content: center; margin: 24px 0; flex-wrap: wrap; }
.kw-jumble-tile {
  width: 48px; height: 48px;
  border-radius: 8px;
  background: var(--sea);
  color: white;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 22px;
  text-transform: uppercase;
}

/* Scrabble */
.kw-scrabble-wrap { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.kw-scrabble-board {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  gap: 2px;
  background: var(--sea-deep);
  padding: 4px;
  border-radius: 8px;
  width: 100%;
  max-width: 500px;
  aspect-ratio: 1;
}
.kw-scrabble-cell {
  background: #eef4f2;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: #8fa8a3;
  cursor: pointer;
  aspect-ratio: 1;
  position: relative;
}
.kw-scrabble-cell[data-bonus="DL"] { background: #cfe6f5; color: #4a7fa3; }
.kw-scrabble-cell[data-bonus="TL"] { background: #9fc9e8; color: #235478; }
.kw-scrabble-cell[data-bonus="DW"] { background: #f7d3c9; color: #b5583b; }
.kw-scrabble-cell[data-bonus="TW"] { background: #f2a98f; color: #8a2f18; }
.kw-scrabble-cell[data-center="true"]::after { content: "★"; position: absolute; font-size: 14px; color: #b5583b; }
.kw-scrabble-cell[data-center="true"][data-filled="true"]::after { content: none; }
.kw-scrabble-cell[data-filled="true"] {
  background: #fff6de;
  color: var(--ink);
  font-family: 'Fraunces', serif;
  font-size: 15px;
  cursor: pointer;
}
.kw-scrabble-cell[data-pending="true"] {
  background: var(--sun);
  color: white;
  font-family: 'Fraunces', serif;
  font-size: 15px;
}
.kw-scrabble-cell .kw-scrabble-pts { position: absolute; bottom: 1px; right: 2px; font-size: 7px; font-weight: 600; }
.kw-scrabble-cell[data-word-highlight="true"] {
  background: var(--sea, #2f6f76);
  color: white;
  box-shadow: 0 0 0 2px var(--sea, #2f6f76);
  z-index: 2;
}

.kw-word-popover {
  display: none;
  position: fixed;
  z-index: 500;
  width: min(280px, calc(100vw - 24px));
  background: var(--surface, #fff);
  border: 1px solid var(--line, #e5ddc9);
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.18);
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.4;
}
.kw-word-popover-close {
  position: absolute;
  top: 6px;
  right: 8px;
  border: none;
  background: none;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: var(--muted, #6b7785);
  padding: 4px;
}
.kw-word-popover-kweyol {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 20px;
  color: var(--ink);
  padding-right: 20px;
}
.kw-word-popover-pos {
  display: inline-block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted, #6b7785);
  font-weight: 700;
  margin-top: 2px;
}
.kw-word-popover-english {
  margin-top: 6px;
  font-weight: 600;
}
.kw-word-popover-example {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line, #e5ddc9);
  color: var(--muted, #6b7785);
  font-size: 13px;
}
.kw-word-popover-source {
  margin-top: 10px;
  font-size: 11px;
  color: var(--muted, #6b7785);
  opacity: 0.8;
}

.kw-scrabble-rack { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.kw-scrabble-tile {
  width: 44px; height: 44px;
  border-radius: 8px;
  background: #fff6de;
  border: 2px solid #e6d49a;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 20px;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
}
.kw-scrabble-tile[data-selected="true"] { border-color: var(--coral); background: #ffe4da; }
.kw-scrabble-tile .kw-scrabble-pts { position: absolute; bottom: 2px; right: 4px; font-size: 8px; font-weight: 600; color: #a3987a; }

.kw-scrabble-controls { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.kw-scrabble-letterpick { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
.kw-scrabble-letterpick button {
  width: 32px; height: 32px;
  border-radius: 6px;
  border: 1px solid #ddd2b8;
  background: white;
  font-weight: 700;
  cursor: pointer;
  text-transform: uppercase;
}

@media (max-width: 480px) {
  .kw-quiz-opts { grid-template-columns: 1fr; }
  .kw-match-grid { gap: 10px; }
  .kw-wordle-tile { width: 40px; height: 40px; font-size: 18px; }
  .kw-key { min-width: 26px; height: 38px; padding: 0 5px; font-size: 11px; }
  .kw-scrabble-tile { width: 34px; height: 34px; font-size: 16px; }
}

/* ---- Ludo Kwéyòl ---- */
:root {
  --ludo-red: #C0342C;
  --ludo-green: #7E9A3C;
  --ludo-yellow: #D6A429;
  --ludo-blue: #34659B;
  --ludo-gold: #C9A227;
}
.kw-ludo-color-red { color: var(--ludo-red); }
.kw-ludo-color-green { color: var(--ludo-green); }
.kw-ludo-color-yellow { color: var(--ludo-yellow); }
.kw-ludo-color-blue { color: var(--ludo-blue); }
.kw-ludo-swatch-red { background: var(--ludo-red); }
.kw-ludo-swatch-green { background: var(--ludo-green); }
.kw-ludo-swatch-yellow { background: var(--ludo-yellow); }
.kw-ludo-swatch-blue { background: var(--ludo-blue); }

/* Classic cross-shaped board (matches the madras-plaid Ludo board art):
   15x15 unit grid -- 6-unit yard quadrant, 3-unit hub band, 6-unit yard
   quadrant along each axis. All child positioning below uses percentages
   of this square (1 unit = 100/15%), so the board scales via aspect-ratio
   alone with no JS resize logic needed. */
.kw-ludo-board-wrap { display: flex; justify-content: center; padding: 10px 0; }
.kw-ludo-board {
  position: relative;
  width: min(100%, 560px);
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  background: var(--cream, #FFFBF2);
  border: 6px solid var(--ink);
  box-shadow: 0 4px 0 rgba(20,33,61,0.15);
  overflow: hidden;
  flex-shrink: 0;
}
.kw-ludo-yard {
  position: absolute;
  width: 40%;
  height: 40%;
  background-blend-mode: multiply;
  background-color: var(--yard-color);
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.18) 0 3px, transparent 3px 18px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,0.12) 0 2px, transparent 2px 20px),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.08) 0 2px, transparent 2px 14px),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.08) 0 2px, transparent 2px 14px);
}
.kw-ludo-yard-red { top: 0; left: 0; --yard-color: var(--ludo-red); border-radius: 12px 0 0 0; }
.kw-ludo-yard-green { top: 0; right: 0; --yard-color: var(--ludo-green); border-radius: 0 12px 0 0; }
.kw-ludo-yard-blue { bottom: 0; left: 0; --yard-color: var(--ludo-blue); border-radius: 0 0 0 12px; }
.kw-ludo-yard-yellow { bottom: 0; right: 0; --yard-color: var(--ludo-yellow); border-radius: 0 0 12px 0; }

@keyframes kw-ludo-turn-flash {
  0%, 100% { box-shadow: inset 0 0 0 0 rgba(255,255,255,0); filter: brightness(1); }
  50% { box-shadow: inset 0 0 0 5px rgba(255,255,255,0.85); filter: brightness(1.3); }
}
.kw-ludo-yard-active { animation: kw-ludo-turn-flash 1s ease-in-out infinite; z-index: 2; }
.kw-ludo-strip-active { animation: kw-ludo-turn-flash 1s ease-in-out infinite; z-index: 2; }
.kw-ludo-yard-face {
  /* Plain axis-aligned inset -- a rotated square's corners swing out past
     its own box (a 76%-wide box rotated 45deg reaches ~107% corner-to-
     corner), which is what let this shape's tips poke a couple percent past
     the yard's own edge into the track next door. inset with no rotation
     can't ever exceed its container, at any inset percentage. */
  position: absolute;
  inset: 14%;
  background: var(--cream, #FFFBF2);
  border: 3px solid var(--ludo-gold);
  border-radius: 16%;
}

.kw-ludo-strip {
  position: absolute;
  background-image: repeating-linear-gradient(var(--strip-dir, 0deg), transparent 0 16.5%, var(--ludo-gold) 16.5% calc(16.5% + 1.5px));
}
.kw-ludo-strip-green { top: 0; left: 46.667%; width: 6.667%; height: 40%; background-color: var(--ludo-green); --strip-dir: 0deg; }
.kw-ludo-strip-yellow { top: 46.667%; right: 0; width: 40%; height: 6.667%; background-color: var(--ludo-yellow); --strip-dir: 90deg; }
.kw-ludo-strip-blue { bottom: 0; left: 46.667%; width: 6.667%; height: 40%; background-color: var(--ludo-blue); --strip-dir: 0deg; }
.kw-ludo-strip-red { top: 46.667%; left: 0; width: 40%; height: 6.667%; background-color: var(--ludo-red); --strip-dir: 90deg; }

.kw-ludo-hub {
  /* Back to a 3x3-unit hub (matches the ring path's own geometry -- see
     RING_WAYPOINTS in ludo-room.js, whose corner turns sit at 6.5/8.5
     units). Enlarging this past 20% swallows extra ring cells near each
     corner turn along with it (their square art sits right up against the
     hub at those turns by design), which is what was producing the
     lopsided, overlapping mess: more of the hub, more cells buried under
     it, unevenly around the four corners. */
  position: absolute;
  top: 40%; left: 40%; width: 20%; height: 20%;
  background: conic-gradient(from -45deg, var(--ludo-green) 0deg 90deg, var(--ludo-yellow) 90deg 180deg, var(--ludo-blue) 180deg 270deg, var(--ludo-red) 270deg 360deg);
  box-shadow: inset 0 0 0 2px var(--ludo-gold);
}

.kw-ludo-cell {
  position: absolute;
  width: 6.667%;
  height: 6.667%;
  transform: translate(-50%, -50%);
  background: var(--cream, #FFFBF2);
  border: 1.5px solid var(--ludo-gold);
  box-sizing: border-box;
}
.kw-ludo-cell.kw-ludo-cell-safe::after { content: ""; position: absolute; inset: 0; margin: auto; width: 22%; height: 22%; border-radius: 999px; background: var(--ludo-gold); opacity: 0.55; }
.kw-ludo-cell.kw-ludo-cell-vocab::after { content: "❓"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 65%; }

.kw-ludo-arrow {
  position: absolute;
  width: 6.667%;
  height: 6.667%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 55%;
  line-height: 1;
  pointer-events: none;
}

.kw-ludo-token {
  position: absolute;
  width: 6%;
  height: 6%;
  border-radius: 999px;
  border: 2px solid white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
  transform: translate(-50%, -50%);
  transition: left 0.35s ease, top 0.35s ease;
  z-index: 2;
}
.kw-ludo-token-clickable {
  cursor: pointer;
  z-index: 3;
  animation: kw-token-pulse 1.1s ease-in-out infinite;
}
.kw-ludo-token-clickable:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
@keyframes kw-token-pulse {
  0%, 100% { box-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 0 0 0 rgba(255,255,255,0.9); }
  50% { box-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 0 0 5px rgba(255,255,255,0); }
}

.kw-ludo-home-burst {
  position: absolute;
  transform: translate(-50%, -50%) scale(0.3);
  font-size: 22px;
  line-height: 1;
  pointer-events: none;
  z-index: 6;
  opacity: 0;
  animation: kw-ludo-home-burst 0.38s ease-out forwards;
}
@keyframes kw-ludo-home-burst {
  0% { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
  35% { transform: translate(-50%, -50%) scale(1.5); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(2.4); opacity: 0; }
}

.kw-ludo-capture-burst {
  position: absolute;
  transform: translate(-50%, -50%) scale(0.4) rotate(0deg);
  font-size: 36px;
  line-height: 1;
  pointer-events: none;
  z-index: 7;
  opacity: 0;
  animation: kw-ludo-capture-burst 0.45s ease-out forwards;
}
@keyframes kw-ludo-capture-burst {
  0% { transform: translate(-50%, -50%) scale(0.4) rotate(0deg); opacity: 0; }
  25% { transform: translate(-50%, -50%) scale(1.7) rotate(-10deg); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(2.3) rotate(10deg); opacity: 0; }
}

.kw-ludo-tokens-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.kw-ludo-token-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 2px solid rgba(20,33,61,0.1);
  background: white;
  cursor: pointer;
  min-width: 64px;
}
.kw-ludo-token-chip .kw-ludo-token-dot { width: 22px; height: 22px; border-radius: 999px; border: 2px solid white; box-shadow: 0 1px 3px rgba(0,0,0,0.25); }
.kw-ludo-token-chip .kw-ludo-token-zone { font-size: 10px; font-weight: 700; color: var(--muted, #6b7785); text-align: center; }
.kw-ludo-token-chip:not(.kw-ludo-token-disabled):hover { transform: translateY(-2px); }
.kw-ludo-token-chip.kw-ludo-token-disabled { opacity: 0.4; cursor: default; }

.kw-ludo-dice {
  position: absolute;
  width: 64px;
  height: 64px;
  margin: 0 auto;
  border-radius: 14px;
  background: white;
  border: 2px solid rgba(20,33,61,0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'Fraunces', serif;
  transform: translate(-50%, -50%);
  transition: left 0.35s ease, top 0.35s ease;
  z-index: 4;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.kw-ludo-dice-word { font-size: 10px; font-weight: 700; color: var(--sea); text-transform: uppercase; }

.kw-hud-stat-timer { min-width: 74px; }
.kw-ludo-timer {
  width: 56px;
  height: 56px;
  margin: 0 auto 2px;
  border-radius: 999px;
  background: var(--surface-2, #faf5e8);
  border: 4px solid var(--leaf, #3C9A5F);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fraunces', serif;
  font-weight: 800;
  font-size: 22px;
  color: var(--ink);
  transition: border-color 0.3s ease, color 0.3s ease;
}
.kw-ludo-timer[data-urgent="true"] {
  border-color: var(--coral, #FF6B4A);
  color: var(--coral, #FF6B4A);
  animation: kw-ludo-timer-pulse 0.8s ease-in-out infinite;
}
@keyframes kw-ludo-timer-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

#room-chat-record-btn.kw-recording {
  background: var(--coral, #FF6B4A);
  border-color: var(--coral, #FF6B4A);
  color: white;
  animation: kw-ludo-timer-pulse 0.8s ease-in-out infinite;
}

.kw-ludo-video-tiles { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.kw-ludo-video-tile-wrap { position: relative; }
.kw-ludo-video-tile {
  width: 120px;
  height: 90px;
  background: #14213d;
  border-radius: 10px;
  object-fit: cover;
  display: block;
  border: 2px solid rgba(20,33,61,0.15);
}
.kw-ludo-video-tile-label {
  position: absolute;
  left: 4px;
  bottom: 4px;
  font-size: 10px;
  font-weight: 700;
  color: white;
  background: rgba(0,0,0,0.5);
  padding: 1px 6px;
  border-radius: 999px;
}

.kw-ludo-dice-face {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 3px;
  width: 38px;
  height: 38px;
}
.kw-pip { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); opacity: 0; align-self: center; justify-self: center; }
/* Standard 3x3 pip layout per face value, addressed by grid position (nth-child). */
.kw-ludo-dice-face[data-value="1"] .kw-pip:nth-child(5) { opacity: 1; }
.kw-ludo-dice-face[data-value="2"] .kw-pip:nth-child(1),
.kw-ludo-dice-face[data-value="2"] .kw-pip:nth-child(9) { opacity: 1; }
.kw-ludo-dice-face[data-value="3"] .kw-pip:nth-child(1),
.kw-ludo-dice-face[data-value="3"] .kw-pip:nth-child(5),
.kw-ludo-dice-face[data-value="3"] .kw-pip:nth-child(9) { opacity: 1; }
.kw-ludo-dice-face[data-value="4"] .kw-pip:nth-child(1),
.kw-ludo-dice-face[data-value="4"] .kw-pip:nth-child(3),
.kw-ludo-dice-face[data-value="4"] .kw-pip:nth-child(7),
.kw-ludo-dice-face[data-value="4"] .kw-pip:nth-child(9) { opacity: 1; }
.kw-ludo-dice-face[data-value="5"] .kw-pip:nth-child(1),
.kw-ludo-dice-face[data-value="5"] .kw-pip:nth-child(3),
.kw-ludo-dice-face[data-value="5"] .kw-pip:nth-child(5),
.kw-ludo-dice-face[data-value="5"] .kw-pip:nth-child(7),
.kw-ludo-dice-face[data-value="5"] .kw-pip:nth-child(9) { opacity: 1; }
.kw-ludo-dice-face[data-value="6"] .kw-pip:nth-child(1),
.kw-ludo-dice-face[data-value="6"] .kw-pip:nth-child(3),
.kw-ludo-dice-face[data-value="6"] .kw-pip:nth-child(4),
.kw-ludo-dice-face[data-value="6"] .kw-pip:nth-child(6),
.kw-ludo-dice-face[data-value="6"] .kw-pip:nth-child(7),
.kw-ludo-dice-face[data-value="6"] .kw-pip:nth-child(9) { opacity: 1; }

/* A tumble (rotating on all three axes, not just spinning flat) while the roll
   is "in the air", then a quick overshoot-and-settle bounce when it lands --
   reads much closer to an actual thrown die than a uniform flat spin. */
@keyframes kw-dice-tumble {
  0%   { transform: perspective(320px) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
  25%  { transform: perspective(320px) rotateX(100deg) rotateY(60deg) rotateZ(25deg); }
  50%  { transform: perspective(320px) rotateX(190deg) rotateY(-40deg) rotateZ(-20deg); }
  75%  { transform: perspective(320px) rotateX(300deg) rotateY(70deg) rotateZ(15deg); }
  100% { transform: perspective(320px) rotateX(360deg) rotateY(0deg) rotateZ(0deg); }
}
.kw-ludo-dice[data-rolling="true"] { animation: kw-dice-tumble 0.5s linear infinite; border-color: var(--sea); }
@keyframes kw-dice-settle {
  0% { transform: scale(1.3) rotate(-8deg); }
  55% { transform: scale(0.9) rotate(4deg); }
  100% { transform: scale(1) rotate(0deg); }
}
.kw-ludo-dice[data-settling="true"] { animation: kw-dice-settle 0.25s ease-out; }

.kw-ludo-modal {
  position: fixed;
  inset: 0;
  background: rgba(20,33,61,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 16px;
}
.kw-ludo-modal-card { background: white; border-radius: 20px; padding: 28px; text-align: center; max-width: 360px; box-shadow: 0 20px 50px rgba(0,0,0,0.35); }
.kw-ludo-modal-word { font-family: 'Fraunces', serif; font-size: 30px; font-weight: 800; margin: 6px 0 18px; }
.kw-ludo-modal-opts { display: flex; flex-direction: column; gap: 8px; }
.kw-ludo-modal-opts button { padding: 10px 14px; border-radius: 10px; border: 2px solid rgba(20,33,61,0.15); background: white; font-weight: 700; cursor: pointer; }
.kw-ludo-modal-opts button:hover { border-color: var(--sea); }

@media (max-width: 480px) {
  .kw-ludo-board { grid-template-columns: repeat(15, 18px); grid-template-rows: repeat(13, 18px); }
  .kw-ludo-cell { width: 18px; height: 18px; }
  .kw-ludo-token { width: 14px; height: 14px; }
}

.kw-lesson-body { line-height: 1.65; color: var(--ink); }
.kw-lesson-body p { margin: 0 0 16px; }
.kw-lesson-body a { color: var(--sea); font-weight: 600; }
.kw-lesson-table { width: 100%; border-collapse: collapse; margin: 8px 0 24px; }
.kw-lesson-table th, .kw-lesson-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid rgba(20,33,61,0.1); vertical-align: middle; }
.kw-lesson-table th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted, #6b7785); }
.kw-lesson-table td:nth-child(2) { font-weight: 700; }
.kw-lesson-en { color: var(--muted, #6b7785); font-size: 13px; }
.kw-lesson-swatch { display: inline-block; width: 24px; height: 24px; border-radius: 6px; border: 1px solid rgba(20,33,61,0.15); }

/* Privacy, Terms, Contact (learn/privacy.html, terms.html, contact.html). */
.kw-legal { max-width: 720px; margin: 0 auto; text-align: left; }
.kw-legal .kw-title { font-size: clamp(28px, 6vw, 40px); }
.kw-legal-updated { font-size: 13px; color: #777; margin: 0 0 20px; }
.kw-lesson-body h2 { font-family: 'Fraunces', serif; font-size: 21px; margin: 28px 0 10px; color: var(--ink); }
.kw-lesson-body ul { margin: 0 0 16px; padding-left: 22px; }
.kw-lesson-body li { margin-bottom: 8px; }
.kw-legal-table-wrap { overflow-x: auto; margin: 0 0 16px; }
.kw-legal-table-wrap .kw-lesson-table { min-width: 460px; margin-bottom: 0; }
.kw-legal-table-wrap td:first-child { font-family: monospace; font-size: 13px; white-space: nowrap; }
.kw-legal-table-wrap td:nth-child(2) { font-weight: 400; }
.kw-contact-email { font-size: 20px; font-weight: 700; margin: 8px 0 24px; overflow-wrap: anywhere; }
.kw-login-legal { max-width: 420px; margin: 4px auto 0; text-align: center; font-size: 13px; color: #6b7785; line-height: 1.5; }
.kw-login-legal a { color: var(--sea); font-weight: 700; }

/* Phones: two compact columns of game/guide/lesson cards instead of one long
   stack of full-width cards (the menu alone was ~4,500px tall at 390px). */
@media (max-width: 480px) {
  .kw-games { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
  .kw-game-card { padding: 14px 12px; border-radius: 14px; }
  .kw-game-emoji { font-size: 26px; margin-bottom: 6px; }
  .kw-game-name { font-size: 15px; line-height: 1.2; }
  .kw-game-desc {
    font-size: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* Background photos (game/backgrounds.py). base.html sets --kw-bg-m (a
   portrait shot, phones) and --kw-bg-d (a landscape shot, wider screens) per
   visitor and page view; only the one matching the screen is downloaded. The
   photo lives on a fixed ::before layer (background-attachment: fixed is
   broken on iOS) under a cream wash: light on the sign-in page, heavier
   everywhere else so text and game boards stay easy to read. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  --kw-wash: linear-gradient(rgba(255,251,242,0.84), rgba(255,251,242,0.84));
  background: var(--kw-wash), var(--kw-bg-m, none) var(--kw-bg-m-pos, center) / cover no-repeat, var(--cream);
}
@media (min-width: 700px) {
  body::before {
    background: var(--kw-wash), var(--kw-bg-d, none) var(--kw-bg-d-pos, center) / cover no-repeat, var(--cream);
  }
}
body.kw-page-login::before {
  --kw-wash: linear-gradient(180deg, rgba(255,251,242,0.08) 0%, rgba(255,251,242,0.22) 50%, rgba(255,251,242,0.78) 100%);
}
/* Header and footer sit on the photo on every page. */
.kw-sitenav {
  background: rgba(255,251,242,0.88);
  border-radius: 0 0 18px 18px;
  padding-bottom: 12px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
footer { background: rgba(255,251,242,0.85); border-radius: 18px 18px 0 0; max-width: 880px; margin: 24px auto 0; }
.kw-page-login .kw-login-card { box-shadow: 0 2px 0 rgba(20,33,61,0.08), 0 18px 40px rgba(20,33,61,0.22); }
.kw-page-login .kw-login-legal,
.kw-page-login .kw-login-wrap > p:last-child {
  background: rgba(255,251,242,0.9);
  border-radius: 12px;
  padding: 8px 14px;
}
.kw-page-login .kw-login-wrap > p:last-child { margin-top: 10px !important; }
@media (max-width: 480px) {
  /* The card fills a phone's width, so leave a window above it where the
     photo shows through. */
  .kw-page-login .kw-login-wrap { padding-top: 170px; }
}

/* Sharing (share app): Daily Challenge banner, share panel, challenge
   banners and the public /s/<token>/ result page. */
.kw-daily-banner {
  display: flex; align-items: center; gap: 14px;
  max-width: 560px; margin: 0 auto 20px; padding: 14px 18px;
  background: var(--sea); color: white; text-decoration: none;
  border-radius: 18px; box-shadow: 0 4px 0 var(--sea-deep);
  transition: transform 0.12s ease;
}
.kw-daily-banner:hover { transform: translateY(-2px); }
.kw-daily-banner:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
.kw-daily-banner-emoji { font-size: 30px; }
.kw-daily-banner > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.kw-daily-banner-title { font-size: 20px; font-weight: 800; }
.kw-daily-banner-sub { font-size: 13px; opacity: 0.9; line-height: 1.35; }
.kw-daily-banner-go { font-size: 20px; background: var(--sun); color: var(--ink); width: 40px; height: 40px; border-radius: 999px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.kw-daily-grid { font-size: 30px; letter-spacing: 4px; margin: 10px 0; }

.kw-share-panel { margin-top: 18px; text-align: center; }
.kw-share-preview { width: 160px; max-width: 45%; border-radius: 14px; box-shadow: 0 8px 24px rgba(20,33,61,0.2); }
.kw-share-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 14px; }
.kw-share-note { font-size: 13px; color: #6b7785; margin: 12px auto 0; max-width: 420px; line-height: 1.5; }

.kw-challenge-banner {
  background: var(--sun); color: var(--ink); font-weight: 600;
  border-radius: 14px; padding: 12px 16px; margin: 0 0 16px; text-align: center; line-height: 1.4;
}
.kw-challenge-result { font-weight: 700; font-size: 17px; margin: 6px auto 10px; padding: 10px 14px; border-radius: 12px; background: var(--cream); max-width: 420px; }
.kw-challenge-result[data-outcome="win"] { background: #e3f4e8; color: #1f6b3a; }

.kw-share-page { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; align-items: center; }
.kw-share-page-card { width: 300px; max-width: 70%; height: auto; border-radius: 22px; box-shadow: 0 16px 40px rgba(20,33,61,0.25); }
.kw-share-page-info { flex: 1 1 300px; max-width: 440px; text-align: center; }
.kw-share-page-info .kw-title { font-size: clamp(28px, 6vw, 40px); }
.kw-share-page-info .kw-btn { margin-top: 16px; }

/* Footer visitor counter (visits app). */
.kw-visitor-count { margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--sea); font-variant-numeric: tabular-nums; }

/* Jwé Kwéyòl JK logo: site header (content pages) and game topbar. */
.kw-sitenav-brand { display: inline-flex; align-items: center; gap: 10px; }
.kw-sitenav-logo { height: 54px; width: auto; flex: 0 0 auto; }
.kw-topbar-home { gap: 8px; }
.kw-topbar-logo { height: 32px; width: auto; }
@media (max-width: 480px) {
  .kw-sitenav-brand { line-height: 1.15; font-size: 16px; gap: 8px; }
  .kw-sitenav-logo { height: 46px; }
  .kw-topbar-logo { height: 36px; }
}

/* Wordle: opening instructions, colour legend and the valid-word bank. */
.kw-wordle-intro { text-align: center; padding: 18px 20px; }
.kw-wordle-intro p { margin: 0 0 8px; line-height: 1.5; }
.kw-wordle-intro a { color: var(--sea); font-weight: 700; }
.kw-wordle-legend { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 10px; font-size: 13px; color: #555; margin-bottom: 0 !important; }
.kw-wordle-legend-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.kw-wordle-legend span[data-state] { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 6px; color: white; font-weight: 800; font-size: 14px; }
.kw-wordle-legend span[data-state="correct"] { background: var(--leaf); }
.kw-wordle-legend span[data-state="present"] { background: var(--sun); }
.kw-wordle-legend span[data-state="absent"] { background: #cfcac0; }

.kw-word-bank { margin-top: 22px; text-align: left; border: 2px solid rgba(20,33,61,0.1); border-radius: 14px; padding: 4px 14px; scroll-margin-top: 16px; }
.kw-word-bank summary { cursor: pointer; font-weight: 700; color: var(--sea); padding: 10px 0; min-height: 44px; display: flex; align-items: center; gap: 6px; }
.kw-word-bank summary:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; border-radius: 8px; }
.kw-word-bank-note { font-size: 13px; color: #6b7785; margin: 0 0 10px; line-height: 1.45; }
.kw-word-bank .kw-input { margin-bottom: 10px; }
.kw-word-bank-list { list-style: none; margin: 0 0 12px; padding: 0; max-height: 320px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.kw-word-bank-list li { display: flex; gap: 12px; align-items: baseline; padding: 8px 4px; border-bottom: 1px solid rgba(20,33,61,0.07); }
.kw-word-bank-kw { font-family: 'Fraunces', serif; font-weight: 700; font-size: 17px; min-width: 70px; }
.kw-word-bank-en { font-size: 13px; color: #6b7785; line-height: 1.35; }
.kw-word-bank-empty { font-size: 13px; color: #6b7785; }

/* Keyboard fits any phone width: keys share the row instead of a fixed
   minimum width pushing the 12-key top row past the card's edges. */
.kw-wordle-keyboard { width: 100%; }
.kw-wordle-krow { width: 100%; max-width: 520px; justify-content: center; }
.kw-wordle-krow .kw-key { flex: 1 1 0; min-width: 0; max-width: 44px; padding: 0; }
.kw-wordle-krow .kw-key-wide { flex: 1.8 1 0; max-width: 72px; }
@media (max-width: 480px) {
  .kw-wordle-krow { gap: 4px; }
}