/* EG Matches 4.5.4 */

.eg-matches.vg-game {
  /* Diagnostic marker only; no visual effect. */
  --eg-css-build: 4.3.1;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 0;
  position: relative;
  /* Shared colors for effects */
  --vg-surface: #ffffff;
  --vg-lock-border: rgba(22, 163, 74, 0.85);
  --vg-lock-bg: rgba(22, 163, 74, 0.12);
  /* Two text sizes, two weights, one site-inherited family.
     Restore the original 14 CSS-pixel card size rather than tying it to the
     theme's root font size. Browser zoom still scales the whole widget.
     These scoped tokens can also be enlarged together by a user stylesheet. */
  --eg-text-body: 14px; /* cards, explanatory text, metadata and controls */
  --eg-text-small: var(--eg-text-body); /* retained compatibility token */
  --eg-text-heading: 16px; /* main instruction, panel titles and stat values */
  --eg-ink: #333333;
  --eg-ink-secondary: #555555;
  --eg-column-bg: #eeeeee;
  --eg-weight-regular: 400;
  --eg-weight-semibold: 600;
  --eg-leading: 1.5;
  --eg-card-leading: 1.3; /* original card line height: 18.2px at 14px */
  --eg-space-1: 0.25rem;
  --eg-space-2: 0.5rem;
  --eg-space-3: 0.75rem;
  --eg-space-4: 1rem;
  --eg-space-5: 1.5rem;
  color: var(--eg-ink);
  -webkit-text-fill-color: currentColor;
  font-family: inherit;
  font-size: var(--eg-text-body);
  font-weight: var(--eg-weight-regular);
  font-style: normal;
  line-height: var(--eg-leading);
  letter-spacing: normal;
  overflow-wrap: anywhere;
}

.vg-game * {
  box-sizing: border-box;
}

/* Scoped type roles: the page title and the rest of the site remain theme-owned.
   Native controls and card spans inherit the same site family; no new font loads.
   The class-qualified reset also beats common theme rules targeting card spans. */
.eg-matches.vg-game :is(button, select, textarea, option, table, th, td, label,
    span, div, a),
.eg-matches.vg-game [class] {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-style: normal;
  line-height: inherit;
  letter-spacing: normal;
  text-transform: none;
}

.eg-matches.vg-game :is(.vg-mode-note, .vg-date, .vg-mode-btn,
    .vg-control-label, .vg-progress, .vg-timer, .vg-status, .vg-col-title,
    .vg-btn, .vg-stat-label, .vg-share-menu,
    .vg-share-copy, .vg-score-note, .vg-storage-note, .vg-day-notice,
    .vg-topic, .vg-level, .vg-finish-sub, .vg-copy-text) {
  font-size: var(--eg-text-body);
  line-height: var(--eg-leading);
}

.eg-matches.vg-game :is(.vg-instructions-text, .vg-finish-title,
    .vg-stats-title, .vg-stat-value) {
  font-size: var(--eg-text-heading);
  line-height: var(--eg-leading);
  font-weight: var(--eg-weight-semibold);
}

/* Words and definitions deliberately share size, weight, colour and leading. */
.eg-matches.vg-game :is(.vg-card, .vg-card-text) {
  font-size: var(--eg-text-body);
  line-height: var(--eg-card-leading);
  font-weight: var(--eg-weight-regular);
}

.eg-matches.vg-game :is(.vg-mode-btn, .vg-control-label,
    .vg-col-title, .vg-btn, .vg-stat-label, .vg-share-copy) {
  font-weight: var(--eg-weight-semibold);
}

.eg-matches.vg-game :is(.vg-mode-note, .vg-date, .vg-progress, .vg-timer,
    .vg-status, .vg-finish-sub, .vg-score-note, .vg-storage-note, .vg-day-notice,
    .vg-topic, .vg-level, .vg-copy-fallback label) {
  font-weight: var(--eg-weight-regular);
}

/* Use one primary and one secondary neutral for reading text. Action colours,
   selection/error/success card fills and social-service icons are separate. */
.eg-matches.vg-game :is(.vg-instructions-text, .vg-progress, .vg-status,
    .vg-topic, .vg-level, .vg-finish-title, .vg-finish-sub, .vg-stats-title,
    .vg-stat-value, .vg-control-label, .vg-storage-note,
    .vg-day-notice, .vg-copy-fallback) {
  color: var(--eg-ink) !important;
  -webkit-text-fill-color: currentColor !important;
}

.eg-matches.vg-game :is(.vg-mode-note, .vg-date, .vg-timer,
    .vg-stat-label, .vg-score-note) {
  color: var(--eg-ink-secondary) !important;
  -webkit-text-fill-color: currentColor !important;
}

/* The tick is a decorative symbol, not another text role. */
.eg-matches.vg-game .vg-card.vg-is-locked.vg-type-def::after {
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
}

.vg-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--eg-space-4);
  padding: var(--eg-space-2) 0;
  flex-wrap: wrap;
}

.vg-topbar-right {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.vg-icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(17, 24, 39, 0.10);
  background: #ffffff;
  color: var(--eg-ink-secondary);
  cursor: pointer;
  padding: 0;
}

.vg-icon-btn:hover {
  background: rgba(75, 100, 173, 0.08);
  color: #4b64ad;
  border-color: rgba(75, 100, 173, 0.25);
}

.vg-icon-btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  display: block;
}

.vg-date {
  color: var(--eg-ink) !important;
  -webkit-text-fill-color: var(--eg-ink);
  white-space: nowrap;
  background: transparent;
  border: none;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}

/* The date and history controls belong to Daily only. */
.vg-view-practice .vg-date {
  display: none !important;
}

.vg-instructions {
  display: flex;
  flex: 1 1 22rem;
  align-items: baseline;
  gap: var(--eg-space-1);
  flex-wrap: wrap;
  min-width: 0;
}

/* Mode helper text (clarifies Daily vs Practice). */
.vg-mode-note {
  color: var(--eg-ink-secondary) !important;
  -webkit-text-fill-color: var(--eg-ink-secondary) !important;
  flex-basis: 100%;
}

/* Mode switch (Daily / Practice) */
.vg-mode-switch {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(17, 24, 39, 0.12);
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
  height: 34px;
}

.vg-mode-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--eg-ink-secondary) !important;
  -webkit-text-fill-color: var(--eg-ink-secondary) !important;

  padding: 8px 12px;
  min-height: 40px;
  height: auto;

  cursor: pointer;
  user-select: none;
  transition: background-color 120ms ease, color 120ms ease;
}

.vg-mode-btn:hover {
  background: rgba(75, 100, 173, 0.08);
  color: #4b64ad !important;
  -webkit-text-fill-color: #4b64ad !important;
}

.vg-mode-btn.is-active {
  background: #4b64ad;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.vg-mode-btn.is-active:hover {
  background: #3f5698;
}

/* In Daily mode, hide Practice controls so the page clearly communicates “today's shared puzzle”. */
.vg-view-daily .vg-controls {
  display: none;
}

.vg-instructions-text {
  color: var(--eg-ink) !important;
}

.vg-progress {
  color: var(--eg-ink) !important;
}

.vg-controls {
  display: flex;
  gap: 12px;
  padding: 6px 0 10px 0;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-start;
}

.vg-control {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 200px;
}

.vg-control-label {
  color: var(--eg-ink-secondary) !important;
}

.vg-topic, .vg-level {
  width: 100%;
  max-width: 320px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(17, 24, 39, 0.18);
  background: #ffffff;
  color: var(--eg-ink) !important;
  -webkit-text-fill-color: var(--eg-ink);

  height: auto;
}

.vg-status {
  padding: 0 0 10px 0;
  color: var(--eg-ink);

  min-height: 18px;
}

/* Board uses rows (each row has a word + definition). */
.vg-board {
  display: flex;
  flex-direction: column;
  gap: var(--eg-space-2);
  padding: 0 0 var(--eg-space-3);
}

.vg-board-head {
  display: grid;
  /* 3 columns: words | connector gap | definitions
     Using a fixed middle column keeps the layout stable and gives us a
     clean place to draw the “matched” connector without intruding into text.
  */
  grid-template-columns: 0.85fr 10px 1.15fr;
  gap: 0;
}

.vg-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vg-row {
  display: grid;
  grid-template-columns: 0.85fr 10px 1.15fr;
  gap: 0;
  position: relative;
  overflow: visible;
}

.vg-row .vg-card {
  z-index: 1;
}

