/* Wordle Italiano - CrazyGames Best. Builds on the --cg-* / --wd-* tokens from theme.css and first-party-games.css. */

.wi-card {
  max-width: 520px;
  margin: 0 auto;
  padding: 0.75rem 1rem 1rem;
}
.wi-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.wi-modes {
  display: flex;
  gap: 4px;
  padding: 3px;
  background: var(--cg-sunken);
  border-radius: 12px;
}
.wi-mode {
  min-height: 44px;
  padding: 0 0.9rem;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--fp-text-muted);
  font: inherit;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
}
.wi-mode[aria-pressed="true"] {
  background: var(--fp-orange);
  color: #fff;
}
.wi-tools {
  display: flex;
  gap: 2px;
}
.wi-tool {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--cg-ink);
  cursor: pointer;
}
.wi-tool:hover { background: var(--cg-sunken); }
.wi-tool svg { width: 22px; height: 22px; }

.wi-message {
  min-height: 1.6rem;
  margin: 0 0 0.35rem;
  text-align: center;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--cg-ink);
}
.wi-message.is-error { color: var(--fp-red); }
.wi-message.is-success { color: var(--fp-green); }

.wi-board {
  display: grid;
  gap: 5px;
  width: max-content;
  margin: 0 auto 0.75rem;
}
.wi-row {
  display: grid;
  grid-template-columns: repeat(var(--wi-cols, 5), 1fr);
  gap: 5px;
}
.wi-row.is-shake { animation: wiShake 0.45s; }
.wi-tile {
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--wd-tile-border);
  border-radius: 6px;
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1;
  color: var(--wd-tile-text);
  text-transform: uppercase;
  user-select: none;
}
.wi-tile.is-filled { border-color: var(--cg-rule); animation: wiPop 0.1s ease-in-out; }
.wi-tile.is-flip { animation: wiFlip 0.32s ease-in-out; }
.wi-tile.is-correct,
.wi-tile.is-present,
.wi-tile.is-absent { color: #fff; }
.wi-tile.is-correct { background: var(--wd-correct); border-color: var(--wd-correct); }
.wi-tile.is-present { background: var(--wd-present); border-color: var(--wd-present); }
.wi-tile.is-absent { background: var(--wd-absent); border-color: var(--wd-absent); }

.wi-keyboard {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.wi-key-row {
  display: flex;
  justify-content: center;
  gap: 5px;
}
.wi-key {
  flex: 1 1 0;
  max-width: 44px;
  min-width: 0;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: var(--wd-key-bg);
  color: #fff;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.wi-key.key-wide { flex: 1.6 1 0; max-width: 66px; font-size: 0.78rem; }
.wi-key.is-correct { background: var(--wd-correct); }
.wi-key.is-present { background: var(--wd-present); }
.wi-key.is-absent { background: var(--wd-absent); opacity: 0.55; }

.wi-end {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  min-height: 150px;
  text-align: center;
}
.wi-end.is-visible { display: flex; }
.wi-end-title { margin: 0; font-size: 1.05rem; font-weight: 800; color: var(--cg-ink); }
.wi-end-note { margin: 0; font-size: 0.9rem; color: var(--fp-text-muted); }
.wi-end-note b { font-variant-numeric: tabular-nums; color: var(--cg-ink); }
.wi-end-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; width: 100%; }
.wi-end-actions .fp-btn { flex: 1 1 140px; }
.wi-keyboard.is-hidden { display: none; }
.wi-end [hidden] { display: none !important; }

/* High-contrast colours (colour-blind friendly) */
.wi-contrast {
  --wd-correct: #f5793a;
  --wd-present: #3b82c4;
}

/* Dialog */
.wi-dialog {
  width: min(92vw, 440px);
  max-height: 86vh;
  padding: 0;
  border: 1px solid var(--cg-line);
  border-radius: 16px;
  background: var(--cg-surface);
  color: var(--cg-ink);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.wi-dialog::backdrop { background: rgba(2, 6, 23, 0.6); }
.wi-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.5rem 0 1.1rem;
}
.wi-dialog-head h2 { margin: 0; font-size: 1.15rem; }
.wi-dialog-body { padding: 0.5rem 1.1rem 1.2rem; font-size: 0.95rem; line-height: 1.5; }
.wi-dialog-body p { margin: 0 0 0.6rem; }
.wi-sample { display: flex; gap: 4px; margin: 0.4rem 0 0.25rem; }
.wi-sample .wi-tile { width: 38px; height: 38px; font-size: 1.2rem; }
.wi-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  margin: 0.4rem 0 0.9rem;
  text-align: center;
}
.wi-stat b { display: block; font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.wi-stat span { font-size: 0.72rem; color: var(--fp-text-muted); }
.wi-dist { display: grid; gap: 4px; margin-bottom: 0.5rem; }
.wi-dist-row { display: grid; grid-template-columns: 1rem 1fr; gap: 6px; align-items: center; font-size: 0.82rem; }
.wi-dist-bar {
  min-width: 1.6rem;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--wd-absent);
  color: #fff;
  font-weight: 700;
  text-align: right;
  box-sizing: border-box;
}
.wi-dist-bar.is-today { background: var(--wd-correct); }
.wi-setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--cg-line);
}
.wi-setting:last-child { border-bottom: 0; }
.wi-setting strong { display: block; }
.wi-setting small { color: var(--fp-text-muted); }
.wi-switch {
  position: relative;
  flex: none;
  width: 52px;
  height: 32px;
  border: 0;
  border-radius: 16px;
  background: var(--wd-absent);
  cursor: pointer;
}
.wi-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s;
}
.wi-switch[aria-checked="true"] { background: var(--wd-correct); }
.wi-switch[aria-checked="true"]::after { transform: translateX(20px); }
.wi-switch:disabled { opacity: 0.5; cursor: not-allowed; }

