/* =============================================================================
   ThriveChamp — mind.css  (CLEAN)
   Styles for the Mind card (accordion + puzzle UIs)
   ========================================================================== */


/* ============================================================================
   1) MIND ACCORDION (row + floating panel)
   ========================================================================== */

/* Stack of rows */
.mind-acc{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:12px;
  margin-top:10px;
  overflow:visible; /* let the ground-oval render */
  width:100%;
  min-width:0;
  max-width:100%;
}

.card.mind .mind-subhead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:2px 0 6px;
}

.card.mind .mind-subhead .muted{
  margin:0;
}

.card.mind .mind-share-btn{
  width:26px;
  height:26px;
  min-width:26px;
  min-height:26px;
  aspect-ratio:1 / 1;
  padding:0;
  border-radius:999px;
  box-sizing:border-box;
  appearance:none;
  -webkit-appearance:none;
  border:1px solid rgba(49, 114, 173, .34);
  background:linear-gradient(180deg, rgba(205, 234, 255, .88) 0%, rgba(138, 200, 244, .84) 100%);
  color:#1f5f92;
  font-size:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 2px 5px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.6);
  cursor:pointer;
  flex:0 0 auto;
  margin-right:3px;
}

.card.mind .mind-share-btn::before{
  content:"";
  display:block;
  width:14px;
  height:14px;
  transform:translateX(-1px);
  background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cline x1='8.2' y1='11.2' x2='15.8' y2='6.7' stroke='%231f5f92' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='8.2' y1='12.8' x2='15.8' y2='17.3' stroke='%231f5f92' stroke-width='2.2' stroke-linecap='round'/%3E%3Ccircle cx='6' cy='12' r='3.1' fill='%231f5f92'/%3E%3Ccircle cx='18' cy='5' r='3.1' fill='%231f5f92'/%3E%3Ccircle cx='18' cy='19' r='3.1' fill='%231f5f92'/%3E%3C/svg%3E");
}

.card.mind .mind-share-btn:not([disabled]):hover{
  border-color:rgba(37, 99, 167, .42);
  background:linear-gradient(180deg, rgba(214, 240, 255, .96) 0%, rgba(152, 211, 249, .9) 100%);
}

.card.mind .mind-share-btn:focus-visible{
  outline:2px solid rgba(59, 130, 246, .55);
  outline-offset:2px;
}

.card.mind .mind-share-btn:active{
  transform:translateY(1px);
}

.card.mind .mind-share-btn[disabled]{
  opacity:.42;
  cursor:not-allowed;
  filter:saturate(.72);
  box-shadow:0 1px 3px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.45);
}

/* Toggle row */
.mind-row{
  box-sizing:border-box;
  display:flex; align-items:center; gap:12px; width:100%;
  min-width:0;
  max-width:100%;
  padding:12px 14px; border-radius:12px; cursor:pointer; text-align:left;

  border:none; background:var(--mind-row);

  font:800 16px/1 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;

  -webkit-appearance:none; appearance:none; background-image:none;
  -webkit-tap-highlight-color:transparent;

  position:relative; transform:translateY(var(--acc-lift));
  box-shadow:var(--acc-row-shadow); z-index:1;

  transition: box-shadow .18s ease, transform .12s ease, background-color .12s ease;

  /* Quick win: ensure good contrast on pastel rows */
  color:#0f172a;
}

/* Hover (desktop) */
@media (hover:hover) and (pointer:fine){
  .mind-row[aria-expanded="false"]:hover{
    background: var(--mind-row-hover, var(--mind-row));
    box-shadow: var(--acc-row-shadow-strong);
  }
}

/* Open state */
.mind-row[aria-expanded="true"]{
  background: var(--mind-row-open);
  box-shadow: var(--acc-row-shadow-strong);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* Focus ring */
.mind-row:focus-visible{
  outline:2px solid var(--pill-focus-ring);
  outline-offset:3px; border-radius:12px;
}

/* Ground oval under row */
.mind-row::before{
  content:"";
  position:absolute; left:var(--acc-ground-inset); right:var(--acc-ground-inset);
  bottom:-9px; height:var(--acc-ground-spread); pointer-events:none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.18), rgba(0,0,0,0) 70%);
  filter:blur(5px); opacity:var(--acc-ground-opacity); z-index:0;
}

