/* Wordell web game. Colors are the app's Theme (android/.../ui/Theme.kt in John-ODell/wordell):
   the game panel keeps the app's warm light look in both site themes, like a phone screen. */
.wg-page {
  padding: 104px 16px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.wg {
  --wg-bg: #f9f5ec;
  --wg-ink: #29332b;
  --wg-green: #3d6e54;
  --wg-yellow: #e0ab47;
  --wg-muted: #808575;
  --wg-clay: #b0694d;
  --wg-lavender: #6e6eb3;
  --wg-red: #ff3b30;
  --wg-line: rgba(41, 51, 43, 0.15);
  --wg-serif: "New York", Georgia, "Times New Roman", serif;

  width: 100%;
  max-width: 620px;
  min-height: 560px;
  padding: 20px;
  border-radius: 28px;
  background: var(--wg-bg);
  color: var(--wg-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, var(--font-body);
  font-size: 17px;
  line-height: 1.35;
  box-shadow: var(--shadow);
  color-scheme: light;
  -webkit-tap-highlight-color: transparent;
}

.wg-loading { color: var(--wg-muted); text-align: center; padding: 80px 0; }

.wg-foot {
  max-width: 620px;
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
}
.wg-foot a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

.wg *:focus-visible { outline: 3px solid var(--wg-yellow); outline-offset: 2px; }

.wg-stack { display: flex; flex-direction: column; gap: 22px; }
.wg-stack--sm { gap: 14px; }

.wg-card { background: #fff; border-radius: 20px; padding: 20px; }

.wg-btn {
  appearance: none;
  border: 0;
  font: inherit;
  color: inherit;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
}

.wg-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--wg-ink);
}
.wg-eyebrow--green { color: var(--wg-green); letter-spacing: 2px; }
.wg-eyebrow--muted { color: var(--wg-muted); }

.wg-muted { color: var(--wg-muted); }
.wg-sub { font-size: 15px; color: var(--wg-muted); }
.wg-caption { font-size: 12px; color: var(--wg-muted); }
.wg-tnum { font-variant-numeric: tabular-nums; }

/* ── Home ───────────────────────────────────────────── */
.wg-brandrow { display: flex; align-items: center; justify-content: space-between; }
.wg-brand { font-size: 14px; font-weight: 900; letter-spacing: 4px; color: var(--wg-green); }
.wg-icon-btn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
}
.wg-icon-btn:hover { background: rgba(41, 51, 43, 0.06); }
.wg-icon-btn svg { width: 24px; height: 24px; }

.wg-hero {
  font-family: var(--wg-serif);
  font-size: clamp(32px, 9vw, 38px);
  line-height: 1.16;
  font-weight: 700;
  margin: 2px 0 4px;
  letter-spacing: 0;
}

.wg-note {
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(224, 171, 71, 0.18);
  font-size: 14px;
}

.wg-today { display: flex; align-items: center; gap: 12px; }
.wg-today > div { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.wg-today b { font-size: 20px; font-weight: 600; }

.wg-ring { position: relative; width: 55px; height: 55px; flex: none; }
.wg-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.wg-ring span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
}

.wg-games { display: flex; flex-direction: column; gap: 12px; }
.wg-link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-radius: 20px;
  background: #fff;
  color: var(--wg-ink);
  text-align: left;
  width: 100%;
  transition: transform 0.15s;
}
.wg-link:hover { transform: translateY(-1px); }
.wg-link:active { transform: scale(0.99); }
.wg-link__icon {
  width: 58px;
  height: 58px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: #fff;
}
.wg-link__icon svg { width: 30px; height: 30px; }
.wg-link__text { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wg-link__text b { font-size: 20px; }
.wg-link__state svg { width: 24px; height: 24px; display: block; }

.wg-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.wg-stat { background: #fff; border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 2px; }
.wg-stat b { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.wg-bygame { display: flex; flex-direction: column; }
.wg-bygame div { display: flex; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--wg-line); font-size: 15px; }
.wg-bygame > :first-child { border-top: 0; }
.wg-bygame a { display: flex; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--wg-line); font-size: 15px; color: var(--wg-ink); }
.wg-bygame a:hover span:first-child { color: var(--wg-green); }
.wg-past summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
.wg-past summary::-webkit-details-marker { display: none; }
.wg-past summary::after { content: "+"; font-size: 20px; font-weight: 400; letter-spacing: 0; }
.wg-past[open] summary::after { content: "−"; }
.wg-past[open] { display: flex; }

/* ── Game screens ───────────────────────────────────── */
.wg-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  margin: -10px 0 -10px -8px;
  padding: 0 8px;
  border-radius: 10px;
  color: var(--wg-green);
  font-weight: 600;
  font-size: 16px;
}
.wg-back svg { width: 20px; height: 20px; }

