/******************************************
 PuzzlesForMe — GLOBAL PUZZLE STYLES
******************************************/

/* Layout: puzzle left, ads right */

#pfm-puzzle {
    flex: 0 0 480px;
}

.pfm-ad-placeholder {
    border: 1px dashed #b3b3b3;
    border-radius: 10px;
    padding: 12px;
    text-align: center;
    font-size: 0.9rem;
    color: #666;
    background: #f7f7f7;
}
/******************************************
 PuzzlesForMe – PUZZLE INDEX STYLES
 Applied on /puzzles/ page
******************************************/

.pfm-index-wrapper {
    max-width: 900px;
    margin: 20px auto 40px auto;
    padding: 0 16px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Levels & types simple lists */
.pfm-index-level-list,
.pfm-index-type-list {
    list-style: none;
    padding-left: 0;
    margin: 4px 0 16px 0;
}

.pfm-index-level-list li,
.pfm-index-type-list li {
    margin-bottom: 4px;
}

.pfm-index-level-list a,
.pfm-index-type-list a {
    text-decoration: none;
    color: #1e88e5;
}

.pfm-index-level-list a:hover,
.pfm-index-type-list a:hover {
    text-decoration: underline;
}

/* Cards grid */
.pfm-index-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

/* One column on mobile, two columns on wider screens */
@media (min-width: 900px) {
    .pfm-index-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Puzzle index filter controls */
.pfm-index-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    margin: 10px 0 14px;
}

/* Puzzle index pagination */
.pfm-index-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin: 18px 0 8px;
}

.pfm-index-pagebtn {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,0.12);
    text-decoration: none;
}

.pfm-index-pagenum {
    font-size: 0.9rem;
    color: #111827;
}

.pfm-index-filter {
    font-size: 0.9rem;
    color: #111827;
}

.pfm-index-controls select {
    margin-left: 6px;
    padding: 6px 10px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.12);
    background: #fff;
    max-width: 240px;         /* prevent super-wide dropdown */
}

/* Keep option text from forcing huge width in some browsers */
.pfm-index-controls select option {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Individual puzzle card */
.pfm-index-card {
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,0.06);
    background: #ffffff;
    padding: 12px 14px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Top row: icon + title/badges */
.pfm-index-main {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pfm-index-icon {
    font-size: 1.8rem;
    flex: 0 0 auto;
}

.pfm-index-text {
    flex: 1 1 auto;
}

.pfm-index-title {
    display: inline-block;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 4px;
    text-decoration: none;
    color: #111827;
}

.pfm-index-title:hover {
    text-decoration: underline;
}

/* Badges under title */
.pfm-index-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pfm-index-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    line-height: 1.2;
}

.pfm-index-level {
    background: #e3f2fd;
    color: #0d47a1;
}

.pfm-index-type {
    background: #f3e5f5;
    color: #6a1b9a;
}

/* Meta row: status, last played, star */
.pfm-index-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: space-between;
    font-size: 0.8rem;
    color: #4b5563;
    border-top: 1px solid rgba(0,0,0,0.06);
    padding-top: 4px;
}

.pfm-index-status-label {
    font-weight: 600;
    margin-right: 2px;
}