/* Internals */
.mind-row .label{ flex:1; }
.mind-row .row-right{ display:flex; align-items:center; gap:8px; }
.mind-row .chev{ font-size:18px; line-height:1; user-select:none; }

/* Pass/Fail badge (JS toggles .pending/.pass/.fail) */
.row-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:999px;
  font:900 12px/1 system-ui; box-shadow:0 1px 4px rgba(0,0,0,.15); user-select:none;
}
.row-badge.pending{ display:none; }
.row-badge.pass{ background:#16a34a; color:#fff; }
.row-badge.fail{ background:#ef4444; color:#fff; }

/* Panel below each row */
.card.mind .panel-acc{
  box-sizing:border-box;
  background:#fff; border:none; border-radius:12px; padding:10px 12px;
  width:100%;
  min-width:0;
  max-width:100%;
  position:relative; transform:translateY(var(--acc-lift));
  box-shadow:var(--acc-row-shadow);
  overflow:visible;
  transition: box-shadow .18s ease, transform .12s ease;
}
.mind-row[aria-expanded="true"] + .panel-acc:not([hidden]){
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin-top: -13px; /* 12px grid gap + 1px seam overlap */
  border-top: 1px solid rgba(0,0,0,.10);
  padding-top: 0;
}
.card.mind .panel-acc:hover{ box-shadow:var(--acc-row-shadow-strong); }

/* Minimal leaderboard ad slot inside puzzle accordions */
.card.mind .mind-ad-slot{
  box-sizing:border-box;
  display:flex;
  justify-content:center;
  align-items:center;
  width:min(320px, 100%);
  min-width:0;
  max-width:100%;
  height:50px;
  margin:7px 0 5px;
  margin-inline:auto;
  background:#fff;
  border:1px solid #e2e6ef;
  border-radius:6px;
  overflow:hidden;
}

.card.mind .mind-ad-slot ins{
  box-sizing:border-box;
  display:inline-block;
  width:100% !important;
  max-width:320px;
  height:50px !important;
}

.card.mind .mind-ad-label{
  margin:4px 0 22px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  text-align:center;
  line-height:1.1;
  font-size:13px;
  color:var(--muted);
  font-weight:400;
  letter-spacing:0;
  text-transform:none;
}
.card.mind .mind-ad-label::after{
  content:"";
  display:block;
  width:min(260px, 76%);
  height:1px;
  background:rgba(100,116,139,.28);
}


/* Per-panel backgrounds (overrides default panel bg) */
#panel-trivia.panel-acc{     background: #e7faff; } /* peachy */
#panel-crossword.panel-acc{  background: #fffbed; } /* warm yellow */
#panel-sudoku.panel-acc{     background: #f7fff4; } /* soft green */
#panel-wordsearch.panel-acc{ background: #fbf5ff; } /* lilac */
#panel-logic.panel-acc{      background: #fffafb; } /* pale blue */

/* Ground oval under panel */
.card.mind .panel-acc::before{
  content:"";
  position:absolute; left:calc(var(--acc-ground-inset) - 2px); right:calc(var(--acc-ground-inset) - 2px);
  bottom:-10px; height:calc(var(--acc-ground-spread) + 2px); pointer-events:none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.16), rgba(0,0,0,0) 70%);
  filter:blur(6px); opacity:var(--acc-ground-opacity); z-index:0;
}

/* Keep content above ground ovals */
.mind-row > *, .panel-acc > *{ position:relative; z-index:1; }

/* Panels that need visible overflow */
#panel-crossword.panel-acc,
#panel-sudoku.panel-acc{ overflow:visible !important; }