/* Compact column labels: the same small/semibold text role, not buttons.
   Scope the paint to the widget so inherited theme text-fill cannot darken it.
   Grid stretch keeps both bars equally tall when the longer label wraps. */
.eg-matches.vg-game .vg-board-head > .vg-col-title {
  display: flex;
  align-items: center;
  align-self: stretch;
  min-width: 0;
  margin: 0;
  padding: var(--eg-space-2) 12px;
  border: 1px solid #d6d6d6;
  border-bottom: 2px solid #cccccc;
  border-radius: 6px;
  background: var(--eg-column-bg) !important;
  color: var(--eg-ink) !important;
  -webkit-text-fill-color: var(--eg-ink) !important;
  font-family: inherit;
  font-size: var(--eg-text-small);
  font-weight: var(--eg-weight-semibold);
  font-style: normal;
  line-height: var(--eg-leading);
  text-align: left;
  text-transform: none;
  text-shadow: none;
  box-shadow: none;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: default;
}

.vg-card {
  position: relative;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(17, 24, 39, 0.18);
  background: #ffffff;
  color: var(--eg-ink) !important;
  -webkit-text-fill-color: var(--eg-ink) !important;
  text-transform: none !important;
  cursor: pointer;
  user-select: none;
  outline: none;
  transition: transform 80ms ease, box-shadow 80ms ease;
}

.vg-card:focus {
  outline: none;
}

.eg-matches.vg-game .vg-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(17, 24, 39, 0.10) !important;
}

.eg-matches.vg-game .vg-card .vg-card-text {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  text-transform: none !important;
  position: relative;
  z-index: 1;

  word-break: break-word;
}

.eg-matches.vg-game .vg-card.vg-is-disabled {
  opacity: 0.75 !important;
  cursor: default;
}

/* Disabled/locked cards should not lift on hover, but we still allow animations. */
.eg-matches.vg-game .vg-card.vg-is-disabled:hover {
  transform: none;
  box-shadow: none;
}

.eg-matches.vg-game .vg-card.vg-is-selected {
  border-color: rgba(37, 99, 235, 0.9) !important;
  background: rgba(59, 130, 246, 0.10) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
}

.eg-matches.vg-game .vg-card.vg-is-locked {
  border-color: var(--vg-lock-border) !important;
  background: var(--vg-lock-bg) !important;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.12) !important;
  cursor: default;
}

/* Only show the checkmark on the RIGHT (definition) card. */
.eg-matches.vg-game .vg-card.vg-is-locked.vg-type-def {
  /* Keep text clear of the checkmark */
  padding-right: 38px;
}

.vg-card.vg-is-locked.vg-type-def::after {
  content: "✓";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);

  color: rgba(22, 163, 74, 0.30);
  pointer-events: none;
  z-index: 0;
}

/* Matched-connector (simple line)
   - A thin line appears ONLY when a row is locked (matched).
   - It sits entirely in the middle gap column, so it never overlaps text.
   - Symmetrical and minimal.
*/

.vg-col-spacer {
  /* Placeholder column for header alignment */
}

.vg-join {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
}

.vg-join::before {
  content: "";
  width: 100%;
  height: 2px;
  border-radius: 999px;
  background: rgba(22, 163, 74, 0.55);
  opacity: 0;
  transform: scaleX(0.25);
  transform-origin: center;
}

.vg-row-locked .vg-join::before {
  opacity: 1;
  transform: scaleX(1);
}

.eg-matches.vg-game .vg-card.vg-is-wrong {
  border-color: rgba(220, 38, 38, 0.9) !important;
  background: rgba(220, 38, 38, 0.10) !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12) !important;
  animation: vg-shake 320ms ease-in-out;
}

@keyframes vg-shake {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(-4px); }
  40%  { transform: translateX(4px); }
  60%  { transform: translateX(-3px); }
  80%  { transform: translateX(3px); }
  100% { transform: translateX(0); }
}

.vg-btn {
  appearance: none;
  border: 0;
  padding: 9px 14px;
  border-radius: 12px;
  cursor: pointer;

  text-transform: none !important;
  background-color: #4b64ad !important; /* slightly toned-down blue */
  box-shadow: none !important;
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background-color 120ms ease, opacity 120ms ease;
  height: 40px;
  white-space: nowrap;
}

.vg-btn:hover {
  background-color: #3f5698 !important; /* darker blue */
  box-shadow: none !important;
  transform: none !important;
}

.vg-btn:active {
  background-color: #394e89 !important;
  transform: none !important;
}

.vg-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.vg-finish {
  padding: 10px 0;
}

.vg-finish-box {
  border-radius: 14px;
  border: 1px solid rgba(22, 163, 74, 0.28);
  background: rgba(22, 163, 74, 0.08);
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.vg-finish-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Secondary button (Share). */
.vg-btn.vg-btn-secondary {
  background: #ffffff !important;
  color: #4b64ad !important;
  -webkit-text-fill-color: #4b64ad !important;
  border: 1px solid rgba(75, 100, 173, 0.45) !important;
  box-shadow: none;
}

.vg-btn.vg-btn-secondary:hover {
  background: rgba(75, 100, 173, 0.08) !important;
  box-shadow: none !important;
}

/* Share menu */
.vg-share {
  position: relative;
  display: inline-flex;
}

.vg-share-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid rgba(17, 24, 39, 0.12);
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(17, 24, 39, 0.16);
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 120ms ease, transform 120ms ease;
}

/* Invisible hover bridge so the menu doesn't disappear when moving the mouse from the button to the icons. */
.vg-share-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  height: 10px;
}

.vg-share:hover .vg-share-menu,
.vg-share.vg-share-open .vg-share-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.vg-share-link {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(17, 24, 39, 0.12);
  background: #ffffff;
  text-decoration: none;
  color: var(--eg-ink) !important;
  -webkit-text-fill-color: var(--eg-ink) !important;
}

.vg-share-link:hover {
  background: rgba(75, 100, 173, 0.10);
  border-color: rgba(75, 100, 173, 0.30);
  }

.vg-share-link svg {
  width: 16px;
  height: 16px;
  display: block;
  fill: currentColor;
}