.pfm-index-star-badge {
    background: #fff7e6;
    color: #92400e;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Make sure status text is black on your theme */
.pfm-index-card,
.pfm-index-card span,
.pfm-index-card a {
    color: #000;
}

/******************************************
 REMOVE WP HEADER / TITLE ON PUZZLE PAGES
******************************************/

body.puzzle-body .entry-title,
body.puzzle-body .generate-back-button,
body.puzzle-body .site-main > .inside-article > header,
body.puzzle-body .post-meta {
    display: none !important;
}

body.puzzle-body .inside-article,
body.puzzle-body .entry-content,
body.puzzle-body .site-main {
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/******************************************
 MAIN PUZZLE BOX STYLE
******************************************/

.pfm-maze {
  margin: 0;
  padding: 16px;
  border-radius: 16px;
  background: var(--pfm-bg, #fdfdfd);
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 4px 10px rgba(0,0,0,0.06);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/******************************************
 TOP BAR — Title left, timer + home right
******************************************/

.pfm-maze-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.pfm-maze-title {
    font-size: 1.05rem;
    margin: 0;
    font-weight: 600;
}

.pfm-maze-topright {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pfm-home-btn {
    background: none;
    border: none;
    font-size: 1.15rem;
    cursor: pointer;
    padding: 2px 4px;
}

.pfm-maze-timer {
    font-size: 0.9rem;
}

/******************************************
 INSTRUCTIONS WITH LISTEN BUTTON
******************************************/

.pfm-maze-header {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.pfm-maze-intro {
    margin: 0;
    font-size: 0.9rem;
}

.listen-btn {
    background: #eee;
    border: 1px solid #bbb;
    border-radius: 8px;
    padding: 4px 10px;
    cursor: pointer;
    font-size: 0.8rem;
    color: #000 !important;
}

.listen-btn:hover {
    background: #e2e2e2;
}

/******************************************
 MAZE + ARROWS SIDE-BY-SIDE LAYOUT
******************************************/

.pfm-maze-main-row {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 12px;
}

.pfm-maze-grid-wrapper {
    flex: 0 0 auto;
}

/******************************************
 GRID STYLING
******************************************/

.pfm-maze-grid {
    display: grid;
    /* Columns/rows are set dynamically in JS based on the level size.
       Cell size stays responsive via the --pfm-maze-cell CSS variable. */
    --pfm-maze-cell: 48px;
    gap: 4px;
    grid-auto-flow: row;
}

.pfm-maze-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 1.6rem;
    background: var(--pfm-cell-bg, #ffffff);
    border: 2px solid var(--pfm-cell-border, #cfd8dc);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.pfm-maze-cell:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

/******************************************
 ARROW BUTTONS
******************************************/

.pfm-maze-controls-col {
    flex: 0 0 auto;
}

.pfm-maze-controls {
    margin-bottom: 4px;
}

.pfm-maze-arrow-row {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-bottom: 6px;
}

.pfm-dir-btn {
    padding: 6px 10px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.08);
    background: var(--pfm-btn-bg, #ffffff);
    cursor: pointer;
    font-size: 1.3rem;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
    color: #000 !important;
}

.pfm-dir-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/******************************************
 MOVES DISPLAY
******************************************/

.pfm-maze-moves {
    font-size: 0.9rem;
    margin-bottom: 6px;
}

.pfm-maze-moves-sequence {
    font-size: 1.3rem;
    min-height: 30px;
    margin-top: 4px;
}

/******************************************
 ACTION BUTTONS (Run, Undo, Clear, New)
******************************************/

.pfm-maze-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.pfm-maze-actions button {
    padding: 6px 10px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.08);
    background: #ffffff;
    font-size: 0.85rem;
    cursor: pointer;
    color: #000 !important;
}

.pfm-maze-actions button:hover {
    background: #f2f2f2;
}

/******************************************
 STATUS / PATHS / GOLD STAR
******************************************/

.pfm-maze-status {
    min-height: 22px;
    font-size: 0.95rem;
}

.pfm-maze-paths {
    font-size: 0.95rem;
}

.pfm-maze-star {
    font-size: 1.4rem;
    margin-top: 4px;
}

/******************************************
 FEEDBACK SECTION + PUZZLE INDEX BUTTON
******************************************/

.pfm-maze-feedback {
    margin-top: 8px;
    border-top: 1px solid rgba(0,0,0,0.08);
    padding-top: 6px;
}

.pfm-maze-feedback-label {
    font-size: 0.9rem;
    margin-bottom: 4px;
}

.pfm-maze-feedback-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.pfm-maze-feedback-buttons button {
    padding: 4px 8px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.1);
    background: #fff;
    font-size: 0.8rem;
    cursor: pointer;
}

.pfm-index-btn {
    margin-left: auto;
    padding: 4px 10px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.1);
    font-size: 0.8rem;
    text-decoration: none;
    color: #000;
}
.pfm-index-btn:hover {
    background: #f2f2f2;
}

/******************************************
 THEMES (Forest / Pastel / Ocean / Space / Candy / Tropical)
******************************************/

.pfm-theme-forest {
  --pfm-bg: #e8f5e9;
  --pfm-cell-bg: #ffffff;
  --pfm-cell-border: #a5d6a7;
  --pfm-btn-bg: #f1f8e9;
}

.pfm-theme-pastel {
  --pfm-bg: #fce4ec;
  --pfm-cell-bg: #ffffff;
  --pfm-cell-border: #f48fb1;
  --pfm-btn-bg: #f8bbd0;
}

.pfm-theme-ocean {
  --pfm-bg: #e3f2fd;
  --pfm-cell-bg: #ffffff;
  --pfm-cell-border: #90caf9;
  --pfm-btn-bg: #bbdefb;
}

.pfm-theme-space {
  --pfm-bg: #1a237e;
  --pfm-cell-bg: #283593;
  --pfm-cell-border: #5c6bc0;
  --pfm-btn-bg: #3949ab;
  color: #e8eaf6;
}
.pfm-theme-space .pfm-maze-cell {
  color: #fff;
}

.pfm-theme-candy {
  --pfm-bg: #fff3e0;
  --pfm-cell-bg: #ffffff;
  --pfm-cell-border: #ffcc80;
  --pfm-btn-bg: #ffe0b2;
}

.pfm-theme-tropical {
  --pfm-bg: #e0f7fa;
  --pfm-cell-bg: #ffffff;
  --pfm-cell-border: #4dd0e1;
  --pfm-btn-bg: #b2ebf2;
}

/******************************************
 RESPONSIVE LAYOUT
******************************************/

@media (max-width: 600px) {
  .pfm-maze-grid {
      --pfm-maze-cell: 40px;
  }
}
/* Remove theme content width restrictions on puzzle pages */
body.puzzle-body .container,
body.puzzle-body .site-content,
body.puzzle-body .content-area,
body.puzzle-body .inside-article,
body.puzzle-body .entry-content {
    max-width: none !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
}

/* Make sure button text is black on puzzle pages */
body.puzzle-body button,
body.puzzle-body .pfm-dir-btn,
body.puzzle-body .pfm-maze-actions button,
body.puzzle-body .pfm-maze-feedback-buttons button {
    color: #000 !important;
}
/* FORCE FULL-WIDTH PUZZLE AREA */
.puzzle-wrapper {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important; /* removes auto-centering */
    padding: 0 !important;
}
.puzzle-body {
    margin: 0 !important;
    padding: 0 !important;
}
.fake-ad {
  width: 300px;
  height: 250px;
  background: #f2f2f2;
  border: 2px dashed #bbb;
  border-radius: 12px;
  font-size: 18px;
  color: #555;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 20px auto;
}
.pfm-maze-status-row {
  display: flex;
  align-items: center;
  gap: 12px;   /* space between text and button */
  margin: 6px 0;
}

.listen-btn {
  padding: 4px 8px;
  font-size: 14px;
}
.pfm-maze-feedback-buttons button {
  color: #000 !important;
}
.puzzle-topbar {
  display: none !important;
}

/* Puzzle fixed width */
#pfm-puzzle {
    flex: 0 0 480px;
}

/* Fake ad (temporary) */
.fake-ad {
    width: 300px;
    height: 250px;
    background: #f2f2f2;
    border: 2px dashed #bbb;
    border-radius: 12px;
    font-size: 18px;
    color: #555;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
@media (max-width: 1100px) {
  .fake-ad {
      margin-top: 20px;
  }
}
/* --- FINAL FULL-WIDTH FIX FOR PUZZLE PAGES --- */

/* center puzzle column */
#pfm-puzzle {
    flex: 0 0 500px; /* wider puzzle area */
    max-width: 500px;
}
/* === FINAL LAYOUT FOR PUZZLE + ADS === */

/* Center everything on the page */
.puzzle-wrapper {
    max-width: 1200px;          /* total width: left ad + puzzle + right ad */
    margin-left: auto;
    margin-right: auto;
}

/* Main puzzle column grows to fill the remaining space */
#pfm-puzzle {
    flex: 1 1 auto;
    min-width: 420px;           /* prevents it getting squished too much */
}
/* === FINAL PUZZLE + AD LAYOUT === */

/* Main puzzle column fills the remaining space */
#pfm-puzzle {
    flex: 1 1 auto;
    min-width: 420px;       /* stops it shrinking too much */
}
/* === SUPER SIMPLE LAYOUT — LEFT AD | PUZZLE | RIGHT AD =============== */

/* Puzzle takes all remaining space */
#pfm-puzzle {
    flex: 1 1 auto;
    min-width: 520px;   /* prevents puzzle collapse */
}
/******************************************
 PFM PUZZLE PAGE — 300px LEFT + RIGHT ADS
******************************************/

/* FULL WIDTH — remove theme container limits */
.pfm-puzzle-page .site-content,
.pfm-puzzle-page .content-area,
.pfm-puzzle-page .inside-article,
.pfm-puzzle-page .entry-content {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/******************************************
 MAIN LAYOUT: LEFT AD — PUZZLE — RIGHT AD
******************************************/

#pfm-puzzle-layout {
    display: flex;
    justify-content: space-between; /* ads fixed, puzzle stretches between */
    align-items: stretch;
    gap: 20px;
    width: 100%;
    box-sizing: border-box;
    padding: 0 10px; /* slight breathing room on small laptops */
    background: #eaf6e9; /* match the common green play surface vibe */
}

/* CENTRAL PUZZLE COLUMN: fill the space between the two 300px ads */
#pfm-puzzle {
    flex: 1 1 0;
    min-width: 0; /* allow shrinking without overflow */
}