.wg-banner { display: flex; flex-direction: column; gap: 6px; }
.wg-banner__row { display: flex; align-items: center; justify-content: space-between; }
.wg-banner h1 {
  font-family: var(--wg-serif);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--wg-ink);
}
.wg-clock { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--wg-muted); font-variant-numeric: tabular-nums; }
.wg-clock svg { width: 13px; height: 13px; }

.wg-done { display: flex; flex-direction: column; gap: 8px; }
.wg-done h2 { font-size: 22px; font-weight: 700; letter-spacing: 0; color: var(--wg-ink); font-family: inherit; }
.wg-done--center { text-align: center; align-items: center; }

.wg-primary {
  width: 100%;
  padding: 15px;
  border-radius: 12px;
  background: var(--wg-green);
  color: #fff;
  font-weight: 700;
}
.wg-primary:active { filter: brightness(0.92); }

.wg-text-btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 4px;
  border-radius: 8px;
  color: var(--wg-green);
  font-size: 15px;
  font-weight: 600;
}
.wg-text-btn svg { width: 20px; height: 20px; }
.wg-text-btn--ink { color: var(--wg-ink); font-weight: 400; font-size: 17px; }
.wg-text-btn:disabled { color: var(--wg-muted); cursor: default; }

.wg-input {
  width: 100%;
  min-width: 0;
  padding: 14px 14px;
  border: 1px solid var(--wg-line);
  border-radius: 8px;
  background: #fff;
  color: var(--wg-ink);
  font: 500 20px/1.2 var(--font-mono);
  text-transform: uppercase;
}
.wg-input::placeholder { text-transform: none; color: #a9ab9f; }
.wg-input:focus { outline: none; border-color: rgba(41, 51, 43, 0.4); }

@keyframes wg-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(2px); }
}
.wg-shake { animation: wg-shake 0.4s ease-out; }