/* Brand colors (icons use Bootstrap Icons SVG shapes; brands are trademarks of their owners). */
.eg-matches.vg-game .vg-share-menu > .vg-share-fb { color: #1877F2 !important; -webkit-text-fill-color: #1877F2 !important; }
.eg-matches.vg-game .vg-share-menu > .vg-share-x { color: #111827 !important; -webkit-text-fill-color: #111827 !important; }
.eg-matches.vg-game .vg-share-menu > .vg-share-reddit { color: #FF4500 !important; -webkit-text-fill-color: #FF4500 !important; }
.eg-matches.vg-game .vg-share-menu > .vg-share-linkedin { color: #0A66C2 !important; -webkit-text-fill-color: #0A66C2 !important; }
.eg-matches.vg-game .vg-share-menu > .vg-share-email { color: #4b64ad !important; -webkit-text-fill-color: #4b64ad !important; }

.vg-finish-title {
  color: var(--eg-ink) !important;
}

/* Confetti burst (shown when all 10 matches are completed). */
.vg-confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 80;
}

.vg-confetti-piece {
  position: absolute;
  top: -14px;
  width: 8px;
  height: 12px;
  border-radius: 2px;
  opacity: 0.95;
  animation: vg-confetti-fall var(--vg-dur, 1200ms) ease-out forwards;
  transform: translate3d(0, 0, 0) rotate(0deg);
}

@keyframes vg-confetti-fall {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
    opacity: 0.95;
  }
  100% {
    transform: translate3d(var(--vg-x, 0px), 120vh, 0) rotate(var(--vg-rot, 540deg));
    opacity: 0;
  }
}

/* Stats panel */
.vg-stats-panel {
  border: 1px solid rgba(17, 24, 39, 0.10);
  border-radius: 14px;
  background: #ffffff;
  padding: 12px;
  margin: 6px 0 10px 0;
}

.vg-stats-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.vg-stats-title {
  color: var(--eg-ink);
}

.vg-stats-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

.vg-stat {
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 12px;
  padding: 10px;
  background: rgba(75, 100, 173, 0.04);
}

.vg-stat-label {
  color: var(--eg-ink-secondary);
  margin-bottom: 2px;
}

.vg-stat-value {
  color: var(--eg-ink);
}

.vg-stats-foot {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}

.vg-share-copy {
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid rgba(17, 24, 39, 0.12);
  background: #ffffff;
  color: #4b64ad;

  cursor: pointer;
}

.vg-share-copy svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  display: block;
}

.vg-share-copy:hover {
  background: rgba(75, 100, 173, 0.10);
  border-color: rgba(75, 100, 173, 0.30);
}

@media (prefers-reduced-motion: reduce) {
  .vg-card,
  .vg-share-menu,
  .vg-btn,
  .vg-confetti-piece {
    transition: none !important;
    animation: none !important;
  }
}

@media (max-width: 720px) {
  .vg-topbar {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 10px;
    padding: 10px 0 8px 0;
  }
  .vg-instructions {
    flex: initial;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .vg-date {
  color: var(--eg-ink) !important;
  -webkit-text-fill-color: var(--eg-ink);
  white-space: nowrap;
  background: transparent;
  border: none;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}
  .vg-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 6px 0 10px 0;
  }
  .vg-control {
    min-width: 0;
    width: 100%;
  }
  .vg-topic, .vg-level {
    max-width: none;
  }
  .vg-btn.vg-new-round {
    width: 100%;
  }
  .vg-finish-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  .vg-topbar-right {
    justify-content: flex-start;
  }
  .vg-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 4.0 accessibility, native-button and narrow-screen fixes. The vg-* classes
   remain intentional compatibility hooks for existing site customizations. */
.eg-matches [hidden] { display: none !important; }
.eg-matches.vg-game .vg-card {
  /* Original card-state fills/borders, with the approved neutral reading text.
     Do not inherit a theme's button or disabled treatment. */
  background: #ffffff !important; border: 1px solid rgba(17, 24, 39, 0.18) !important;
  color: var(--eg-ink) !important; -webkit-text-fill-color: var(--eg-ink) !important;
  opacity: 1 !important; filter: none !important; text-shadow: none !important;
  box-shadow: none !important; border-radius: 14px !important; padding: 10px 12px;
  appearance: none; -webkit-appearance: none; display: flex; align-items: center;
  width: 100%; min-width: 0; margin: 0; text-align: left; 

  min-height: 48px; height: auto; white-space: normal;
}
.eg-matches .vg-card-text { display: block; overflow-wrap: anywhere; }
.eg-matches :is(button, a, select, textarea):focus-visible {
  outline: 3px solid #1d4ed8 !important; outline-offset: 3px !important;
}
.eg-matches .vg-topbar-right { flex-wrap: wrap; flex-shrink: 0; max-width: 100%; }
.eg-matches .vg-controls { align-items: flex-end; }
.eg-matches .vg-control { min-width: 0; max-width: 100%; }
.eg-matches .vg-topic, .eg-matches .vg-level {  min-height: 42px; }
.eg-matches.vg-game .vg-topic, .eg-matches.vg-game .vg-topic option { text-transform: none !important; }
.eg-matches .vg-view-practice { width: 100%; }
.eg-matches.vg-view-practice :is(.vg-stats-btn, .vg-archive-btn) { display: none !important; }
.eg-matches .vg-icon-btn { flex-shrink: 0; width: 40px; height: 40px; }
.eg-matches .vg-btn { min-height: 42px; height: auto; max-width: 100%; white-space: normal; }
.eg-matches .vg-mode-switch { height: auto; min-height: 40px; align-items: stretch; max-width: 100%; }
.eg-matches .vg-mode-btn { height: auto; min-height: 40px; text-transform: none; margin: 0; }
/* Deliberate section spacing, independent of the hidden live-status node. */
.eg-matches.vg-game .vg-round-meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--eg-space-3);
  margin: var(--eg-space-3) 0 var(--eg-space-5);
}
.eg-matches .vg-progress { color: var(--eg-ink); }
.eg-matches .vg-timer { color: var(--eg-ink-secondary); }
/* The initial instruction can wrap in narrow embeds; keep the timer intact. */
.eg-matches .vg-progress { min-width: 0; }
.eg-matches .vg-timer { flex-shrink: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.eg-matches .vg-status { min-height: 1.5em; padding: 0; margin: 0 0 var(--eg-space-4); color: var(--eg-ink); }
/* Keep routine feedback in the accessibility tree, without a second visible row
   or leftover spacing. Do not use display:none, hidden, or aria-hidden here. */
.eg-matches .vg-status.vg-status-sr-only {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  min-width: 0 !important; min-height: 0 !important;
  padding: 0 !important; margin: -1px !important; border: 0 !important;
  overflow: hidden !important; white-space: nowrap !important;
  clip: rect(0, 0, 0, 0) !important; clip-path: inset(50%) !important;
}
.eg-matches .vg-storage-note, .eg-matches .vg-day-notice {
  padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 10px;
  margin: 10px 0; background: #f9fafb; color: var(--eg-ink);
}
.eg-matches .vg-day-notice { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.eg-matches .vg-retry { margin-bottom: 12px; }
.eg-matches .vg-finish-sub { color: var(--eg-ink); margin-top: 4px; }
/* Six controls, one row. JS compacts Copy to its labelled icon only when needed,
   and clamps the panel to the game/viewport rather than guessing its width. */
.eg-matches.vg-game .vg-share { flex: 0 0 auto; z-index: 60; }
.eg-matches.vg-game .vg-share-menu {
  --eg-share-size: 40px;
  --eg-share-gap: 8px;
  left: 0; right: auto; top: calc(100% + 8px);
  width: max-content; min-width: 0; max-width: none; margin: 0;
  display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center;
  gap: var(--eg-share-gap); padding: 8px;
     white-space: nowrap;
  opacity: 1; pointer-events: auto; transform: none;
}
.eg-matches .vg-share-menu::before { display: none; }
.eg-matches.vg-game .vg-share-menu > :is(a, button) {
  appearance: none; -webkit-appearance: none;
  display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center;
  width: var(--eg-share-size); min-width: var(--eg-share-size); max-width: none;
  height: var(--eg-share-size); min-height: var(--eg-share-size); max-height: none;
  margin: 0 !important; padding: 0 !important;
  border: 1px solid rgba(17, 24, 39, 0.12) !important; border-radius: 999px;
  background: #ffffff !important; box-shadow: none !important;
  opacity: 1 !important; filter: none !important; text-shadow: none !important;

  white-space: nowrap; text-transform: none !important; text-decoration: none !important;
  cursor: pointer; transform: none !important;
}
.eg-matches.vg-game .vg-share-menu > .vg-share-copy {
  width: auto; padding: 0 10px !important; gap: 6px;
  color: #4b64ad !important; -webkit-text-fill-color: #4b64ad !important;
}
.eg-matches.vg-game .vg-share-menu > :is(a, button):hover {
  background: rgba(75, 100, 173, 0.10) !important;
  border-color: rgba(75, 100, 173, 0.30) !important;
}
.eg-matches.vg-game .vg-share-menu > button:disabled { cursor: wait; }
.eg-matches.vg-game .vg-share-menu svg {
  flex: 0 0 16px; width: 16px; height: 16px; margin: 0; display: block; fill: currentColor;
}
.eg-matches.vg-game .vg-share-menu.vg-share-compact { --eg-share-gap: 4px; }
.eg-matches.vg-game .vg-share-compact > .vg-share-copy {
  width: var(--eg-share-size); padding: 0 !important; gap: 0;
}
.eg-matches .vg-share-compact .vg-share-copy span { display: none; }
.eg-matches .vg-copy-fallback { margin: 12px 0; }
.eg-matches .vg-copy-text { width: 100%; margin-top: 6px; font: inherit; }
@media (max-width: 720px) {
  .eg-matches .vg-topbar-right { width: 100%; gap: 8px; }
  .eg-matches.vg-game .vg-round-meta { margin-bottom: var(--eg-space-4); }
  .eg-matches .vg-date { margin-right: auto; }
  .eg-matches .vg-control { width: 100%; }
  .eg-matches .vg-row, .eg-matches .vg-board-head { grid-template-columns: minmax(0, .85fr) 8px minmax(0, 1.15fr); }
  .eg-matches.vg-game .vg-board-head > .vg-col-title {
    padding-inline: 8px;
  }
  .eg-matches.vg-game .vg-card { padding: 10px 8px; }
  .eg-matches.vg-game .vg-card.vg-is-locked.vg-type-def { padding-right: 22px; }
  .eg-matches.vg-game .vg-card.vg-is-locked.vg-type-def::after { right: 5px; font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .eg-matches *, .eg-matches *::before, .eg-matches *::after {
    animation: none !important; transition: none !important; scroll-behavior: auto !important;
  }
}

.eg-matches .vg-score-note { margin-top: 6px; color: var(--eg-ink-secondary); }

/* Round lifecycle controls use the existing two-size typography and button roles. */
.eg-matches.vg-game .vg-round-meta {
  align-items: center;
  flex-wrap: wrap;
  row-gap: var(--eg-space-2);
}
.eg-matches.vg-game .vg-round-actions {
  /* Reserve the existing button height so the first selection does not move the board. */
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--eg-space-2);
  margin-left: auto;
  min-width: 0;
  max-width: 100%;
}
.eg-matches.vg-game .vg-round-actions .vg-timer { margin-right: var(--eg-space-1); }
.eg-matches.vg-game .vg-round-actions .vg-btn { margin: 0; }
.eg-matches.vg-game .vg-round-secondary {
  color: var(--eg-ink-secondary) !important;
  -webkit-text-fill-color: currentColor !important;
  border-color: #d6d6d6;
  font-weight: var(--eg-weight-regular);
  background: #ffffff;
}
.eg-matches.vg-game .vg-round-secondary:hover { background: #f5f5f5; }
.eg-matches.vg-game .vg-board-gate {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 144px;
  padding: var(--eg-space-5) var(--eg-space-4);
  border: 1px solid #d6d6d6;
  border-radius: 10px;
  background: #fafafa;
  color: var(--eg-ink-secondary);
  -webkit-text-fill-color: currentColor;
  text-align: center;
}
.eg-matches.vg-game .vg-clear-note {
  flex: 1 1 20rem;
  color: var(--eg-ink-secondary);
  -webkit-text-fill-color: currentColor;
}
.eg-matches.vg-game .vg-stats-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--eg-space-3);
}
@media (max-width: 720px) {
  .eg-matches.vg-game .vg-round-actions { width: 100%; justify-content: flex-start; }
  .eg-matches.vg-game .vg-round-actions .vg-timer { margin-right: auto; }
  .eg-matches.vg-game .vg-round-secondary { padding-inline: 10px; }
}

/* 4.1.3: compact, non-modal help. No card/type/column-label changes. */
.eg-matches.vg-game .vg-intro-details {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 var(--eg-space-3);
  flex-basis: 100%; min-width: 0;
}
.eg-matches.vg-game .vg-intro-details .vg-mode-note { flex-basis: auto; }
.eg-matches.vg-game .vg-help-toggle {
  appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center;
  gap: 8px; min-height: 32px; margin: 0; padding: 0; max-width: 100%;
  border: 0; border-radius: 2px; background: transparent !important; box-shadow: none !important;
  color: var(--eg-ink-secondary) !important; -webkit-text-fill-color: currentColor !important;
  font-size: var(--eg-text-body); font-weight: var(--eg-weight-regular); line-height: var(--eg-leading);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.eg-matches.vg-game .vg-help-toggle:hover { color: var(--eg-ink) !important; }
.eg-matches.vg-game .vg-help-chevron {
  width: 7px; height: 7px; flex: 0 0 7px; margin-top: -3px;
  border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}
.eg-matches.vg-game .vg-help-toggle[aria-expanded="true"] .vg-help-chevron {
  transform: rotate(225deg); margin-top: 3px;
}
.eg-matches.vg-game .vg-help-panel {
  display: flex; align-items: center; gap: var(--eg-space-3); flex-wrap: wrap;
  margin: 0 0 var(--eg-space-3); padding: var(--eg-space-3);
  border: 1px solid #d6d6d6; border-radius: 6px; background: #fafafa;
  color: var(--eg-ink); -webkit-text-fill-color: currentColor;
  font-size: var(--eg-text-body); line-height: var(--eg-leading);
}
/* Keep the mode comparison scannable, using the existing body/semibold roles. */
.eg-matches.vg-game .vg-help-copy {
  flex: 1 1 22rem; min-width: 0;
  display: grid; gap: var(--eg-space-2);
}
.eg-matches.vg-game .vg-help-line { margin: 0; padding: 0; }
.eg-matches.vg-game .vg-help-label { font-weight: var(--eg-weight-semibold); }
.eg-matches.vg-game .vg-help-dismiss { flex: 0 0 auto; margin: 0; }

/* The initial cue and tools occupy the same grid slot: no board jump on first pick.
   Visibility + inert keeps the reserved tools out of the focus/accessibility tree. */
.eg-matches.vg-game .vg-round-guidance {
  display: grid; grid-template-columns: minmax(0, 1fr);
  min-width: 0; max-width: 100%; flex: 1 1 auto;
}
.eg-matches.vg-game :is(.vg-timer-cue, .vg-round-toolset) { grid-area: 1 / 1; min-width: 0; }
.eg-matches.vg-game .vg-timer-cue {
  align-self: center; color: var(--eg-ink-secondary); -webkit-text-fill-color: currentColor;
  font-size: var(--eg-text-body); font-weight: var(--eg-weight-regular); line-height: var(--eg-leading);
}
.eg-matches.vg-game .vg-timer-cue.vg-cue-reserved {
  visibility: hidden;
  pointer-events: none;
}
.eg-matches.vg-game .vg-tools-pending { visibility: hidden; pointer-events: none; }
.eg-matches.vg-game .vg-tools-pending * { visibility: hidden !important; }
.eg-matches.vg-game .vg-round-buttons {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--eg-space-2);
}
/* Completed-result actions: keep the explanation with its own button, not
   beneath Pause or across the whole board. Reuse existing type/button roles. */
.eg-matches.vg-game .vg-finish-actions {
  align-items: flex-start;
  flex-wrap: wrap;
  min-width: 0;
  max-width: 100%;
}
.eg-matches.vg-game .vg-finish-practice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--eg-space-1);
  flex: 0 1 15em;
  min-width: 0;
  max-width: 100%;
}
.eg-matches.vg-game .vg-finish-practice .vg-replay-round { margin: 0; }
.eg-matches.vg-game .vg-replay-note {
  display: block;
  flex: 1 0 100%;
  width: 100%;
  margin: 0;
  max-width: 100%;
  text-align: left !important;
  font-size: var(--eg-text-body);
  font-weight: var(--eg-weight-regular);
  line-height: var(--eg-leading);
  color: var(--eg-ink-secondary);
  -webkit-text-fill-color: currentColor;
}
.eg-matches.vg-game .vg-round-actions { flex-wrap: nowrap; }
.eg-matches.vg-game .vg-round-actions .vg-back-daily { flex: 0 1 auto; }
.eg-matches.vg-game .vg-timer { border-radius: 4px; }
.eg-matches.vg-game[data-clock-state="running"] .vg-timer {
  color: var(--eg-ink) !important; -webkit-text-fill-color: currentColor !important;
}
@media (prefers-reduced-motion: no-preference) {
  .eg-matches.vg-game .vg-timer-activated { animation: eg-timer-activate 500ms ease-out; }
}
@media (max-width: 720px) {
  .eg-matches.vg-game .vg-round-actions .vg-timer { margin-right: var(--eg-space-1); }
  .eg-matches.vg-game .vg-round-guidance { flex-basis: 0; }
}