/* Make the game surface expand to the full available middle width */
#pfm-puzzle .pfm-maze {
    width: 100% !important;
    max-width: 100% !important;
}
#pfm-puzzle .pfm-ooo,
#pfm-puzzle .pfm-np {
    max-width: 100% !important;
}

/******************************************
 300px AD COLUMNS
******************************************/

.pfm-ad-col {
    flex: 0 0 300px;      /* <-- the important part */
    max-width: 300px;
    min-width: 300px;
    box-sizing: border-box;
}

/******************************************
 OPTIONAL: Placeholder styling
******************************************/

.pfm-ad-placeholder {
    width: 100%;
    height: 600px; /* matches common Google 300×600 or 300×250 stacked */
    background: #f2f2f2;
    border: 1px dashed #999;
    border-radius: 8px;
    text-align: center;
    padding-top: 20px;
    color: #555;
    font-size: 0.9rem;
}

/******************************************
 MOBILE RESPONSIVE — hide side ads & center puzzle
******************************************/

/* Mobile behavior: keep ads on the sides. Portrait works fine. */
@media (max-width: 1000px) {
  #pfm-puzzle-layout {
    gap: 12px;
    padding: 0 6px;
  }

  .pfm-ad-col {
    flex: 0 0 300px;
    max-width: 300px;
    min-width: 300px;
  }
}

