/* ---- WORDSEARCH OVERRIDES (load after the original CSS) ---- */

/* Center layout via flex; remove legacy left offset.
   Also define a reusable width for the word list. */
#theGrid {
  --ws-list-width: 260px;          /* adjust if you want a wider/narrower list */

  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
  margin: 32px auto;
  max-width: 1100px;
  padding: 8px;
  box-sizing: border-box;
  margin-left: 0 !important;       /* overrides original margin-left:10px */
}

/* Neutralize plugin-era floats/margins so flex can lay things out cleanly. */
#rf-searchgamecontainer,
#rf-wordcontainer {
  float: none !important;
  position: static !important;
  margin: 0 !important;            /* removes old margin-right on grid, margins on list */
  padding-right: 0 !important;     /* removes old list padding-right */
}

/* Grid: enable horizontal scroll on narrow screens. */
#rf-searchgamecontainer {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;   /* smooth iOS scroll */
  max-width: 100%;
  padding-bottom: 6px;                 /* keep scrollbar off content */
  overscroll-behavior-x: contain;      /* nicer edge behavior on mobile */
}

/* Keep the table as wide as it needs so the container scrolls instead of squishing. */
#rf-tablegrid {
  border-collapse: collapse;
  margin: 0;
  width: max-content;
}
/* Fallback for older browsers that don't support max-content */
@supports not (width: max-content) {
  #rf-tablegrid { display: inline-block; }
}

/* Word list: consistent width + comfy padding so bullets don't touch border. */
#rf-wordcontainer {
  width: var(--ws-list-width);
  min-width: var(--ws-list-width);
  max-width: 90vw;                    /* protects very small phones */
  flex: 0 0 var(--ws-list-width);     /* fixed width in the flex row */
  box-sizing: border-box;

  text-align: left !important;        /* never center-align the list text */
  padding: 8px 12px !important;       /* adds inner space so bullets don't hug border */
}

/* Bullets: neat, consistent spacing. */
#rf-wordcontainer ul {
  margin: 0;
  padding-left: 0.9em;                /* modest indent from the border */
  list-style: disc;
  list-style-position: outside;
}
#rf-wordcontainer li { margin: 0.25em 0; }

/* Mobile cell sizing: shrink squares AND padding so the table fits sooner. */
@media (max-width: 420px) {
  #rf-tablegrid .rf-tgrid {
    width: 28px !important;
    height: 28px !important;
    padding: 2px 4px !important;      /* reduce from 4px 8px */
    font-size: 14px !important;
  }
}

/* When the list stacks below the grid on small screens:
   - let the grid occupy the full row for better scrolling
   - keep the list at its fixed width and center it */
@media (max-width: 600px) {
  #rf-searchgamecontainer { flex: 1 1 100%; }
  #rf-wordcontainer {
    flex: 0 0 var(--ws-list-width);
    margin: 8px auto 0;               /* centers the fixed-width list */
  }
  #rf-wordcontainer ul { padding-left: 0.75em; } /* slightly smaller indent */
}

/* Mobile swipe hint (add <div class="ws-hint">↔︎ Swipe to see the whole grid</div> inside #theGrid) */
.ws-hint {
  display: none;
  font-size: 12px;
  opacity: 0.75;
  text-align: center;
  margin-top: 6px;
}
/* If the hint is inside #theGrid (flex), make it span the full row */
#theGrid .ws-hint { flex: 1 1 100%; }
@media (max-width: 600px) {
  .ws-hint { display: block; }
}