/* 4.2.0: clearer game header, Daily-only progress and Daily archive. */
.eg-matches.vg-game .vg-topbar {
  margin-bottom: var(--eg-space-3);
  padding: var(--eg-space-4);
  border: 1px solid #e1e5ea;
  border-radius: 10px;
  background: #f7f8fa;
}
.eg-matches.vg-game .vg-help-panel {
  border-color: #dbe3ee;
  border-left: 3px solid #9eafd4;
  background: #f7f9fc;
  padding-left: calc(var(--eg-space-3) - 2px);
}
.eg-matches.vg-game .vg-round-meta {
  padding: var(--eg-space-3) var(--eg-space-4);
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fbfbfc;
}
.eg-matches.vg-game .vg-stats-panel,
.eg-matches.vg-game .vg-archive-panel {
  border: 1px solid #dfe3e8;
  border-radius: 12px;
  background: #ffffff;
  padding: var(--eg-space-4);
  margin: 0 0 var(--eg-space-4);
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
}
.eg-matches.vg-game :is(.vg-stats-head, .vg-archive-head) {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--eg-space-3);
  margin-bottom: var(--eg-space-4);
}
.eg-matches.vg-game :is(.vg-stats-title, .vg-archive-title, .vg-history-title) {
  color: var(--eg-ink) !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: var(--eg-text-heading);
  font-weight: var(--eg-weight-semibold);
  line-height: var(--eg-leading);
}
.eg-matches.vg-game :is(.vg-stats-subtitle, .vg-archive-subtitle, .vg-history-caption,
  .vg-archive-result, .vg-history-empty, .vg-archive-loading) {
  color: var(--eg-ink-secondary) !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: var(--eg-text-body);
  font-weight: var(--eg-weight-regular);
  line-height: var(--eg-leading);
}
.eg-matches.vg-game .vg-stats-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--eg-space-2);
  margin-bottom: var(--eg-space-4);
}
.eg-matches.vg-game .vg-stat {
  border-color: #e1e5ea;
  background: #f7f8fa;
  padding: var(--eg-space-3);
}
.eg-matches.vg-game .vg-history {
  border-top: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
  padding: var(--eg-space-4) 0;
  margin-bottom: var(--eg-space-4);
}
.eg-matches.vg-game .vg-history-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--eg-space-3);
  margin-bottom: var(--eg-space-3);
}
.eg-matches.vg-game .vg-daily-chart {
  height: 176px;
  display: grid;
  grid-template-columns: repeat(14, minmax(0, 1fr));
  align-items: end;
  gap: 5px;
  padding: 8px 4px 0;
  border-radius: 8px;
  background:
    linear-gradient(to top, transparent 24%, #eef0f3 25%, transparent 26%, transparent 49%, #eef0f3 50%, transparent 51%, transparent 74%, #eef0f3 75%, transparent 76%);
}
.eg-matches.vg-game .vg-chart-item {
  height: 100%;
  min-width: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  gap: 3px;
  align-items: end;
  text-align: center;
}
.eg-matches.vg-game .vg-chart-bar {
  width: min(22px, 85%);
  height: 100%;
  justify-self: center;
  display: flex;
  align-items: flex-end;
  border-radius: 5px 5px 2px 2px;
  background: #edf0f6;
  overflow: hidden;
}
.eg-matches.vg-game .vg-chart-fill {
  width: 100%;
  min-height: 4px;
  border-radius: 5px 5px 2px 2px;
  background: #4b64ad;
}
.eg-matches.vg-game .vg-chart-score {
  color: var(--eg-ink) !important;
  font-size: var(--eg-text-body);
  line-height: var(--eg-leading);
  font-weight: var(--eg-weight-semibold);
}
.eg-matches.vg-game .vg-chart-day {
  color: var(--eg-ink-secondary) !important;
  font-size: var(--eg-text-body);
  line-height: var(--eg-leading);
}
.eg-matches.vg-game .vg-archive-list {
  display: grid;
  gap: var(--eg-space-2);
  max-height: 420px;
  overflow-y: auto;
  padding-right: 2px;
  scrollbar-gutter: stable;
}
.eg-matches.vg-game .vg-archive-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--eg-space-3);
  padding: var(--eg-space-3);
  border: 1px solid #e3e6ea;
  border-radius: 8px;
  background: #fafbfc;
}
.eg-matches.vg-game .vg-archive-copy { min-width: 0; }
.eg-matches.vg-game .vg-archive-date {
  color: var(--eg-ink) !important;
  font-size: var(--eg-text-body);
  font-weight: var(--eg-weight-semibold);
  line-height: var(--eg-leading);
}
.eg-matches.vg-game .vg-archive-play { flex: 0 0 auto; margin: 0; }
.eg-matches.vg-game .vg-stats-foot { justify-content: space-between; }
.eg-matches.vg-game .vg-clear-note { max-width: 38rem; }
@media (max-width: 720px) {
  .eg-matches.vg-game .vg-topbar { padding: var(--eg-space-3); }
  .eg-matches.vg-game .vg-round-meta { padding: var(--eg-space-3); }
  .eg-matches.vg-game .vg-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eg-matches.vg-game .vg-daily-chart { gap: 3px; height: 154px; overflow-x: auto; }
  .eg-matches.vg-game .vg-archive-row { align-items: flex-start; }
}