/* #pfm-rotate-hint removed — portrait mode works fine */
/* Level 6 – highlight start & goal tiles */
.pfm-np-start {
    background-color: #c8f7c5 !important;
    border-color: #4caf50 !important;
}

.pfm-np-goal {
    background-color: #fff3c0 !important;
    border-color: #ffca28 !important;
}
.pfm-start-tile {
    background: #b4f7b4 !important; /* light green */
    border-color: #4caf50 !important;
    font-weight: bold;
}

.pfm-goal-tile {
    background: #fff4b3 !important; /* soft gold */
    border-color: #ffca28 !important;
    font-weight: bold;
}
if (isStart) cell.textContent = "🟩";
if (isGoal) cell.textContent = "⭐";

/* Story Sums specific styling */

.pfm-ss-equation-wrap {
  margin: 8px 0 12px;
}

.pfm-ss-equation-label {
  font-size: 0.95rem;
  margin-bottom: 4px;
}

.pfm-ss-equation-box {
  min-height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.12);
  padding: 6px 10px;
  font-size: 1.3rem;
  background: #ffffff;
}

/* Tiles area */

.pfm-ss-tiles {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.pfm-ss-tile-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pfm-ss-tile-label {
  font-size: 0.85rem;
  font-weight: 500;
}

.pfm-ss-tile-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pfm-ss-tile-btn {
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.1);
  background: #ffffff;
  font-size: 0.95rem;
  cursor: pointer;
  color: #000 !important;
}