@keyframes wiPop { 0% { transform: scale(0.9); } 50% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes wiFlip { 0% { transform: rotateX(0); } 50% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } }
@keyframes wiShake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-5px); }
  40%, 60% { transform: translateX(5px); }
}
@media (prefers-reduced-motion: reduce) {
  .wi-tile.is-filled, .wi-tile.is-flip, .wi-row.is-shake { animation: none; }
}

@media (max-width: 640px) {
  .wi-card { padding: 0.5rem 0.5rem 0.75rem; }
  .wi-tile { width: clamp(44px, 13.4vw, 52px); height: clamp(44px, 13.4vw, 52px); font-size: 1.5rem; }
  .wi-board { gap: 4px; margin-bottom: 0.5rem; }
  .wi-row { gap: 4px; }
  .wi-key-row { gap: 4px; }
  .wi-keyboard { gap: 5px; }
}

/* Guide section */
.detail-description h2[id] { scroll-margin-top: 72px; }
.wi-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 1.25rem;
}
.wi-toc a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 0.8rem;
  border: 1px solid var(--cg-line);
  border-radius: 999px;
  background: var(--cg-sunken);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
}
.wi-toc a:hover { border-color: var(--fp-orange); }
.wi-example {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0.75rem 0 1.25rem;
}
.wi-example .wi-sample { margin: 0; }
.wi-example figcaption {
  margin-top: 0.5rem;
  max-width: 62ch;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--cg-muted);
}
.wi-table {
  width: 100%;
  max-width: 360px;
  margin: 0.5rem 0 1.25rem;
  border-collapse: collapse;
  font-size: 0.92rem;
  color: var(--cg-ink);
}
.wi-table caption { margin-bottom: 0.4rem; text-align: left; font-weight: 700; }
.wi-table th, .wi-table td { padding: 0.35rem 0.6rem; border-bottom: 1px solid var(--cg-line); text-align: left; }
.wi-table thead th { background: var(--cg-sunken); }
.wi-table tbody th { font-weight: 800; width: 5rem; }
.wi-table td { font-variant-numeric: tabular-nums; }
.detail-description h3 { margin: 1.25rem 0 0.4rem; font-size: 1.05rem; }
.wi-guide p { margin: 0 0 0.85rem; }
.wi-guide .content-list { margin-bottom: 0.85rem; }

/* Word-length picker (English page, Unlimited mode) */
.wi-lengths {
  display: flex;
  gap: 4px;
  width: max-content;
  margin: 0 auto 0.4rem;
  padding: 3px;
  background: var(--cg-sunken);
  border-radius: 12px;
}
.wi-lengths[hidden] { display: none; }
.wi-len {
  min-height: 44px;
  padding: 0 0.9rem;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--fp-text-muted);
  font: inherit;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
}
.wi-len[aria-pressed="true"] { background: var(--cg-ink); color: var(--cg-surface); }
@media (max-width: 640px) {
  .wi-lengths { margin-bottom: 0.25rem; }
}

/* Wide tables scroll inside the article instead of widening the page */
.detail-shell > div { min-width: 0; }
.wi-table-scroll { max-width: 100%; margin: 0.5rem 0 1.25rem; overflow-x: auto; }
.wi-table-scroll .wi-table { max-width: none; width: 100%; margin: 0; }
.wi-table-scroll:focus-visible { outline: 2px solid var(--cg-accent, var(--fp-orange)); outline-offset: 2px; }