/* 4.3.1 — EnglishGrammar visual system.
   Presentation only: no new fonts, typography roles, game states or storage keys.
   Component scoping prevents these rules from restyling site navigation/widgets. */
.eg-matches.vg-game {
  --eg-accent: var(--eg-moss, #446931);
  --eg-accent-strong: var(--eg-moss-dark, #355d20);
  --eg-accent-soft: var(--eg-moss-soft, #edf3e7);
  --eg-border: var(--eg-rule, #e5e2d9);
  --eg-border-strong: var(--eg-rule-strong, #cfcbbf);
  --eg-surface: var(--eg-tint, #f2f7ec);
  --eg-column-bg: var(--eg-paper, #f6f3ea);
  --vg-focus-color: var(--eg-pine-deep, #355d20);
  --vg-help-paper: var(--eg-paper, #f6f3ea);
  --vg-leaf: var(--eg-leaf, #afca00);
  --vg-radius: var(--eg-radius, 6px);
  --vg-radius-panel: var(--eg-radius-large, 12px);
  --vg-lock-border: #6f9255;
  --vg-lock-bg: #edf5e7;
  container: eg-matches / inline-size;
  isolation: isolate;
}

/* One instruction/control surface, rather than several blue-grey boxes. */
.eg-matches.vg-game .vg-command-center {
  position: relative;
  margin: 0 0 12px;
  padding: 16px;
  border: 1px solid var(--eg-border);
  border-top: 3px solid var(--eg-accent);
  border-radius: var(--vg-radius-panel);
  background: var(--eg-page, #ffffff);
  box-shadow: 0 1px 3px rgba(31, 44, 30, 0.04);
}
.eg-matches.vg-game .vg-topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.eg-matches.vg-game .vg-instructions {
  flex: 1 1 100%;
  gap: 2px;
}
.eg-matches.vg-game .vg-instructions-text { max-width: 100%; }
.eg-matches.vg-game .vg-topbar-right {
  width: 100%;
  min-width: 0;
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--eg-border);
}
.eg-matches.vg-game .vg-date { margin-right: auto; }
.eg-matches.vg-game .vg-mode-switch {
  padding: 3px;
  gap: 2px;
  min-height: 44px;
  border: 1px solid var(--eg-border-strong);
  border-radius: calc(var(--vg-radius) + 3px);
  background: var(--vg-help-paper);
  overflow: visible;
}
.eg-matches.vg-game .vg-mode-btn {
  min-height: 36px;
  padding: 7px 13px;
  border-radius: var(--vg-radius);
  box-shadow: none;
}
.eg-matches.vg-game .vg-mode-btn:hover {
  background: var(--eg-accent-soft);
  color: var(--eg-accent-strong) !important;
  -webkit-text-fill-color: currentColor !important;
}
.eg-matches.vg-game .vg-mode-btn.is-active {
  background: var(--eg-accent) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(35, 59, 23, 0.15);
}
.eg-matches.vg-game .vg-mode-btn.is-active:hover { background: var(--eg-accent-strong) !important; }
.eg-matches.vg-game .vg-icon-btn {
  width: 44px;
  height: 44px;
  border: 1px solid var(--eg-border-strong);
  border-radius: var(--vg-radius);
  background: #ffffff;
  color: var(--eg-accent-strong) !important;
  -webkit-text-fill-color: currentColor !important;
  box-shadow: none;
  transition: background-color 140ms ease, border-color 140ms ease;
}
.eg-matches.vg-game .vg-icon-btn svg { width: 18px; height: 18px; }
.eg-matches.vg-game .vg-icon-btn:hover,
.eg-matches.vg-game .vg-icon-btn[aria-expanded="true"] {
  background: var(--eg-accent-soft);
  border-color: var(--eg-accent);
}
.eg-matches.vg-game .vg-btn {
  border: 1px solid var(--eg-accent) !important;
  border-radius: var(--vg-radius);
  background: var(--eg-accent) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  min-height: 42px;
  padding: 8px 14px;
  text-align: center;
  transition: background-color 140ms ease, border-color 140ms ease;
}
.eg-matches.vg-game .vg-btn:hover { background: var(--eg-accent-strong) !important; }
.eg-matches.vg-game .vg-btn:active { background: #29441c !important; }
.eg-matches.vg-game .vg-btn.vg-btn-secondary {
  border-color: var(--eg-border-strong) !important;
  background: #ffffff !important;
  color: var(--eg-accent-strong) !important;
  -webkit-text-fill-color: currentColor !important;
}
.eg-matches.vg-game .vg-btn.vg-btn-secondary:hover {
  border-color: var(--eg-accent) !important;
  background: var(--eg-accent-soft) !important;
}
.eg-matches.vg-game .vg-btn.vg-reset-stats {
  background: #ffffff !important;
  color: #555555 !important;
  -webkit-text-fill-color: currentColor !important;
  border-color: #cbd1c6 !important;
  font-weight: 400;
}
.eg-matches.vg-game :is(button, a, select, textarea):focus-visible {
  outline: 3px solid var(--vg-focus-color) !important;
  outline-offset: 3px !important;
}

/* Theme-aligned, accessible guide. The existing disclosure is the panel header,
   not a second copy of "How to play". No script or stored preference changes. */
.eg-matches.vg-game .vg-help-disclosure { margin-top: 14px; min-width: 0; }
.eg-matches.vg-game .vg-help-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  max-width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--eg-border-strong);
  border-radius: var(--vg-radius);
  background: var(--vg-help-paper) !important;
  color: var(--eg-accent-strong) !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: var(--eg-text-body);
  font-weight: var(--eg-weight-semibold);
  text-align: left;
  text-decoration: none;
  box-shadow: none !important;
  isolation: isolate;
  transition: background-color 140ms ease, border-color 140ms ease;
}
.eg-matches.vg-game .vg-help-toggle:hover {
  background: var(--eg-accent-soft) !important;
  color: var(--eg-accent-strong) !important;
  border-color: var(--eg-accent);
}
.eg-matches.vg-game .vg-help-toggle[aria-expanded="true"] {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  border: 1px solid var(--eg-accent);
  border-bottom: 2px solid var(--vg-leaf);
  border-radius: var(--vg-radius) var(--vg-radius) 0 0;
  background: var(--eg-accent) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
.eg-matches.vg-game .vg-help-toggle[aria-expanded="true"]::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--eg-pages-light, none) right -8px center / 120px no-repeat;
  pointer-events: none;
  content: "";
}
.eg-matches.vg-game .vg-help-toggle[aria-expanded="true"]:hover { background-color: var(--eg-accent-strong) !important; }
.eg-matches.vg-game .vg-help-chevron { margin-left: auto; }
.eg-matches.vg-game :is(.vg-help-icon, .vg-help-mode-icon, .vg-help-check) {
  display: block;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.eg-matches.vg-game .vg-help-panel {
  display: block;
  margin: 0;
  padding: 0;
  border: 1px solid var(--eg-border-strong);
  border-top: 0;
  border-radius: 0 0 var(--vg-radius) var(--vg-radius);
  background: var(--vg-help-paper);
  color: var(--eg-ink);
  box-shadow: none;
}
.eg-matches.vg-game .vg-help-copy {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  min-width: 0;
  padding: 16px;
}
.eg-matches.vg-game .vg-help-mode { min-width: 0; }
.eg-matches.vg-game .vg-help-mode + .vg-help-mode {
  margin-left: 16px;
  padding-left: 16px;
  border-left: 1px solid var(--eg-border-strong);
}
.eg-matches.vg-game .vg-help-label {
  color: var(--eg-accent-strong);
  font-size: var(--eg-text-body);
  font-weight: var(--eg-weight-semibold);
}
.eg-matches.vg-game .vg-help-mode-title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 6px;
}
.eg-matches.vg-game .vg-help-emphasis { font-weight: var(--eg-weight-semibold); }
.eg-matches.vg-game .vg-help-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 16px;
  padding: 12px 0;
  border-top: 1px solid var(--eg-border-strong);
}
.eg-matches.vg-game .vg-help-shared { flex: 1 1 18rem; min-width: 0; }
.eg-matches.vg-game .vg-btn.vg-help-dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-left: auto;
  min-height: 42px;
  padding: 8px 12px;
  border-radius: var(--vg-radius);
}

.eg-matches.vg-game .vg-controls {
  padding: 14px 0 0;
  gap: 12px;
}
.eg-matches.vg-game .vg-control { flex: 1 1 12rem; }
.eg-matches.vg-game .vg-topic,
.eg-matches.vg-game .vg-level {
  max-width: 100%;
  border: 1px solid var(--eg-border-strong);
  border-radius: 8px;
  min-height: 42px;
  box-shadow: none;
}

/* Keep the initial cue and Pause in their shared reserved slot. */
.eg-matches.vg-game .vg-round-meta {
  margin: 0 0 20px;
  padding: 10px 14px;
  border: 0;
  border-radius: 10px;
  background: var(--eg-surface);
}
.eg-matches.vg-game .vg-round-actions { gap: 8px; }
.eg-matches.vg-game .vg-timer {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 3.6em;
  padding: 4px 0;
  border-radius: 6px;
  font-variant-numeric: tabular-nums;
}
.eg-matches.vg-game .vg-timer::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border: 1.5px solid #758568;
  border-radius: 50%;
  background: transparent;
}
.eg-matches.vg-game[data-clock-state="running"] .vg-timer::before {
  background: var(--eg-accent);
  border-color: var(--eg-accent);
}
.eg-matches.vg-game .vg-status:not(.vg-status-sr-only) {
  padding: 8px 12px;
  border-left: 3px solid #b08b38;
  border-radius: 0 6px 6px 0;
  background: #fff8e8;
}
@keyframes eg-timer-activate {
  from { background-color: #dcebcf; }
  to { background-color: transparent; }
}

/* Quiet column labels and white cards remain the focus, not coloured banners. */
.eg-matches.vg-game .vg-board { gap: 10px; }
.eg-matches.vg-game .vg-rows { gap: 8px; }
.eg-matches.vg-game .vg-board-head > .vg-col-title {
  padding-block: 8px;
  border: 0;
  border-bottom: 2px solid #c9d5bc;
  border-radius: 7px;
  background: var(--eg-column-bg) !important;
  color: #333333 !important;
  -webkit-text-fill-color: #333333 !important;
  text-transform: none;
}
.eg-matches.vg-game .vg-card {
  background: #ffffff !important;
  border: 1px solid #bac5b2 !important;
  border-radius: 10px !important;
  color: #333333 !important;
  -webkit-text-fill-color: #333333 !important;
  justify-content: flex-start !important;
  text-align: left !important;
  box-shadow: 0 1px 2px rgba(35, 59, 23, 0.035) !important;
  opacity: 1 !important;
  transform: none;
  transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}
.eg-matches.vg-game .vg-card .vg-card-text {
  width: 100%;
  text-align: left !important;
  font-family: inherit !important;
  font-size: var(--eg-text-body) !important;
  font-weight: 400 !important;
  line-height: var(--eg-card-leading) !important;
}
/* Hover only on genuine hover pointers; no sticky phone hover or moving targets. */
.eg-matches.vg-game .vg-card:hover { transform: none; box-shadow: none !important; }
@media (hover: hover) and (pointer: fine) {
  .eg-matches.vg-game .vg-card:not(:disabled):not(.vg-is-disabled):not(.vg-is-selected):not(.vg-is-wrong):not(.vg-is-locked):hover {
    border-color: #7d9767 !important;
    background: #f8fbf5 !important;
    box-shadow: 0 2px 9px rgba(35, 59, 23, 0.10) !important;
  }
}
/* Warm selection is distinct from green success; the site uses gold accents too. */
.eg-matches.vg-game .vg-card.vg-is-selected,
.eg-matches.vg-game .vg-card.vg-is-selected:hover {
  background: #fff5d6 !important;
  border-color: #936716 !important;
  box-shadow: 0 0 0 2px rgba(181, 138, 34, 0.18) !important;
}
.eg-matches.vg-game .vg-card.vg-is-locked,
.eg-matches.vg-game .vg-card.vg-is-locked:hover {
  background: var(--vg-lock-bg) !important;
  border-color: var(--vg-lock-border) !important;
  box-shadow: none !important;
  opacity: 1 !important;
  cursor: default;
}
.eg-matches.vg-game .vg-card.vg-is-locked.vg-type-def::after {
  color: var(--eg-accent) !important;
  -webkit-text-fill-color: currentColor !important;
}
.eg-matches.vg-game .vg-join::before { background: #6f9255; }
.eg-matches.vg-game .vg-card.vg-is-wrong,
.eg-matches.vg-game .vg-card.vg-is-wrong:hover {
  background: #fff0ed !important;
  border-color: #b33d35 !important;
  box-shadow: 0 0 0 2px rgba(179, 61, 53, 0.12) !important;
}
.eg-matches.vg-game .vg-board-gate {
  background: var(--eg-surface);
  border-color: var(--eg-border-strong);
}

/* A distinct success moment, without adding a new heading/font scale. */
.eg-matches.vg-game .vg-finish-box {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  padding: 18px;
  border: 1px solid #bfd2ae;
  border-top: 4px solid var(--eg-accent);
  border-radius: 14px;
  background: #f0f6e9;
  box-shadow: 0 3px 12px rgba(35, 59, 23, 0.05);
}
.eg-matches.vg-game .vg-finish-title { color: var(--eg-accent-strong) !important; }
.eg-matches.vg-game .vg-finish-sub { line-height: 1.6; }
.eg-matches.vg-game .vg-finish-actions {
  width: 100%;
  justify-content: flex-start;
  gap: 8px;
}
.eg-matches.vg-game .vg-finish-practice { flex: 0 1 auto; }
.eg-matches.vg-game .vg-btn.vg-share-btn {
  background: var(--eg-accent) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-color: var(--eg-accent) !important;
}
.eg-matches.vg-game .vg-btn.vg-share-btn:hover { background: var(--eg-accent-strong) !important; }
/* Preserve 4.2.1: note is its own full-width, left-aligned row on every size. */
.eg-matches.vg-game .vg-replay-note {
  flex: 1 0 100%;
  width: 100%;
  text-align: left !important;
  padding: 0;
  margin: 0;
}
.eg-matches.vg-game .vg-share-menu { border-color: var(--eg-border); box-shadow: 0 8px 26px rgba(35, 59, 23, 0.14); }
.eg-matches.vg-game .vg-share-menu > .vg-share-copy,
.eg-matches.vg-game .vg-share-menu > .vg-share-email {
  color: var(--eg-accent-strong) !important;
  -webkit-text-fill-color: currentColor !important;
}
.eg-matches.vg-game .vg-share-menu > :is(a, button):hover {
  background: var(--eg-accent-soft) !important;
  border-color: var(--eg-border-strong) !important;
}
.eg-matches.vg-game .vg-confetti-piece:nth-child(3n+1) { background: #42682f !important; }
.eg-matches.vg-game .vg-confetti-piece:nth-child(3n+2) { background: #a9c454 !important; }
.eg-matches.vg-game .vg-confetti-piece:nth-child(3n) { background: #dec27d !important; }

/* The history and archive use the same green/neutral system as the board. */
.eg-matches.vg-game :is(.vg-stats-panel, .vg-archive-panel) {
  border-color: var(--eg-border);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 3px 14px rgba(35, 59, 23, 0.06);
  background: #ffffff;
}
.eg-matches.vg-game :is(.vg-stats-head, .vg-archive-head) {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--eg-border);
}
.eg-matches.vg-game :is(.vg-stats-title, .vg-archive-title, .vg-history-title) {
  color: var(--eg-accent-strong) !important;
}
.eg-matches.vg-game .vg-stat {
  background: var(--eg-surface);
  border: 0;
  border-radius: 9px;
  padding: 12px;
}
.eg-matches.vg-game .vg-stat:first-child { background: #eaf2e1; box-shadow: inset 0 3px 0 #7f9e5d; }
.eg-matches.vg-game .vg-stat-value { color: var(--eg-accent-strong) !important; }
.eg-matches.vg-game .vg-stat-label { font-weight: 400; }
.eg-matches.vg-game .vg-history { border-color: var(--eg-border); }
.eg-matches.vg-game .vg-history-head { flex-wrap: wrap; }
.eg-matches.vg-game .vg-daily-chart {
  background: linear-gradient(to top, transparent 24%, #e7ede1 25%, transparent 26%, transparent 49%, #e7ede1 50%, transparent 51%, transparent 74%, #e7ede1 75%, transparent 76%);
  grid-template-columns: repeat(14, minmax(24px, 1fr));
  overflow-x: auto;
}
.eg-matches.vg-game .vg-chart-bar { background: #edf1e8; }
.eg-matches.vg-game .vg-chart-fill { background: var(--eg-accent); }
.eg-matches.vg-game .vg-archive-list { gap: 8px; padding: 3px 4px; }
.eg-matches.vg-game .vg-archive-row { border-color: var(--eg-border); background: var(--eg-surface); border-radius: 9px; }
.eg-matches.vg-game .vg-archive-row:hover { border-color: var(--eg-border-strong); }
.eg-matches.vg-game .vg-history-empty { padding: 12px; border-radius: 8px; background: var(--eg-surface); }

/* Adapt to the actual embed width, not only the device viewport.
   The viewport fallback below also supports older engines. */
@container eg-matches (max-width: 460px) {
  .eg-matches.vg-game .vg-command-center { padding: 12px; }
  .eg-matches.vg-game .vg-date { flex: 1 0 100%; }
  .eg-matches.vg-game .vg-topbar-right { gap: 8px; }
  .eg-matches.vg-game .vg-mode-switch { margin-left: auto; }
  .eg-matches.vg-game .vg-round-meta { padding: 10px 12px; gap: 6px; }
  .eg-matches.vg-game .vg-round-actions { width: 100%; justify-content: flex-start; }
  .eg-matches.vg-game .vg-round-guidance { flex-basis: 0; }
  .eg-matches.vg-game .vg-help-panel { padding: 0; }
  .eg-matches.vg-game .vg-help-copy { flex-basis: 100%; }
  .eg-matches.vg-game :is(.vg-stats-panel, .vg-archive-panel, .vg-finish-box) { padding: 14px; }
}
@media (max-width: 460px) {
  .eg-matches.vg-game .vg-command-center { padding: 12px; }
  .eg-matches.vg-game .vg-date { flex: 1 0 100%; }
  .eg-matches.vg-game .vg-mode-switch { margin-left: auto; }
  .eg-matches.vg-game .vg-round-meta { padding: 10px 12px; }
  .eg-matches.vg-game .vg-help-panel { padding: 0; }
  .eg-matches.vg-game .vg-help-copy { flex-basis: 100%; }
  .eg-matches.vg-game :is(.vg-stats-panel, .vg-archive-panel, .vg-finish-box) { padding: 14px; }
}

@container eg-matches (max-width: 620px) {
  .eg-matches.vg-game .vg-help-copy { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  .eg-matches.vg-game .vg-help-mode + .vg-help-mode { margin: 12px 0 0; padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--eg-border-strong); }
  .eg-matches.vg-game .vg-help-foot { margin-inline: 12px; }
}
@media (max-width: 620px) {
  .eg-matches.vg-game .vg-help-copy { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  .eg-matches.vg-game .vg-help-mode + .vg-help-mode { margin: 12px 0 0; padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--eg-border-strong); }
  .eg-matches.vg-game .vg-help-foot { margin-inline: 12px; }
}

@container eg-matches (max-width: 300px) {
  .eg-matches.vg-game .vg-date { flex: 1 1 auto; }
  .eg-matches.vg-game .vg-mode-switch { flex: 1 0 100%; margin-left: 0; }
  .eg-matches.vg-game .vg-mode-btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .eg-matches.vg-game *, .eg-matches.vg-game *::before, .eg-matches.vg-game *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
@media (forced-colors: active) {
  .eg-matches.vg-game .vg-mode-btn.is-active { outline: 2px solid Highlight; outline-offset: -2px; }
  .eg-matches.vg-game .vg-card.vg-is-selected { outline: 3px solid Highlight !important; outline-offset: -3px; }
  .eg-matches.vg-game .vg-card.vg-is-locked { border: 2px solid ButtonText !important; }
  .eg-matches.vg-game .vg-chart-fill { background: Highlight; forced-color-adjust: none; }
}

/* EG Matches 4.3.2 compact top layout refinements */
.eg-matches.vg-game .vg-command-center {
  margin: 0 0 10px;
  padding: 12px;
}
.eg-matches.vg-game .vg-topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px 16px;
}
.eg-matches.vg-game .vg-instructions {
  flex: initial;
  min-width: 0;
}
.eg-matches.vg-game .vg-instructions-text {
  display: block;
  margin-bottom: 2px;
}
.eg-matches.vg-game .vg-intro-details {
  margin-top: 0;
}
.eg-matches.vg-game .vg-topbar-right {
  width: auto;
  min-width: 0;
  flex: initial;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding-top: 0;
  border-top: 0;
}
.eg-matches.vg-game .vg-date {
  margin-right: 8px;
  white-space: nowrap;
}
.eg-matches.vg-game .vg-help-disclosure {
  margin-top: 10px;
}
.eg-matches.vg-game .vg-help-toggle {
  min-height: 38px;
  padding: 6px 10px;
}
.eg-matches.vg-game .vg-help-panel {
  margin-top: 8px;
  border-top: 1px solid var(--eg-border-strong);
  border-radius: var(--vg-radius);
}
.eg-matches.vg-game .vg-help-copy {
  padding: 12px 14px;
  gap: 0;
}
.eg-matches.vg-game .vg-help-mode-title {
  margin: 0 0 4px;
}
.eg-matches.vg-game .vg-help-mode + .vg-help-mode {
  margin-left: 14px;
  padding-left: 14px;
}
.eg-matches.vg-game .vg-help-foot {
  margin: 0 14px;
  padding: 10px 0;
  gap: 10px;
}
.eg-matches.vg-game .vg-btn.vg-help-dismiss {
  min-height: 38px;
  padding: 7px 12px;
}
.eg-matches.vg-game .vg-round-meta {
  margin: 0 0 14px;
  padding: 10px 12px;
}
@media (max-width: 760px) {
  .eg-matches.vg-game .vg-command-center {
    padding: 10px;
  }
  .eg-matches.vg-game .vg-topbar {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  .eg-matches.vg-game .vg-topbar-right {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
  }
  .eg-matches.vg-game .vg-date {
    margin-right: auto;
  }
  .eg-matches.vg-game .vg-help-copy {
    grid-template-columns: minmax(0, 1fr);
    padding: 12px;
  }
  .eg-matches.vg-game .vg-help-mode + .vg-help-mode {
    margin: 12px 0 0;
    padding: 12px 0 0;
    border-left: 0;
    border-top: 1px solid var(--eg-border-strong);
  }
  .eg-matches.vg-game .vg-help-foot {
    margin-inline: 12px;
  }
}

/* 4.5.0: Rankings, beside the stats and the Daily archive and drawn like them. */
.eg-matches.vg-view-practice .vg-rank-btn { display: none !important; }
.eg-matches.vg-game .vg-rank-panel {
  border: 1px solid var(--eg-border);
  border-radius: 14px;
  background: #ffffff;
  padding: 18px;
  margin: 0 0 var(--eg-space-4);
  box-shadow: 0 3px 14px rgba(35, 59, 23, 0.06);
}
.eg-matches.vg-game .vg-rank-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--eg-space-3);
  margin-bottom: var(--eg-space-4);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--eg-border);
}
.eg-matches.vg-game .vg-rank-title {
  color: var(--eg-accent-strong) !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: var(--eg-text-heading);
  font-weight: var(--eg-weight-semibold);
  line-height: var(--eg-leading);
}
.eg-matches.vg-game .vg-rank-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  max-width: 100%;
  margin: 0 0 var(--eg-space-3);
  padding: 3px;
  border: 1px solid var(--eg-border-strong);
  border-radius: calc(var(--vg-radius) + 3px);
  background: var(--vg-help-paper);
}
.eg-matches.vg-game .vg-rank-tab {
  appearance: none;
  margin: 0;
  min-height: 36px;
  padding: 7px 13px;
  border: 0;
  border-radius: var(--vg-radius);
  background: transparent;
  box-shadow: none;
  color: var(--eg-ink-secondary) !important;
  -webkit-text-fill-color: currentColor !important;
  font: inherit;
  font-size: var(--eg-text-body);
  line-height: var(--eg-leading);
  text-transform: none;
  cursor: pointer;
}
.eg-matches.vg-game .vg-rank-tab:hover {
  background: var(--eg-accent-soft);
  color: var(--eg-accent-strong) !important;
}
.eg-matches.vg-game .vg-rank-tab.is-active {
  background: var(--eg-accent) !important;
  color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(35, 59, 23, 0.15);
}
.eg-matches.vg-game .vg-rank-list {
  display: grid;
  gap: 6px;
  margin: 0 0 var(--eg-space-3);
  padding: 0;
  list-style: none;
}
.eg-matches.vg-game .vg-rank-list:empty { display: none; }
.eg-matches.vg-game .vg-rank-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  padding: 9px 12px;
  border-radius: 9px;
  background: var(--eg-surface);
  color: var(--eg-ink) !important;
  font-size: var(--eg-text-body);
  line-height: var(--eg-leading);
}
.eg-matches.vg-game .vg-rank-pos {
  flex: 0 0 auto;
  min-width: 2.2em;
  color: var(--eg-accent-strong) !important;
  font-weight: var(--eg-weight-semibold);
  font-variant-numeric: tabular-nums;
}
.eg-matches.vg-game .vg-rank-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: var(--eg-weight-semibold);
}
.eg-matches.vg-game .vg-rank-figures {
  flex: 0 0 auto;
  color: var(--eg-ink-secondary) !important;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.eg-matches.vg-game :is(.vg-rank-empty, .vg-rank-place, .vg-rank-play, .vg-rank-signin, .vg-rank-label, .vg-rank-note) {
  margin: 0 0 var(--eg-space-3);
  color: var(--eg-ink-secondary) !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: var(--eg-text-body);
  line-height: var(--eg-leading);
}
.eg-matches.vg-game :is(.vg-rank-place, .vg-rank-label) {
  color: var(--eg-ink) !important;
  font-weight: var(--eg-weight-semibold);
}
.eg-matches.vg-game .vg-rank-label { display: block; margin-bottom: 6px; }
.eg-matches.vg-game .vg-rank-form { margin: 0 0 var(--eg-space-3); }
.eg-matches.vg-game .vg-rank-field { display: flex; flex-wrap: wrap; gap: 8px; }
.eg-matches.vg-game .vg-rank-input {
  box-sizing: border-box;
  flex: 1 1 12rem;
  min-width: 0;
  min-height: 42px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid var(--eg-border-strong);
  border-radius: var(--vg-radius);
  background: #ffffff;
  color: var(--eg-ink);
  font: inherit;
  font-size: 16px;
}
.eg-matches.vg-game .vg-rank-input:focus-visible { outline: 3px solid var(--vg-focus-color); outline-offset: 2px; }
.eg-matches.vg-game .vg-rank-input[aria-invalid="true"] { border-color: #b42318; }
.eg-matches.vg-game .vg-rank-save { flex: 0 0 auto; margin: 0; }
.eg-matches.vg-game .vg-rank-error {
  display: block;
  margin-top: 6px;
  color: #b42318 !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: var(--eg-text-body);
  line-height: var(--eg-leading);
}
.eg-matches.vg-game .vg-rank-error:empty { display: none; }
.eg-matches.vg-game .vg-rank-signin a { font-weight: var(--eg-weight-semibold); }
.eg-matches.vg-game .vg-rank-note { margin: 0; padding-top: 12px; border-top: 1px solid var(--eg-border); }
@media (max-width: 460px) {
  .eg-matches.vg-game .vg-rank-panel { padding: 14px; }
  /* The four tabs in two rows of two, never three and one. */
  .eg-matches.vg-game .vg-rank-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eg-matches.vg-game .vg-rank-tab { min-width: 0; padding: 7px 8px; white-space: nowrap; }
}

/* EG Matches 4.6.0: on a finished board, EG Site Core's Listen button beside each word or phrase,
   inside the word's cell on its right (the tick has the same place on the definition). The card
   keeps its look and fills the cell; its text stays clear of the button. */
.eg-matches.vg-game .vg-word-cell {
  position: relative;
  display: flex;
  min-width: 0;
}
.eg-matches.vg-game .vg-word-cell > .vg-card {
  flex: 1 1 auto;
  padding-right: 44px;
}
.eg-matches.vg-game .vg-word-cell > .egsc-listen {
  position: absolute;
  top: 50%;
  right: 6px;
  z-index: 2;
  margin: 0;
  transform: translateY(-50%);
}
/* On the card's green, the button's tint is a little deeper; its focus ring is the vocabulary
   lists' one (inside the round button), not the game's wider ring for its own controls. */
.eg-matches.vg-game .vg-word-cell > .egsc-listen:hover,
.eg-matches.vg-game .vg-word-cell > .egsc-listen.is-speaking {
  background: rgba(68, 105, 49, 0.12);
}
.eg-matches.vg-game .vg-word-cell > .egsc-listen:focus-visible {
  outline: 2px solid var(--eg-moss, #446931) !important;
  outline-offset: -2px !important;
  background: rgba(68, 105, 49, 0.12);
}
@media (max-width: 720px) {
  .eg-matches.vg-game .vg-word-cell > .vg-card { padding-right: 34px; }
  .eg-matches.vg-game .vg-word-cell > .egsc-listen { right: 1px; }
}