.pfm-ss-tile-btn:hover {
  background: #f2f2f2;
}

.pfm-ss-op-btn {
  font-weight: 600;
}

/* Keep it nice on small screens */
@media (max-width: 600px) {
  .pfm-ss-equation-box {
    font-size: 1.1rem;
  }
}
/* Number Pattern Detective */

.pfm-np-pattern-wrap,
.pfm-np-choices-wrap {
    margin: 8px 0 12px;
}

.pfm-np-label {
    font-size: 0.9rem;
    margin-bottom: 4px;
}

.pfm-np-pattern {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pfm-np-item {
    min-width: 36px;
    padding: 6px 10px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.12);
    background: #ffffff;
    text-align: center;
    font-size: 1.1rem;
}

.pfm-np-question {
    background: #fff8e1;
    border-color: #ffca28;
    font-weight: 600;
}

.pfm-np-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pfm-np-choice-btn {
    padding: 6px 12px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.1);
    background: #ffffff;
    font-size: 1rem;
    cursor: pointer;
    color: #000 !important;
}

.pfm-np-choice-btn:hover {
    background: #f2f2f2;
}
.pfm-progress-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 0.9rem;
}

.pfm-progress-table th,
.pfm-progress-table td {
    border: 1px solid #e5e7eb;
    padding: 6px 8px;
    text-align: left;
}

.pfm-progress-table th {
    background: #f9fafb;
    font-weight: 600;
}
/* ============================================
   Puzzle Level / Type archive layout
   ============================================ */

.pfm-tax-archive {
    max-width: 1100px;
    margin: 0 auto 40px;
    padding: 20px 0 40px;
}

.pfm-tax-header h1 {
    font-size: 2rem;
    margin-bottom: 0.25rem;
}

.pfm-tax-subtitle {
    margin-bottom: 1.5rem;
    color: #555;
    font-size: 0.95rem;
}

/* Center the pagination and make it neat */
.pfm-tax-pagination {
    margin: 30px 0;
    text-align: center;
}

.pfm-tax-pagination ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
}

.pfm-tax-pagination li a,
.pfm-tax-pagination li span {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,0.1);
    font-size: 0.85rem;
    text-decoration: none;
}

.pfm-tax-pagination li span.current {
    background: #0088cc;
    color: #fff;
    border-color: #0088cc;
}
/******************************************
 VISUAL PATTERN DETECTIVE (LEVEL 7)
******************************************/

.pfm-pattern-game {
  /* reuse the nice rounded box from other puzzles */
}

/* Row of pattern tiles */
.pfm-pattern-row {
  display: flex;
  gap: 8px;
  margin: 12px 0;
  flex-wrap: nowrap;
}