/* Prevent horizontal bleed on narrow devices while keeping vertical effects */
#panel-crossword.panel-acc,
#panel-sudoku.panel-acc,
#panel-wordsearch.panel-acc,
#panel-logic.panel-acc{
  overflow-x: clip !important;
}

/* Guard rails so puzzle wrappers never exceed panel width */
#mindCard .cw-inline,
#mindCard .cw-left,
#mindCard .cw-grid,
#mindCard .cw-kbd,
#mindCard .sd-inline,
#mindCard .sd-grid,
#mindCard .sd-kbd,
#mindCard .ws-wrap,
#mindCard .ws-grid,
#mindCard .ws-words,
#mindCard .lg-wrap,
#mindCard .lg-grid,
#mindCard .lg-choices{
  min-width:0;
  max-width:100%;
}

/* Utilities */
[hidden]{ display:none !important; }
#mindCard,
#mindCard .mind-acc,
#mindCard .mind-row,
#mindCard .panel-acc,
#mindCard .mind-ad-slot,
#mindCard .fake-ad,
#mindCard [id$="UI"],
#mindCard .cw-inline,
#mindCard .cw-left,
#mindCard .cw-grid,
#mindCard .cw-kbd,
#mindCard .sd-inline,
#mindCard .sd-grid,
#mindCard .sd-kbd,
#mindCard .ws-wrap,
#mindCard .ws-grid,
#mindCard .ws-words,
#mindCard .lg-wrap,
#mindCard .lg-grid,
#mindCard .lg-choices{
  box-sizing:border-box;
}

#mindCard, #mindCard .mind-acc, #mindCard .panel-acc{ overflow-anchor:none; }
.mind-row{ scroll-margin-top: var(--sticky-offset); }
.mind-row:active{ background: var(--mind-row-hover, var(--mind-row)); }



/* ============================================================================
   1A) MICRO-POLISH — motion + icon consistency (zero layout shifts)
   ========================================================================== */

/* Chevron spin on open */
.mind-row .chev{ transition: transform .18s ease; }
.mind-row[aria-expanded="true"] .chev{ transform: rotate(180deg); }

/* Slight breathing room on the right controls */
.mind-row .row-right{ padding-right:2px; }

/* Prevent icon/image squish and keep text as the flex grower */
.mind-row > * { flex-shrink:0; }
.mind-row .label{ flex:1 1 auto; }
.mind-row svg, .mind-row img{ width:20px; height:20px; display:block; }

/* Mobile: tone down stacked ground-ovals slightly */
@media (hover:none){
  .card.mind{ --acc-ground-opacity:.30; }
}


/* ============================================================================
   2) PUZZLES — TRIVIA (tv-*), CROSSWORD (cw-*), SUDOKU (sd-*), WORDSEARCH (ws-*)
   ========================================================================== */