/* Five Letters */
.wg-fl-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
/* Like the app's gridWidth(forHeight:): the widest grid that leaves room for the keyboard. */
.wg-grid { width: 100%; max-width: clamp(200px, calc((100svh - 520px) / 6 * 5 + 20px), 330px); margin: 0 auto; display: grid; gap: 5px; }
.wg-grid__row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.wg-tile {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: #fff;
  border: 1px solid var(--wg-line);
  font-size: clamp(20px, 7vw, 27px);
  font-weight: 700;
}
.wg-tile.is-correct, .wg-key.is-correct { background: var(--wg-green); color: #fff; border-color: transparent; }
.wg-tile.is-present, .wg-key.is-present { background: var(--wg-yellow); color: #fff; border-color: transparent; }
.wg-tile.is-absent, .wg-key.is-absent { background: var(--wg-muted); color: #fff; border-color: transparent; }
.wg-tile.is-flip { animation: wg-flip 0.35s ease-out both; }
@keyframes wg-flip { from { transform: rotateX(90deg); } to { transform: none; } }
.wg-hint { text-align: center; min-height: 22px; font-size: 15px; color: var(--wg-muted); }
.wg-hint.is-msg { color: var(--wg-ink); }

.wg-kbd { display: flex; flex-direction: column; gap: 7px; }
.wg-kbd__row { display: flex; gap: 4px; }
.wg-key {
  flex: 1 1 0;
  min-width: 0;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: #fff;
  font-size: 15px;
  font-weight: 700;
  transition: transform 0.08s;
}
.wg-key:active { transform: scale(0.88); }
.wg-key--wide { flex-grow: 1.5; }
.wg-key svg { width: 20px; height: 20px; }

/* Letter Mix */
.wg-scramble { display: flex; gap: 6px; }
.wg-scramble span {
  flex: 1 1 0;
  aspect-ratio: 0.9;
  max-width: 64px;
  display: grid;
  place-items: center;
  background: #fff;
  border-radius: 10px;
  font-size: clamp(20px, 7vw, 27px);
  font-weight: 700;
}
.wg-scramble { justify-content: center; }
.wg-clue { text-align: center; font-style: italic; color: var(--wg-muted); font-size: 16px; }

/* Sudoku */
.wg-sudoku {
  position: relative;
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  background: #fff;
  border: 2px solid rgba(41, 51, 43, 0.8);
}
.wg-cell {
  display: grid;
  place-items: center;
  border-right: 0.7px solid rgba(41, 51, 43, 0.25);
  border-bottom: 0.7px solid rgba(41, 51, 43, 0.25);
  font-size: clamp(15px, 5.3vw, 24px);
  font-weight: 500;
  color: var(--wg-green);
  background: #fff;
  padding: 0;
}
.wg-cell:nth-child(9n) { border-right: 0; }
.wg-cell:nth-child(9n + 3), .wg-cell:nth-child(9n + 6) { border-right: 2px solid rgba(41, 51, 43, 0.8); }
.wg-cell:nth-child(n + 19):nth-child(-n + 27),
.wg-cell:nth-child(n + 46):nth-child(-n + 54) { border-bottom: 2px solid rgba(41, 51, 43, 0.8); }
.wg-cell:nth-child(n + 73) { border-bottom: 0; }
.wg-cell.is-given { color: var(--wg-ink); font-weight: 700; cursor: default; }
.wg-cell.is-selected { background: rgba(224, 171, 71, 0.42); }
.wg-cell.is-wrong { color: var(--wg-red); }
.wg-numpad { display: grid; grid-template-columns: repeat(9, 1fr); gap: 5px; }
.wg-num { height: 48px; border-radius: 9px; background: #fff; font-size: 22px; font-weight: 700; }
.wg-num:active { transform: scale(0.92); }
.wg-actions { display: flex; justify-content: space-between; align-items: center; }

/* Riddle Mix */
.wg-riddle { display: flex; flex-direction: column; gap: 14px; width: 100%; text-align: left; background: #fff; border: 2px solid transparent; }
.wg-riddle.is-selected, .wg-word.is-selected { border-color: var(--wg-green); }
.wg-answer { display: flex; flex-wrap: wrap; gap: 8px 12px; }
.wg-squares { display: flex; gap: 3px; }
.wg-sq {
  --sq: 30px;
  position: relative;
  width: var(--sq);
  height: var(--sq);
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: #fff;
  border: 1.5px solid rgba(41, 51, 43, 0.25);
  font-weight: 700;
  font-size: calc(var(--sq) * 0.5);
  color: #fff;
}
.wg-sq.is-filled { background: var(--wg-green); border-color: transparent; }
.wg-sq.is-circled::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  border: 1.5px solid var(--wg-yellow);
}
.wg-sq.is-filled.is-circled::after { border-color: rgba(255, 255, 255, 0.85); }
.wg-words { display: flex; flex-direction: column; gap: 10px; }
.wg-word {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 14px;
  background: #fff;
  border: 2px solid transparent;
  text-align: left;
}
.wg-word:disabled { cursor: default; }
.wg-word__top { display: flex; align-items: center; gap: 10px; }
.wg-word__tiles { display: flex; gap: 3px; flex: none; }
.wg-word__tiles span {
  width: calc(var(--sq) * 0.65);
  height: calc(var(--sq) * 0.65);
  display: grid;
  place-items: center;
  border-radius: 5px;
  background: var(--wg-bg);
  color: var(--wg-muted);
  font-weight: 600;
  font-size: calc(var(--sq) * 0.36);
}
.wg-word__clue {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  font-style: italic;
  color: var(--wg-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wg-tray { display: flex; flex-direction: column; gap: 10px; }
.wg-tray__letters { display: flex; flex-wrap: wrap; gap: 4px; }
.wg-tray__letters span {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: rgba(224, 171, 71, 0.25);
  font-weight: 700;
  font-size: 16px;
}
.wg-entry { display: flex; gap: 10px; align-items: stretch; }
.wg-entry .wg-input { flex: 1; font-size: 18px; }
.wg-entry .wg-primary { width: auto; padding: 14px 20px; }

@media (max-width: 680px) {
  .wg-page { padding: 80px 0 16px; }
  .wg { border-radius: 0; padding: 20px 16px; box-shadow: none; min-height: 0; }
  .wg-foot { padding: 0 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .wg-tile.is-flip, .wg-shake { animation: none; }
}