.pfm-pattern-slot {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  background: var(--pfm-cell-bg, #ffffff);
  border: 2px solid var(--pfm-cell-border, #cfd8dc);
}

.pfm-pattern-slot-empty {
  border-style: dashed;
  color: #999;
  font-size: 1.6rem;
}

/* Multiple-choice emoji buttons */
.pfm-pattern-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.pfm-pattern-choice-btn {
  min-width: 48px;
  min-height: 48px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: var(--pfm-btn-bg, #ffffff);
  font-size: 2rem;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.pfm-pattern-choice-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}

/* Status + progress */
.pfm-pattern-status {
  min-height: 22px;
  font-size: 0.95rem;
  margin-bottom: 4px;
}

.pfm-pattern-progress {
  font-size: 0.9rem;
  margin-bottom: 4px;
}

.pfm-pattern-star {
  font-size: 1.3rem;
  margin-bottom: 6px;
}

/* Action buttons under the pattern */
.pfm-pattern-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.pfm-pattern-actions button {
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #ffffff;
  font-size: 0.85rem;
  cursor: pointer;
  color: #000 !important;
}

.pfm-pattern-actions button:hover {
  background: #f2f2f2;
}

/* Slightly tighten layout on small screens */
@media (max-width: 600px) {
  .pfm-pattern-slot {
    width: 46px;
    height: 46px;
    font-size: 1.8rem;
  }

  .pfm-pattern-choice-btn {
    min-width: 42px;
    min-height: 42px;
    font-size: 1.8rem;
  }
}
.pfm-leaderboard,
.pfm-global-leaderboard {
    margin-top: 24px;
}

.pfm-leaderboard-title {
    font-size: 1.1rem;
    margin-bottom: 8px;
}

.pfm-leaderboard-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.pfm-leaderboard-table th,
.pfm-leaderboard-table td {
    padding: 6px 8px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    text-align: left;
}

.pfm-leaderboard-table th {
    font-weight: 600;
    background: rgba(0,0,0,0.02);
}

.pfm-leaderboard-me {
    background: rgba(255, 235, 59, 0.15); /* soft yellow highlight */
}

.pfm-leaderboard-you {
    margin-top: 6px;
    font-size: 0.9rem;
}
.pfm-friends-panel {
    max-width: 600px;
    margin: 0 auto 40px auto;
    padding: 16px 20px;
    border-radius: 12px;
    background: #f9fafb;
    border: 1px solid rgba(0,0,0,0.05);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.pfm-friends-mycode {
    margin-bottom: 12px;
}

.pfm-friend-code {
    display: inline-block;
    margin-left: 6px;
    padding: 4px 8px;
    border-radius: 999px;
    background: #e0f2fe;
    font-weight: 600;
}

.pfm-friends-hint {
    font-size: 0.85rem;
    color: #555;
    margin-top: 4px;
}

.pfm-friends-add input[type="text"] {
    margin: 6px 0;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid #ccc;
    max-width: 240px;
}

.pfm-friends-add button {
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid #0f766e;
    background: #14b8a6;
    color: #fff;
    cursor: pointer;
    font-size: 0.9rem;
}

.pfm-friends-add button:hover {
    background: #0f766e;
}

.pfm-friends-ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.pfm-friends-ul li {
    padding: 4px 0;
}

.pfm-friend-name {
    font-weight: 500;
}

.pfm-friend-code-small {
    margin-left: 6px;
    font-size: 0.8rem;
    color: #666;
}

.pfm-friends-separator {
    border: none;
    border-top: 1px solid rgba(0,0,0,0.06);
    margin: 14px 0;
}

.pfm-friends-alert {
    padding: 8px 10px;
    border-radius: 8px;
    margin-bottom: 10px;
    font-size: 0.9rem;
}

.pfm-friends-success {
    background: #dcfce7;
    border: 1px solid #4ade80;
}

.pfm-friends-error {
    background: #fee2e2;
    border: 1px solid #f87171;
}

.pfm-friends-warning {
    background: #fef9c3;
    border: 1px solid #facc15;
}

.pfm-friends-info {
    background: #e0f2fe;
    border: 1px solid #38bdf8;
}
/* =========================================
   Level 7 – Visual Pattern Detective layout
   Make this puzzle single-column and centered
   ========================================= */

#level7-visual-pattern .pfm-maze-main-row {
  display: flex;
  flex-direction: column;        /* stack pattern + controls */
  gap: 16px;
}

#level7-visual-pattern .pfm-maze-grid-wrapper {
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#level7-visual-pattern .pfm-maze-pattern-display {
  font-size: 2.4rem;
  margin-bottom: 8px;
}

#level7-visual-pattern .pfm-maze-question-label {
  font-weight: 600;
  margin-bottom: 8px;
}

#level7-visual-pattern .pfm-maze-options {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

#level7-visual-pattern .pfm-maze-controls-col {
  width: 100%;
}

