/* EG Matches 4.2.1 */

.eg-matches.vg-game {
  /* Diagnostic marker only; no visual effect. */
  --eg-css-build: 4.2.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-mode-badge, .vg-date, .vg-mode-btn,
    .vg-control-label, .vg-progress, .vg-timer, .vg-status, .vg-col-title,
    .vg-btn, .vg-stat-label, .vg-stats-table, .vg-share-menu,
    .vg-share-copy, .vg-share-ico, .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-mode-badge, .vg-control-label,
    .vg-col-title, .vg-btn, .vg-stat-label, .vg-share-copy, .vg-share-ico),
.eg-matches.vg-game .vg-stats-table th {
  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),
.eg-matches.vg-game .vg-stats-table td {
  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-stats-table, .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 belongs to Daily; statistics remain available in either mode. */
.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 badge + helper text (clarifies Daily vs Practice). */
.vg-mode-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(75, 100, 173, 0.12);
  color: #4b64ad !important;
  -webkit-text-fill-color: #4b64ad !important;
  white-space: nowrap;
}

.vg-view-practice .vg-mode-badge {
  background: rgba(17, 24, 39, 0.06);
  color: var(--eg-ink) !important;
  -webkit-text-fill-color: var(--eg-ink) !important;
}

.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);
}

.vg-row.vg-row-just-locked .vg-join::before {
  animation: vg-line-draw 420ms ease-out;
}

.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); }
}

@keyframes vg-line-draw {
  0%   { transform: scaleX(0.10); opacity: 0.15; }
  60%  { transform: scaleX(1.10); opacity: 1; }
  100% { transform: scaleX(1); opacity: 1; }
}

.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-table-wrap {
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 12px;
  overflow: hidden;
}

.vg-stats-table {
  width: 100%;
  border-collapse: collapse;
}

.vg-stats-table thead th {
  text-align: left;
  padding: 10px;

  color: var(--eg-ink);
  background: rgba(17, 24, 39, 0.03);
  border-bottom: 1px solid rgba(17, 24, 39, 0.08);
}

.vg-stats-table tbody td {
  padding: 9px 10px;
  border-bottom: 1px solid rgba(17, 24, 39, 0.06);
  color: var(--eg-ink);
}

.vg-stats-table tbody tr:last-child td {
  border-bottom: none;
}

.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);
}

.vg-share-copy.vg-copied {
  background: rgba(22, 163, 74, 0.14);
  border-color: rgba(22, 163, 74, 0.40);
  color: #065f46;
}

@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));
  }
  .vg-stats-table-wrap {
    overflow-x: auto;
  }
}

/* 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-stats-table-wrap { overflow-x: auto; }
.eg-matches .vg-stats-table { margin: 0; }
.eg-matches .vg-stats-table th, .eg-matches .vg-stats-table td { vertical-align: top; }
.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;
}
@keyframes eg-timer-activate {
  from { background-color: #e8edf7; }
  to { background-color: transparent; }
}
@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; }
}