/* Trivia */
.tv-q{
  margin:10px 0; padding:10px; border-radius:12px; position:relative;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
  border-left:6px solid var(--cat, #94a3b8); background: var(--catBg, #fff);
}
.tv-cat{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; font:900 12px/1 system-ui; letter-spacing:.02em;
  text-transform:uppercase; color:#fff; border-radius:999px;
  background: var(--cat,#475569); margin-bottom:8px;
}
.tv-opt{ display:block; margin:6px 0; padding:6px 8px; border-radius:8px; }
.tv-opt.correct{ outline:2px solid #16a34a; }
.tv-opt.wrong{   outline:2px solid #ef4444; }
@media (hover:hover){ .tv-opt:hover{ background:#f1f5f9; } }
/* categories */
.tv-q[data-cat="history"]     { --cat:#B45309; --catBg:#FFF7ED; }
.tv-q[data-cat="geography"]   { --cat:#047857; --catBg:#ECFDF5; }
.tv-q[data-cat="science"]     { --cat:#0EA5E9; --catBg:#E0F2FE; }
.tv-q[data-cat="literature"]  { --cat:#7C3AED; --catBg:#F3E8FF; }
.tv-q[data-cat="pop_culture"] { --cat:#DB2777; --catBg:#FCE7F3; }
.tv-q[data-cat="sports"]      { --cat:#16A34A; --catBg:#DCFCE7; }

/* Crossword */
.cw-inline{ display:grid; grid-template-columns:1fr; gap:12px; align-items:start; max-width:100%; }
.cw-grid{
  --size:5; --tile:var(--cw-tile);
  display:grid; grid-template-columns:repeat(var(--size), var(--tile)); grid-auto-rows:var(--tile);
  gap:2px; width:max-content; max-width:100%; background:#d9d9df; padding:2px; border-radius:8px;
}
.cw-cell{
  position:relative; background:#fff; border-radius:4px;
  font:700 18px/1 system-ui; display:flex; align-items:center; justify-content:center;
  user-select:none; cursor:pointer;
  transition: background-color .12s ease, box-shadow .12s ease, transform .02s ease;
}
.cw-cell.black{ background:#22242a; cursor:default; }
.cw-cell .num{ position:absolute; top:3px; left:4px; font:600 10px/1 system-ui; color:#3b3f4a; opacity:.95; }
.cw-cell.in-word:not(.black){ background:#eef4ff; }
.cw-cell.selected:not(.black){ outline:2px solid #3b82f6; outline-offset:-2px; box-shadow: inset 0 0 0 2px #3b82f6; }
.cw-cell:active:not(.black){ transform: translateY(0.5px); }
.cw-status{ margin:8px 0 2px; display:flex; align-items:center; gap:8px; }
.cw-active-clue{ font-weight:600; color:#2f3340; }
.cw-status .mind-timer{ margin-left:auto; }
.mind-timer{
  display:inline-block;
  min-width:52px;
  text-align:right;
  font:600 13px/1 system-ui;
  color:#1f2937;
  font-variant-numeric: tabular-nums;
  letter-spacing:0.02em;
}
.cw-kbd{ margin-top:6px; user-select:none; display:inline-block; }
.cw-kbd .row{ display:flex; gap:6px; margin-bottom:6px; justify-content:center; flex-wrap:nowrap; }
.cw-kbd .k{
  box-sizing:border-box; border:1px solid #cfd3dc; background:#fff; border-radius:8px;
  min-width:32px; height:36px; padding:0 10px; font:700 13px/36px system-ui; text-align:center;
  box-shadow:0 1px 0 rgba(17,24,39,.05); cursor:pointer;
  transition: background-color .12s ease, border-color .12s ease, transform .02s ease;
}
.cw-kbd .k:hover{ background:#f3f4f6; border-color:#b6bcc9; }
.cw-kbd .k:active{ transform: translateY(1px); }
.cw-kbd .k.wide{ min-width:60px; }
#panel-crossword .cw-cell.solved:not(.black){
  background:#e6ffed; border-color:#b7e3c0; color:#0f5132;
}

/* Sudoku */
.sd-inline{ display:flex; flex-direction:column; align-items:center; gap:12px; max-width:100%; }
.sd-toolbar{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.sd-grid{
  --size:6;
  width:min(100%, var(--sdk-max)); margin:0 auto;
  display:grid; grid-template-columns:repeat(var(--size), 1fr);
  gap:0; background:#d9d9df; padding:0; border-radius:8px;
}
.sd-cell{
  position:relative; aspect-ratio:1/1; background:#fff; border:1px solid #d9d9df; border-radius:0;
  font:700 18px/1.1 system-ui; display:flex; align-items:center; justify-content:center;
  user-select:none; cursor:pointer;
  transition: background-color .12s ease, box-shadow .12s ease, transform .02s ease, outline-color .12s ease;
}
.sd-cell.given{   background:var(--sdk-given-bg); color:var(--sdk-given-text); cursor:default; }
.sd-cell.selected{ outline:2px solid #3b82f6; outline-offset:-2px; }
.sd-cell.conflict{ outline:2px solid #ef4444; outline-offset:-2px; }
.sd-cell.solved{  background:#ecfdf5; color:#065f46; }
.sd-cell.box-top{    border-top-width:3px;    border-top-color:#1f2937; }
.sd-cell.box-left{   border-left-width:3px;   border-left-color:#1f2937; }
.sd-cell.box-bottom{ border-bottom-width:3px; border-bottom-color:#1f2937; }
.sd-cell.box-right{  border-right-width:3px;  border-right-color:#1f2937; }
.sd-status{ margin:6px 0 2px; display:flex; align-items:center; gap:8px; }
.sd-active-hint{ font-weight:600; color:#2f3340; }
.sd-kbd{ --sdk-key-count:7; width:min(100%, var(--sdk-max)); margin:6px auto 0; user-select:none; display:block; }
.sd-kbd .row{
  display:grid;
  grid-template-columns:repeat(var(--sdk-key-count), minmax(0, 1fr));
  gap:6px;
  align-items:stretch;
}
.sd-kbd .k{
  box-sizing:border-box; border:1px solid #cfd3dc; background:#fff; border-radius:8px;
  width:100%; min-width:0; height:40px; padding:0 6px;
  font:700 14px/40px system-ui; text-align:center; box-shadow:0 1px 0 rgba(17,24,39,.05);
  cursor:pointer; transition: background-color .12s ease, border-color .12s ease, transform .02s ease;
}
.sd-kbd .k.wide{ flex:1.35 1 0; }
.sd-kbd .k:hover{ background:#f3f4f6; border-color:#b6bcc9; }
.sd-kbd .k:active{ transform: translateY(1px); }

/* Word Search */
.ws-wrap{ display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap; }
.ws-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.ws-head .k{ margin:0; }
.ws-words{
  min-width:200px; background:#fff; border-radius:12px;
  box-shadow:0 2px 8px rgba(0,0,0,.05); padding:10px;
}
.ws-words li.found{ text-decoration:line-through; color:#16a34a; }
.ws-grid{ border-collapse:collapse; }
.ws-grid td{
  width:28px; height:28px; text-align:center;
  border:1px solid rgba(0,0,0,.15); font-weight:800;
  background:#ffffff90; cursor:pointer; user-select:none;
}
.ws-grid td.sel{   background:#dbeafe; }
.ws-grid td.found{ background:#bbf7d0; }
@media (min-width:421px){ .ws-words ul{ columns:1; column-gap:0; } }
@media (max-width:420px){
  .ws-wrap{ flex-direction:column; gap:12px; }
  .ws-grid{ margin-inline:auto; max-width:100%; }
  .ws-words{ width:100%; } .ws-words ul{ columns:1; }

  #mindCard #panel-wordsearch .ws-wrap{
    width:100%;
    min-width:0;
    flex-direction:column;
    gap:12px;
  }

  #mindCard #panel-wordsearch .ws-grid{
    table-layout:fixed;
    width:100%;
    max-width:100%;
    margin-inline:auto;
  }

  #mindCard #panel-wordsearch .ws-grid td{
    width:auto;
    height:clamp(20px, 8vw, 28px);
    font-size:clamp(13px, 4vw, 17px);
    padding:0;
  }

  #mindCard #panel-wordsearch .ws-words{
    width:100%;
    min-width:0;
  }

  #mindCard #panel-sudoku .sd-kbd{
    width:min(100%, var(--sdk-max), calc(100vw - 88px));
    max-width:100%;
  }

  #mindCard #panel-sudoku .sd-grid{
    width:min(100%, var(--sdk-max), calc(100vw - 88px));
    max-width:100%;
  }

  #mindCard #panel-sudoku .sd-cell{
    font-size:clamp(14px, 4vw, 18px);
  }

  #mindCard #panel-sudoku .sd-kbd .row{
    gap:4px;
  }

  #mindCard #panel-sudoku .sd-kbd .k{
    padding:0 6px;
    font-size:13px;
  }
}

@media (max-width:420px){
  .ws-grid{ table-layout:fixed; width:100%; }
  .ws-grid td{ width:clamp(20px, 8vw, 28px); height:clamp(20px, 8vw, 28px); }
}

@media (max-width:420px){
  #mindCard .panel-acc{
    padding-left:10px;
    padding-right:10px;
  }

  #mindCard #panel-logic,
  #mindCard #panel-logic #logicUI{
    --lg-max:min(270px, calc(100vw - 100px)) !important;
    --lg-opt:clamp(56px, 18vw, 70px) !important;
  }

  #mindCard #panel-logic .lg-choices{
    width:100%;
    max-width:100%;
  }
}

@media (max-width:380px){
  #mindCard #panel-sudoku .sd-grid,
  #mindCard #panel-sudoku .sd-kbd{
    width:min(100%, var(--sdk-max), calc(100vw - 104px));
  }

  #mindCard #panel-sudoku .sd-kbd .row{
    gap:3px;
  }

  #mindCard #panel-sudoku .sd-kbd .k{
    height:36px;
    padding:0 4px;
    font-size:12px;
    line-height:36px;
  }
}


/* ============================================================================
   3) LOGIC (lg-*) — responsive grid + compact answers
   ========================================================================== */

#panel-logic.panel-acc { overflow:visible !important; }

#panel-logic{
  --lg-gap: 10px;
  --lg-max: 270px;   /* grid width clamp */
  --lg-opt: 70px;    /* answer tile size */
}
.lg-wrap{ display:grid; gap:12px; justify-items:center; }

.lg-grid{
  width:min(100%, var(--lg-max));
  display:grid; grid-template-columns:repeat(var(--lg-cols,3), 1fr);
  gap:var(--lg-gap);
  background:#e5e7eb80; padding:8px; border-radius:12px;
}
.lg-cell{
  aspect-ratio:1/1; border-radius:12px;
  background:#fff; border:1px solid rgba(0,0,0,.12);
  display:flex; align-items:center; justify-content:center;
}
.lg-cell svg{ width:82%; height:82%; display:block; }

.lg-cell.missing{ background:#f3f4f6; color:#64748b; font-weight:800; }

.lg-grid.solved .lg-cell{
  background:#ecfdf5; border-color:#86efac; color:#065f46;
}

.lg-choices{
  display:flex; flex-wrap:wrap; gap:var(--lg-gap);
  align-items:center; justify-content:center;
}
.lg-opt{
  width:var(--lg-opt); height:var(--lg-opt);
  border-radius:10px; background:#fff; border:1px solid rgba(0,0,0,.16);
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; user-select:none;
  transition: transform .05s ease, background-color .12s ease, border-color .12s ease;
  -webkit-appearance:none; appearance:none;
}
.lg-opt .lg-cell{ width:100%; height:100%; }
.lg-opt > svg{ width:80%; height:80%; display:block; }
.lg-opt:active{ transform:translateY(1px); }
.lg-opt.correct{ background:#dcfce7; border-color:#16a34a; color:#065f46; }
.lg-opt.wrong{   background:#fee2e2; border-color:#ef4444; color:#7f1d1d; }
.lg-opt:disabled{ opacity:.6; cursor:default; }

.lg-why{ width:min(100%, var(--lg-max)); margin-top:2px; }
.lg-why > summary{ cursor:pointer; font-weight:700; }
.lg-why[open]{ background:#f8fafc; border-radius:8px; padding:8px; }
.lg-why-txt{ margin-top:6px; color:#334155; }


/* ============================================================================
   4) MIND — THEME TOKENS + PER-KIND MAPPINGS (colors + optional borders)
   Base rows read:
     --mind-row        (closed)
     --mind-row-hover  (hover/active)
     --mind-row-open   (open)
   Optional border hooks:
     --mind-row-border / --mind-row-border-hover / --mind-row-border-open
   ========================================================================== */

/* Tokens (edit these to recolor) */
:root{
  /* Trivia */
  --mind-trivia-closed:#8accf1;
  --mind-trivia-hover:#8accf1;
  --mind-trivia-open:#8accf1;
  --mind-trivia-border:#3689b3;

  /* Crossword */
  --mind-crossword-closed:#f0d27f;
  --mind-crossword-hover:#f0d27f;
  --mind-crossword-open:#f0d27f;
  --mind-crossword-border:#aeaf57;

  /* Sudoku */
  --mind-sudoku-closed:#8eeebe;
  --mind-sudoku-hover:#8eeebe;
  --mind-sudoku-open:#8eeebe;
  --mind-sudoku-border:#52c07a;

  /* Word Search */
  --mind-wordsearch-closed:#c697f1;
  --mind-wordsearch-hover:#c697f1;
  --mind-wordsearch-open:#c697f1;
  --mind-wordsearch-border:#926cb6;

  /* Logic */
  --mind-logic-closed:#eb8f94;
  --mind-logic-hover:#eb8f94;
  --mind-logic-open:#eb8f94;
  --mind-logic-border:#c56367;
}

/* Per-kind variables → consumed by .mind-row above */
.mind-row[data-kind="trivia"]{
  --mind-row:var(--mind-trivia-closed);
  --mind-row-hover:var(--mind-trivia-hover);
  --mind-row-open:var(--mind-trivia-open);
  /* Optional borders:*/
  --mind-row-border:.5px solid var(--mind-trivia-border);
  --mind-row-border-hover:.5px solid color-mix(in oklab, var(--mind-trivia-border), #3689b3 10%);
  --mind-row-border-open:.5px solid color-mix(in oklab, var(--mind-trivia-border), #3689b3 15%);
  */
}
.mind-row[data-kind="crossword"]{
  --mind-row:var(--mind-crossword-closed);
  --mind-row-hover:var(--mind-crossword-hover);
  --mind-row-open:var(--mind-crossword-open);
  /* Optional borders:*/
  --mind-row-border:.5px solid var(--mind-crossword-border);
  --mind-row-border-hover:.5px solid color-mix(in oklab, var(--mind-trivia-border), #aeaf57 10%);
  --mind-row-border-open:.5px solid color-mix(in oklab, var(--mind-trivia-border), #aeaf57 15%);
}
.mind-row[data-kind="sudoku"]{
  --mind-row:var(--mind-sudoku-closed);
  --mind-row-hover:var(--mind-sudoku-hover);
  --mind-row-open:var(--mind-sudoku-open);
  /* Optional borders:*/
  --mind-row-border:.5px solid var(--mind-sudoku-border);
  --mind-row-border-hover:.5px solid color-mix(in oklab, var(--mind-trivia-border), #52c07a 10%);
  --mind-row-border-open:.5px solid color-mix(in oklab, var(--mind-trivia-border), #52c07a 15%);
}
.mind-row[data-kind="wordsearch"]{
  --mind-row:var(--mind-wordsearch-closed);
  --mind-row-hover:var(--mind-wordsearch-hover);
  --mind-row-open:var(--mind-wordsearch-open);
  /* Optional borders:*/
  --mind-row-border:.5px solid var(--mind-wordsearch-border);
  --mind-row-border-hover:.5px solid color-mix(in oklab, var(--mind-trivia-border), #926cb6 10%);
  --mind-row-border-open:.5px solid color-mix(in oklab, var(--mind-trivia-border), #926cb6 15%);
  
}
.mind-row[data-kind="logic"]{
  --mind-row:var(--mind-logic-closed);
  --mind-row-hover:var(--mind-logic-hover);
  --mind-row-open:var(--mind-logic-open);
  /* Optional borders:*/
  --mind-row-border:.5px solid var(--mind-logic-border);
  --mind-row-border-hover:.5px solid color-mix(in oklab, var(--mind-trivia-border), #c56367 10%);
  --mind-row-border-open:.5px solid color-mix(in oklab, var(--mind-trivia-border), #c56367 15%);
}

/* Optional border hooks (off by default) */
.mind-row{ border:var(--mind-row-border, none); }
.mind-row:hover{ border:var(--mind-row-border-hover, var(--mind-row-border, none)); }
.mind-row[aria-expanded="true"]{
  border:var(--mind-row-border-open, var(--mind-row-border, none));
}

/* Global “turn borders on” switch (no HTML edits required) */
.card.mind.mind--borders .mind-row{
  --mind-row-border:1.25px solid rgba(15,23,42,.10);
  --mind-row-border-hover:1.25px solid rgba(15,23,42,.18);
  --mind-row-border-open:1.25px solid rgba(15,23,42,.22);
}

/* Keep themed colors when a row is solved/locked (in case a legacy rule sets white) */
.card.mind .mind-row.locked{ background:var(--mind-row); }
.card.mind .mind-row.locked[aria-expanded="true"]{
  background:var(--mind-row-open, var(--mind-row));
}


/* ============================================================================
   5) ANDROID ENFORCER — keep themed backgrounds for all rows + states
   Uses background-color + higher specificity (and !important) to beat UA rules
   ========================================================================== */

.card.mind .mind-row,
.card.mind button.mind-row{
  background-color: var(--mind-row) !important;
  background-image: none !important;
}
.card.mind .mind-row[aria-expanded="true"],
.card.mind button.mind-row[aria-expanded="true"]{
  background-color: var(--mind-row-open, var(--mind-row)) !important;
}
.card.mind .mind-row:active,
.card.mind button.mind-row:active{
  background-color: var(--mind-row-hover, var(--mind-row)) !important;
}
.card.mind .mind-row.locked,
.card.mind button.mind-row.locked{
  background-color: var(--mind-row) !important;
}
.card.mind .mind-row.locked[aria-expanded="true"],
.card.mind button.mind-row.locked[aria-expanded="true"]{
  background-color: var(--mind-row-open, var(--mind-row)) !important;
}


/* ============================================================================
   6) OPTIONAL: parity for “Sponsored” card so it doesn’t outshine the Mind card
   (safe to remove if you style this elsewhere)
   ========================================================================== */
.card.sponsored{ box-shadow: 0 2px 10px rgba(0,0,0,.06); }

/* ============================================================================
   7) CELEBRATION EFFECTS — pop + glow when a row is completed
   - Trigger by adding .row-win to .mind-row (JS below does this automatically)
   - Keeps Android overrides intact (we don't touch background here)
   ========================================================================== */

@keyframes mindRowPop {
  0%   { transform: translateY(var(--acc-lift)) scale(1);   box-shadow: var(--acc-row-shadow); }
  35%  { transform: translateY(calc(var(--acc-lift) - 1px)) scale(1.02); box-shadow: var(--acc-row-shadow-strong); }
  100% { transform: translateY(var(--acc-lift)) scale(1);   box-shadow: var(--acc-row-shadow); }
}
.mind-row.mind-row--pop { animation: mindRowPop .75s ease; }

@keyframes mindRowGlow {
  0%   { box-shadow: var(--acc-row-shadow-strong), 0 0 0 0 rgba(255,255,255,.0), 0 8px 14px rgba(0,0,0,.06); }
  30%  { box-shadow: var(--acc-row-shadow-strong), 0 0 0 10px rgba(255,255,255,.35), 0 14px 28px rgba(0,0,0,.10); }
  100% { box-shadow: var(--acc-row-shadow-strong), 0 0 0 0 rgba(255,255,255,0),  0 8px 14px rgba(0,0,0,.06); }
}

/* Pulse ring on top (fades out) */
@keyframes mindRingFade { from { opacity:.9; } to { opacity:0; } }

.mind-row.row-win{
  animation: mindRowPop .18s ease-out, mindRowGlow 620ms ease-out;
}

.mind-row.row-win::after{
  content:"";
  position:absolute; inset:-2px;
  border-radius:14px; pointer-events:none;
  background: radial-gradient(120% 140% at 50% -30%, rgba(255,255,255,.8), rgba(255,255,255,0) 60%);
  animation: mindRingFade 620ms ease-out forwards;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .mind-row.row-win{ animation:none; }
  .mind-row.row-win::after{ display:none; }
}