#level7-visual-pattern .pfm-maze-moves {
  text-align: center;
  margin-bottom: 8px;
}

#level7-visual-pattern .pfm-maze-moves-sequence {
  font-weight: 600;
}

#level7-visual-pattern .pfm-maze-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}
/* ===============================
   Level 7 – Number Pattern Detective layout
   Make the controls sit below the pattern
   =============================== */

#level7-number-pattern .pfm-maze-main-row {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#level7-number-pattern .pfm-maze-grid-wrapper,
#level7-number-pattern .pfm-maze-controls-col {
  width: 100%;
}

#level7-number-pattern .pfm-maze-controls-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

#level7-number-pattern .pfm-maze-pattern-display {
  font-size: 1.4rem;
  margin-bottom: 0.75rem;
}

#level7-number-pattern .pfm-maze-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

#level7-number-pattern .pfm-pattern-option-btn {
  min-width: 3rem;
  padding: 0.4rem 0.75rem;
}
/* =========================================
   My Puzzles + Top Puzzle Heroes styling
   ========================================= */

.pfm-progress-table,
.pfm-heroes-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0 2.5rem;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.04);
    font-size: 0.95rem;
}

/* Header row */
.pfm-progress-table thead,
.pfm-heroes-table thead {
    background: #e3f2fd; /* soft blue */
}

.pfm-progress-table thead th,
.pfm-heroes-table thead th {
    padding: 0.85rem 1rem;
    text-align: left;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.8rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

/* Body cells */
.pfm-progress-table tbody td,
.pfm-heroes-table tbody td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    vertical-align: middle;
}

/* Zebra stripes */
.pfm-progress-table tbody tr:nth-child(odd),
.pfm-heroes-table tbody tr:nth-child(odd) {
    background: #fafbfd;
}

/* Hover effect */
.pfm-progress-table tbody tr:hover,
.pfm-heroes-table tbody tr:hover {
    background: #f1f7ff;
}

/* First column (numbers / puzzle titles) */
.pfm-progress-table tbody td:first-child,
.pfm-heroes-table tbody td:first-child {
    font-weight: 500;
}

/* Center numeric-ish columns a bit nicer */
.pfm-progress-table tbody td:nth-child(2),
.pfm-progress-table tbody td:nth-child(3),
.pfm-progress-table tbody td:nth-child(4),
.pfm-heroes-table tbody td:nth-child(1),
.pfm-heroes-table tbody td:nth-child(3),
.pfm-heroes-table tbody td:nth-child(4) {
    text-align: center;
}

/* Links to puzzles inside the table */
.pfm-progress-table a,
.pfm-heroes-table a {
    color: #1565c0;
    text-decoration: none;
    font-weight: 500;
}

.pfm-progress-table a:hover,
.pfm-heroes-table a:hover {
    text-decoration: underline;
}

/* Make the whole "My Puzzles" area breathe a bit more */
body .entry-content h2 {
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

/* Smaller screens: allow horizontal scroll instead of breaking layout */
@media (max-width: 768px) {
    .pfm-progress-table,
    .pfm-heroes-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        font-size: 0.9rem;
    }
}