/* Date Night and First Date Bingo */
.tool .bg-banner { padding: 16px; border-radius: 20px; background: var(--surface); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 4px; }
.tool .bg-filters { display: flex; flex-direction: column; gap: 8px; }
.tool .bg-filter-toggle { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 20px; background: var(--surface); font-size: 14px; font-weight: 750; color: rgb(var(--ink) / .78); text-align: left; box-shadow: inset 0 0 0 1px rgb(var(--ink) / .08); }
.tool .bg-filter-toggle b { flex: none; color: var(--link); font-weight: 850; }
.tool .bg-filter-panel { display: flex; flex-direction: column; gap: 8px; }
.tool .bg-filters .tool-chips { flex-wrap: nowrap; gap: 6px; }
.tool .bg-filters .tool-chips button { white-space: nowrap; }
.tool .bg-filters .tool-chips button { min-height: 36px; padding: 0 12px; font-size: 13px; }
.tool .bg-filter-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.tool .bg-filter-row select { flex: 0 1 124px; width: auto; min-height: 36px; padding: 4px 8px; border-radius: 18px; font-size: 13px; font-weight: 750; color: rgb(var(--ink) / .85); }
.tool .bg-selects { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tool .bg-selects select { min-height: 40px; padding: 6px 12px; border-radius: 14px; font-size: 14px; font-weight: 700; color: rgb(var(--ink) / .85); }
.tool .bg-status { min-height: 22px; margin: 0; text-align: center; font-size: 15px; line-height: 22px; font-weight: 800; color: rgb(var(--ink) / .72); font-variant-numeric: tabular-nums; }
.tool .bg-status.is-won { color: var(--link); font-size: 18px; font-weight: 950; }
.tool .bg-custom summary { min-height: 44px; display: flex; align-items: center; font-size: 14px; font-weight: 850; color: var(--link); cursor: pointer; }
.tool .bg-custom[open] summary { margin-bottom: 4px; }
.tool .bg-board[data-style="paper"] .bg-sq, .tool .bg-board[data-style="sage"] .bg-sq { font-family: Georgia, 'Times New Roman', serif; font-weight: 700; }

/* The card: its own palette per style, the same in light and dark mode, so it matches the export */
.tool .bg-board { --b1: #1B0B33; --b2: #3A1266; --sq: #FFFFFF; --sq-ink: #1B0B33; --on: #FFC94D; --on-ink: #1B0B33; --title: #FFFFFF; --edge: rgb(255 255 255 / .22);
  margin: 0 -10px; padding: 12px 6px 8px; border-radius: 24px; background: linear-gradient(170deg, var(--b1), var(--b2)); box-shadow: var(--shadow), inset 0 0 0 1px var(--edge); }
.tool .bg-board[data-style="paper"] { --line: #2B1B12; --line-ink: #FFFDF7; --b1: #FBF5E9; --b2: #F4EAD6; --sq: #FFFDF7; --sq-ink: #2B1B12; --on: #B4472E; --on-ink: #FFFFFF; --title: #2B1B12; --edge: rgb(43 27 18 / .22); }
.tool .bg-board[data-style="sage"] { --line: #23321F; --line-ink: #FCFDF8; --b1: #EEF2E4; --b2: #DCE5CE; --sq: #FCFDF8; --sq-ink: #23321F; --on: #4F7A3F; --on-ink: #FFFFFF; --title: #23321F; --edge: rgb(35 50 31 / .22); }
.tool .bg-board[data-style="sun"] { --line: #4A1F0C; --line-ink: #FFF9F0; --b1: #FFE9C9; --b2: #FFC49B; --sq: #FFF9F0; --sq-ink: #4A1F0C; --on: #D9531E; --on-ink: #FFFFFF; --title: #4A1F0C; --edge: rgb(74 31 12 / .2); }
.tool .bg-board[data-style="blush"] { --line: #4A0F2B; --line-ink: #FFF6F9; --b1: #FFE3EC; --b2: #FFC9DC; --sq: #FFF6F9; --sq-ink: #4A0F2B; --on: #D21F6D; --on-ink: #FFFFFF; --title: #4A0F2B; --edge: rgb(74 15 43 / .2); }
.tool .bg-board.is-new { animation: card-in .45s var(--ease-out) both; }
.tool .bg-title { margin: 0 0 8px; text-align: center; font-size: 30px; line-height: 34px; font-weight: 950; letter-spacing: .24em; text-indent: .24em; color: var(--title); }
.tool .bg-board[data-style="paper"] .bg-title, .tool .bg-board[data-style="sage"] .bg-title { font-family: Georgia, 'Times New Roman', serif; font-weight: 700; font-style: italic; }
.tool .bg-title.is-custom { letter-spacing: 0; text-indent: 0; font-size: 26px; }
.tool .bg-title.is-stamp { animation: bg-stamp .5s var(--ease-out) both; }
@keyframes bg-stamp { 0% { transform: scale(1); } 35% { transform: scale(1.14); } 100% { transform: scale(1); } }
.tool .bg-grid { position: relative; display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 3px; }
.tool .bg-sq {
  position: relative; aspect-ratio: 1; min-width: 0; padding: 1px; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; overflow: hidden;
  background: var(--sq); color: var(--sq-ink); font-size: 12px; line-height: 14px; font-weight: 750; touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none;
  transition: background-color .15s ease, color .15s ease, transform .16s var(--ease-out);
}
.tool .bg-sq span { overflow-wrap: normal; word-break: normal; hyphens: none; }
.tool .bg-grid.fit3 .bg-sq span { overflow-wrap: anywhere; max-width: 100%; }
.tool .bg-grid.fit1 .bg-sq { font-size: 11px; line-height: 13px; word-spacing: .08em; }
.tool .bg-grid.fit2 .bg-sq { font-size: 10.5px; line-height: 12.5px; word-spacing: .1em; }
.tool .bg-board.is-hidden .bg-sq span { opacity: 0; }
.tool .bg-board.is-hidden .bg-sq { color: transparent; }
.tool .bg-grid[data-n="4"] .bg-sq { font-size: 13px; line-height: 16px; padding: 4px; }
.tool .bg-grid[data-n="3"] .bg-sq { font-size: 17px; line-height: 21px; padding: 8px; }
.tool .bg-sq:active { transform: scale(.94); }
.tool .bg-sq:focus-visible { outline: 3px solid var(--on); outline-offset: 1px; z-index: 1; }
.tool .bg-sq.is-on { background: var(--on); color: var(--on-ink); }
.tool .bg-stamp { position: absolute; top: 1px; right: 1px; width: 13px; height: 13px; opacity: 0; scale: .25; transition: opacity .15s ease, scale .25s var(--ease-out); }
.tool .bg-stamp .tool-icon { width: 13px; height: 13px; stroke-width: 3.5; }
.tool .bg-sq.is-on .bg-stamp { opacity: 1; scale: 1; }
.tool .bg-sq.is-line { background: var(--line, #E0338A); color: var(--line-ink, #fff); }
.tool .bg-sq.is-edit { outline: 3px dashed var(--on); outline-offset: -3px; }
.tool .bg-sq.is-free { background: transparent; color: var(--title); font-weight: 900; box-shadow: inset 0 0 0 1.5px var(--edge); }
.tool .bg-sq.is-free .tool-icon { width: 18px; height: 18px; fill: currentColor; }
.tool .bg-sq.is-free .bg-stamp { display: none; }

.tool .bg-sq.is-free.is-line { background: var(--line, #E0338A); color: var(--line-ink, #fff); box-shadow: none; }
.tool .bg-banner .btn { align-self: flex-start; margin-top: 6px; }

/* Edit, wrap, actions */
.tool .bg-editor { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 20px; background: var(--surface); }
.tool .bg-editor-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.tool .bg-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 14px 16px; border-radius: 20px; background: var(--surface); }
.tool .bg-wrap-t { margin: 0; font-size: 16px; line-height: 22px; font-weight: 900; color: rgb(var(--ink)); }
.tool .bg-wrap > div { flex: 1 1 180px; }
.tool .bg-wrap .u24-ib { flex: none; }
.tool .bg-acts { display: flex; flex-direction: column; gap: 8px; }
.tool .bg-acts > .btn { width: 100%; min-height: 52px; }
.tool .bg-second { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tool .bg-second .u24-ib { justify-content: center; padding: 0 8px; }
.tool .bg-name { min-height: 44px !important; font-size: 16px; }
.tool .bg-tools { display: flex; flex-direction: column; gap: 10px; }
.tool .bg-style { display: flex; flex-direction: column; gap: 8px; }
.tool .bg-opt { display: flex; align-items: center; gap: 12px; }
.tool .bg-opt > span { flex: none; width: 38px; font-size: 13px; font-weight: 850; color: rgb(var(--ink) / .66); }
.tool .bg-opt .tool-chips button { min-height: 36px; padding: 0 12px; font-size: 13px; }
.tool .bg-swatches { display: flex; gap: 10px; }
.tool .bg-swatch { width: 36px; height: 36px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(var(--ink) / .2); touch-action: manipulation; transition: transform .16s var(--ease-out); }
.tool .bg-swatch[aria-pressed="true"] { outline: 3px solid rgb(var(--ink)); outline-offset: 2px; }
.tool .bg-swatch:active { transform: scale(.94); }
.tool .bg-toolrow { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.tool .bg-toolrow .u24-ib { flex-direction: column; justify-content: center; gap: 2px; padding: 8px 2px; min-height: 60px; border-radius: 16px; font-size: 12px; line-height: 15px; text-align: center; }

/* Laptop: the card and its controls side by side */
@media (min-width: 900px) {
  .tool[data-tool="date-night-bingo"] { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px 24px; align-items: start; margin-inline: -120px; }
  .tool[data-tool="date-night-bingo"] > * { grid-column: 2; }
  .tool[data-tool="date-night-bingo"] > .bg-board { grid-column: 1; grid-row: 1 / span 8; margin: 0; padding: 18px; }
  .tool .bg-grid { gap: 6px; }
  .tool .bg-sq { font-size: 14px; line-height: 17px; padding: 6px; border-radius: 12px; }
  .tool .bg-grid.fit1 .bg-sq { font-size: 13px; line-height: 16px; }
  .tool .bg-grid.fit2 .bg-sq { font-size: 12px; line-height: 15px; }
  .tool .bg-grid[data-n="4"] .bg-sq { font-size: 17px; line-height: 21px; }
  .tool .bg-grid[data-n="3"] .bg-sq { font-size: 22px; line-height: 27px; }
  .tool .bg-title { font-size: 40px; line-height: 44px; }
  .tool .bg-status { text-align: left; }
}

/* Print: one styled card per page */
.u24-sheet .bg-print-img { display: block; width: 100%; max-height: 96vh; object-fit: contain; break-after: page; }
.u24-sheet .bg-print-img:last-of-type { break-after: auto; }

@media (prefers-reduced-motion: reduce) { .tool .bg-title.is-stamp { animation: none; } .tool .bg-stamp, .tool .bg-sq { transition: none; } }
@media (prefers-color-scheme: dark) {
  .tool .bg-filter-toggle { background: var(--surface-2); box-shadow: inset 0 0 0 1px rgb(var(--ink) / .22); }
  .tool .bg-board[data-style="night"] { --sq: #2C1B47; --sq-ink: #F4ECFF; }
  .tool .bg-board { box-shadow: var(--shadow), inset 0 0 0 2px rgb(255 255 255 / .3); }
  .tool .bg-editor, .tool .bg-wrap, .tool .bg-banner { background: var(--surface-2); box-shadow: inset 0 0 0 1px rgb(var(--ink) / .14); }
  .tool .bg-selects select { background: var(--surface-2); }
}
/* Each style gets its own small motif on both sides of the title, like the printed card. */
.tool .bg-title { position: relative; }
.tool .bg-title::before, .tool .bg-title::after { content: ''; position: absolute; top: 50%; width: 22px; height: 22px; margin-top: -11px; background: var(--motif) center / contain no-repeat; opacity: .9; }
.tool .bg-title::before { left: 14%; transform: rotate(-14deg); }
.tool .bg-title::after { right: 14%; transform: rotate(14deg) scaleX(-1); }
.tool .bg-title.is-custom::before { left: 4%; } .tool .bg-title.is-custom::after { right: 4%; }
.tool .bg-board { --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.6 7.4L22 12l-7.4 2.6L12 22l-2.6-7.4L2 12l7.4-2.6z' fill='%23FFC94D' stroke='%23FFC94D' stroke-width='0' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.tool .bg-board[data-style="paper"] { --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z' fill='%23B4472E' stroke='%23B4472E' stroke-width='0' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.tool .bg-board[data-style="blush"] { --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z' fill='%23D21F6D' stroke='%23D21F6D' stroke-width='0' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.tool .bg-board[data-style="sage"] { --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 19C5 10 10 5 20 4c-1 10-6 15-15 15zM5 19l8-8' fill='none' stroke='%234F7A3F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.tool .bg-board[data-style="sun"] { --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 7a5 5 0 1 0 0 10 5 5 0 0 0 0-10zM12 1v3M12 20v3M1 12h3M20 12h3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M4.2 19.8l2.1-2.1M17.7 6.3l2.1-2.1' fill='none' stroke='%23D9531E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
/* Night sky: a few stars in the frame around the squares. */
.tool .bg-board[data-style="night"], .tool .bg-board:not([data-style]) { background: radial-gradient(1.5px 1.5px at 8% 6%, rgb(255 255 255 / .8), transparent 2px), radial-gradient(1px 1px at 30% 3%, rgb(255 255 255 / .7), transparent 2px), radial-gradient(1.5px 1.5px at 70% 5%, rgb(255 255 255 / .75), transparent 2px), radial-gradient(1px 1px at 92% 9%, rgb(255 255 255 / .7), transparent 2px), radial-gradient(1px 1px at 52% 2%, rgb(255 255 255 / .6), transparent 2px), linear-gradient(170deg, var(--b1), var(--b2)); }
/* Legend under the card: what the two colors mean. */
.tool .bg-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0 2px; font-size: 13px; line-height: 18px; font-weight: 750; color: var(--title); opacity: .85; }
.tool .bg-legend[hidden], .tool .bg-legend [hidden] { display: none; }
.tool .bg-legend span { display: inline-flex; align-items: center; gap: 6px; }
.tool .bg-legend i { width: 12px; height: 12px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .08); }
/* Three tabs fit one phone row: each tab as wide as its label. */
.tool[data-tool="date-night-bingo"] .u24-tabs button { flex: 1 1 auto; padding: 0 6px; }
@media (max-width: 400px) { .tool[data-tool="date-night-bingo"] .u24-tabs button { font-size: 14px; } }

/* Reflow at 320 px (WCAG 1.4.10): rows wrap instead of pushing past the screen edge. Wider screens are unchanged. */
@media (max-width: 374px) {
  .tool[data-tool="date-night-bingo"] .u24-tabs button { font-size: 13px; padding: 0 4px; }
  .tool .bg-swatches { flex-wrap: wrap; }
}