@import url('https://fonts.googleapis.com/css2?family=Creepster&family=Fredoka:wght@400;600;700&family=Open+Sans:wght@400;600;700;800&family=Nunito:wght@400;600;700;800&display=swap');

    /* Cagliostro — the kidseducation.fun brand display font (self-hosted). */
    @font-face {
      font-family: 'Cagliostro';
      src: url('../fonts/Cagliostro-Regular.ttf') format('truetype');
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }

    /* Palette aligned to kidseducation.fun (BooPages Halloween theme):
       orange #FF7A00, purple #6B21A8, green #84CC16, witch-yellow #FACC15. */
    :root {
      --primary: #FF7A00;
      --primary-hover: #E66E00;
      --accent: #6B21A8;
      --accent-2: #84CC16;
      --witch-yellow: #FACC15;
      --bg-light: #FFF7ED;
      --bg-dark: #1F2937;
      --card-border: #FED7AA;
      --text-main: #1F2937;
      --text-muted: #6B7280;
      --heading: #6B21A8;
      --font-brand: 'Cagliostro', 'Fredoka', cursive;
      --font-playful: 'Fredoka', cursive, sans-serif;
      --font-creepy: 'Creepster', cursive;
      --font-body: 'Open Sans', 'Nunito', sans-serif;
      --stamp-color: #FF7A00;
    }

    /* Scoped so the reset never leaks into the host WordPress theme.
       Wrapped in :where() to keep specificity at 0, so component padding/
       margin rules (single-class) reliably win over this reset. */
    :where(#beb-app-root, #beb-app-root *) {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    #beb-app-root {
      font-family: var(--font-body);
      background-color: var(--bg-light);
      color: var(--text-main);
      overflow: hidden;
      height: 100vh;
      display: flex;
      flex-direction: column;
      border-radius: 16px;
    }

    /* Master Top Bar Header */
    header.master-header {
      background: white;
      border-bottom: 3px solid var(--text-main);
      padding: 12px 24px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      z-index: 100;
      box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
    }

    .logo-container .beb-brandline {
      font-family: var(--font-brand);
      font-size: 30px;
      letter-spacing: 0.5px;
      color: var(--heading);
      text-shadow: 2px 2px 5px rgba(255, 122, 0, 0.30);
      display: flex;
      align-items: center;
      gap: 10px;
      line-height: 1;
    }

    .logo-container span {
      background: var(--primary);
      color: white;
      padding: 4px 12px;
      border-radius: 99px;
      font-size: 14px;
      font-weight: 700;
    }

    /* Main Grid Split Workspace */
    .app-container {
      display: flex;
      flex: 1;
      overflow: hidden;
      height: calc(100vh - 61px);
    }

    /* LEFT SIDEBAR: FIXED / SCROLLABLE CONTROLS */
    .control-panel {
      width: 35%;
      min-width: 400px;
      max-width: 500px;
      background: white;
      border-right: 3px solid var(--text-main);
      display: flex;
      flex-direction: column;
      position: relative;
      height: 100%;
    }

    /* STEP NAVIGATION & PROGRESS */
    .step-navigator {
      background: #F8FAFC;
      border-bottom: 2px solid var(--card-border);
      padding: 10px 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 6px;
      z-index: 10;
    }

    .step-nav-btn {
      flex: 1;
      padding: 8px 4px;
      background: white;
      border: 2px solid var(--card-border);
      border-radius: 8px;
      font-size: 11px;
      font-weight: 700;
      color: var(--text-muted);
      cursor: pointer;
      text-align: center;
      transition: all 0.2s ease;
      white-space: nowrap;
    }

    .step-nav-btn.active {
      background: var(--text-main);
      color: white;
      border-color: var(--text-main);
    }

    .step-nav-btn:hover:not(.active) {
      border-color: var(--text-main);
      color: var(--text-main);
    }

    .progress-bar-container {
      height: 6px;
      background: #E2E8F0;
      width: 100%;
      position: relative;
      overflow: hidden;
      border-bottom: 1px solid #CBD5E1;
    }

    .progress-bar-fill {
      height: 100%;
      background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);
      transition: width 0.4s ease;
      width: 25%;
    }

    /* SCROLLABLE SIDEBAR SECTION FORM */
    .controls-scroller {
      flex: 1;
      overflow-y: auto;
      padding: 24px;
      scroll-behavior: smooth;
    }

    .controls-scroller::-webkit-scrollbar {
      width: 8px;
    }
    .controls-scroller::-webkit-scrollbar-track {
      background: #f1f1f1;
    }
    .controls-scroller::-webkit-scrollbar-thumb {
      background: #cbd5e1;
      border-radius: 4px;
    }

    .control-card {
      background: white;
      border: 3px solid var(--text-main);
      border-radius: 16px;
      padding: 20px;
      margin-bottom: 24px;
      box-shadow: 4px 4px 0px var(--text-main);
      transition: transform 0.2s ease;
    }

    .control-card:hover {
      transform: translateY(-2px);
    }

    .control-card h2 {
      font-family: var(--font-playful);
      font-size: 18px;
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 10px;
      border-bottom: 2px dotted #cbd5e1;
      padding-bottom: 10px;
    }

    /* CATEGORY TAB BUTTONS */
    .category-tabs {
      display: flex;
      gap: 8px;
      margin-bottom: 16px;
      border-bottom: 2px solid #cbd5e1;
      padding-bottom: 10px;
    }

    .category-tab-btn {
      flex: 1;
      padding: 10px 6px;
      border: 2px solid var(--text-main);
      border-radius: 8px;
      font-weight: 800;
      font-size: 12px;
      cursor: pointer;
      background: white;
      color: var(--text-muted);
      transition: all 0.2s ease;
    }

    .category-tab-btn.active {
      background: var(--accent);
      color: var(--text-main);
      box-shadow: 2px 2px 0px var(--text-main);
    }

    /* STYLE MODE SELECTION */
    .style-mode-card {
      background: #F8FAFC;
      border: 2px dashed var(--text-main);
      border-radius: 12px;
      padding: 14px;
      margin-bottom: 16px;
    }

    .style-mode-card h3 {
      font-family: var(--font-playful);
      font-size: 14px;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .style-mode-options {
      display: flex;
      gap: 10px;
    }

    .style-mode-btn {
      flex: 1;
      padding: 10px 8px;
      border: 2px solid var(--text-main);
      border-radius: 10px;
      background: white;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      transition: all 0.2s ease;
    }

    .style-mode-btn.active {
      background: #C4F1BE;
      box-shadow: 2px 2px 0px var(--text-main);
      transform: translate(-2px, -2px);
    }

    .style-mode-btn strong {
      font-size: 13px;
      font-family: var(--font-playful);
    }

    .style-mode-btn span {
      font-size: 10px;
      color: var(--text-muted);
    }

    /* RULE MODE SELECTION */
    .rule-card {
      background: #FFFBEB;
      border: 2px solid #F59E0B;
      border-radius: 12px;
      padding: 14px;
      margin-top: 14px;
    }

    .rule-card h3 {
      font-family: var(--font-playful);
      font-size: 14px;
      color: #B45309;
      margin-bottom: 6px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .rule-mode-select {
      width: 100%;
      padding: 10px 12px;
      border: 2px solid var(--text-main);
      border-radius: 8px;
      font-family: var(--font-body);
      font-size: 13px;
      font-weight: 700;
      background: white;
      cursor: pointer;
      margin-top: 6px;
    }

    .rule-desc-box {
      font-size: 11px;
      color: #92400E;
      margin-top: 8px;
      line-height: 1.4;
      background: #FEF3C7;
      padding: 8px 10px;
      border-radius: 6px;
      border-left: 3px solid #F59E0B;
    }

    /* WIZARD NAVIGATION BUTTONS */
    .wizard-nav-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 18px;
      padding-top: 14px;
      border-top: 2px dotted #cbd5e1;
    }

    .wizard-next-btn, .wizard-prev-btn {
      border: 2px solid var(--text-main);
      border-radius: 8px;
      padding: 8px 16px;
      font-family: var(--font-playful);
      font-weight: 600;
      font-size: 13px;
      cursor: pointer;
      box-shadow: 2px 2px 0px var(--text-main);
      transition: all 0.1s ease;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .wizard-next-btn {
      background: var(--primary);
      color: white;
    }

    .wizard-prev-btn {
      background: #F1F5F9;
      color: var(--text-main);
    }

    .wizard-next-btn:hover, .wizard-prev-btn:hover {
      transform: translate(-1px, -1px);
      box-shadow: 3px 3px 0px var(--text-main);
    }

    /* GRID CONTROLS */
    .grid-options {
      display: flex;
      gap: 12px;
    }

    .grid-btn {
      flex: 1;
      padding: 16px;
      border: 3px solid var(--text-main);
      border-radius: 12px;
      background: white;
      font-family: var(--font-playful);
      font-size: 16px;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      transition: all 0.2s ease;
    }

    .grid-btn.active {
      background: var(--accent);
      box-shadow: 3px 3px 0px var(--text-main);
      transform: translate(-3px, -3px);
    }

    .grid-btn span {
      font-size: 12px;
      font-family: var(--font-body);
      color: var(--text-muted);
    }

    .free-space-toggle {
      margin-top: 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #f8fafc;
      padding: 12px;
      border-radius: 8px;
      border: 2px dashed #cbd5e1;
    }

    /* THEME SELECTION SECTOR */
    .theme-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
    }

    .theme-card {
      border: 3px solid var(--text-main);
      border-radius: 12px;
      padding: 12px;
      cursor: pointer;
      text-align: center;
      transition: all 0.2s ease;
      background: white;
    }

    .theme-card.active {
      background: #C4F1BE;
      box-shadow: 3px 3px 0px var(--text-main);
      transform: translate(-3px, -3px);
    }

    .theme-icon-preview {
      font-size: 28px;
      margin-bottom: 4px;
    }

    .theme-card span {
      font-family: var(--font-playful);
      font-size: 13px;
    }

    /* FORM STYLING FIELD */
    .form-group {
      margin-bottom: 14px;
    }

    .form-group label {
      display: block;
      font-weight: 700;
      font-size: 13px;
      margin-bottom: 6px;
    }

    .form-control {
      width: 100%;
      padding: 10px 12px;
      border: 2px solid var(--text-main);
      border-radius: 8px;
      font-family: var(--font-body);
      font-size: 14px;
    }

    .color-picker-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
    }

    .color-box {
      border: 2px solid var(--text-main);
      border-radius: 8px;
      padding: 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
    }

    .color-box input[type="color"] {
      width: 100%;
      height: 34px;
      border: none;
      cursor: pointer;
      background: none;
    }

    .color-box span {
      font-size: 10px;
      font-weight: 700;
    }

    /* MASTER QUANTITY INPUTS */
    .quantity-row {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .quantity-slider {
      flex: 1;
      height: 8px;
      background: #cbd5e1;
      border-radius: 4px;
      outline: none;
    }

    .quantity-badge {
      background: var(--text-main);
      color: white;
      padding: 6px 14px;
      border-radius: 8px;
      font-family: var(--font-playful);
      font-size: 18px;
    }

    /* BUTTON ACTION SUITE */
    .btn-action-master {
      width: 100%;
      padding: 16px;
      border: 3px solid var(--text-main);
      border-radius: 12px;
      font-family: var(--font-playful);
      font-size: 18px;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 4px 4px 0px var(--text-main);
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
    }

    .btn-shuffle {
      background: var(--accent);
      color: var(--text-main);
      margin-bottom: 12px;
    }

    .btn-download {
      background: #4ADE80;
      color: var(--text-main);
    }

    .btn-action-master:hover {
      transform: translate(-2px, -2px);
      box-shadow: 6px 6px 0px var(--text-main);
    }

    .btn-action-master:active {
      transform: translate(2px, 2px);
      box-shadow: 2px 2px 0px var(--text-main);
    }

    /* RIGHT WORKSPACE: LIVE DYNAMIC SCROLL CONTAINER */
    .preview-panel {
      flex: 1;
      background: #E2E8F0;
      display: flex;
      flex-direction: column;
      position: relative;
      height: 100%;
    }

    .preview-header-bar {
      background: white;
      border-bottom: 3px solid var(--text-main);
      padding: 10px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px;
    }

    .preview-header-bar h3 {
      font-family: var(--font-playful);
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 16px;
    }

    .live-rule-badge {
      background: #FEF3C7;
      color: #B45309;
      border: 2px solid #F59E0B;
      padding: 4px 10px;
      border-radius: 99px;
      font-size: 11px;
      font-weight: 800;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    /* PLAY PALETTE DOCK */
    .crayon-dock {
      display: flex;
      align-items: center;
      gap: 12px;
      background: #f8fafc;
      padding: 6px 14px;
      border-radius: 99px;
      border: 2px solid var(--text-main);
    }

    .crayon-dock-label {
      font-size: 11px;
      text-transform: uppercase;
      font-weight: 800;
      color: var(--text-muted);
    }

    .crayons {
      display: flex;
      gap: 6px;
    }

    .crayon-selector {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      border: 2px solid white;
      box-shadow: 0 0 0 2px var(--text-muted);
      cursor: pointer;
      position: relative;
      transition: transform 0.1s ease;
    }

    .crayon-selector.active {
      transform: scale(1.2);
      box-shadow: 0 0 0 2px var(--text-main);
    }

    .stamp-shapes {
      display: flex;
      gap: 6px;
      border-left: 2px solid #cbd5e1;
      padding-left: 10px;
    }

    .stamp-btn {
      padding: 4px 8px;
      border: 2px solid var(--text-main);
      border-radius: 6px;
      background: white;
      font-size: 13px;
      cursor: pointer;
      font-weight: 700;
    }

    .stamp-btn.active {
      background: var(--accent);
    }

    /* SCROLLABLE STACK FRAME */
    .workbook-stack {
      flex: 1;
      overflow-y: auto;
      padding: 40px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 40px;
      scroll-behavior: smooth;
    }

    .workbook-stack::-webkit-scrollbar {
      width: 14px;
    }

    .workbook-stack::-webkit-scrollbar-track {
      background: #cbd5e1;
      border-left: 3px solid var(--text-main);
    }

    .workbook-stack::-webkit-scrollbar-thumb {
      background: var(--text-main);
      border: 3px solid #cbd5e1;
      border-radius: 99px;
    }

    /* BINGO SHEET STYLING (Responsive Proportions) */
    .bingo-card-sheet {
      width: 100%;
      max-width: 580px;
      background: white;
      border: 4px solid var(--text-main);
      border-radius: 24px;
      padding: 30px;
      box-shadow: 8px 8px 0px rgba(0,0,0,0.15);
      position: relative;
      transition: all 0.3s ease;
    }

    .bingo-card-sheet:hover {
      box-shadow: 12px 12px 0px rgba(0,0,0,0.2);
    }

    .card-sheet-indicator {
      position: absolute;
      top: -16px;
      left: 30px;
      background: var(--text-main);
      color: white;
      padding: 4px 14px;
      border-radius: 99px;
      font-size: 12px;
      font-weight: 800;
    }

    .card-shuffle-corner {
      position: absolute;
      top: 14px;
      right: 14px;
      background: #F1F5F9;
      border: 2px solid var(--text-main);
      padding: 4px 8px;
      border-radius: 8px;
      cursor: pointer;
      font-size: 11px;
      font-weight: 700;
      transition: all 0.2s ease;
    }

    .card-shuffle-corner:hover {
      background: var(--accent);
    }

    /* INSIDE SHEET TYPOGRAPHY */
    .sheet-header-title {
      text-align: center;
      font-family: var(--font-playful);
      font-size: 32px;
      margin-bottom: 2px;
      letter-spacing: 1px;
    }

    .sheet-header-subtitle {
      text-align: center;
      font-size: 13px;
      color: var(--text-muted);
      margin-bottom: 20px;
      font-weight: 700;
      text-transform: uppercase;
    }

    /* THE BINGO GRID */
    .bingo-grid {
      display: grid;
      gap: 12px;
      background: var(--text-main);
      padding: 12px;
      border-radius: 16px;
      margin-bottom: 16px;
    }

    .grid-3x3 { grid-template-columns: repeat(3, 1fr); }
    .grid-4x4 { grid-template-columns: repeat(4, 1fr); }

    /* BINGO CELL CELLS */
    .bingo-cell {
      aspect-ratio: 1;
      background: white;
      border-radius: 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 8px;
      position: relative;
      cursor: pointer;
      user-select: none;
      transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease;
      box-shadow: inset 0 -2px 0 rgba(0,0,0,0.08);
    }

    .bingo-cell:hover {
      transform: scale(1.04) translateY(-2px);
      box-shadow: 0 6px 12px rgba(0,0,0,0.12);
      z-index: 5;
    }

    .bingo-cell svg {
      width: 80%;
      height: 80%;
      filter: drop-shadow(0 1px 1px rgba(0,0,0,0.05));
      transition: transform 0.2s ease;
    }

    .cell-label {
      font-size: 11px;
      font-weight: 800;
      margin-top: 4px;
      text-align: center;
      color: var(--text-main);
      letter-spacing: 0.2px;
    }

    .bingo-cell:hover {
      transform: scale(1.02);
    }

    .bingo-cell svg {
      width: 75%;
      height: 75%;
      transition: transform 0.2s ease;
    }

    .cell-label {
      font-size: 11px;
      font-weight: 700;
      margin-top: 4px;
      text-align: center;
      color: var(--text-main);
    }

    /* FREE SPACE OVERLAY & LABEL STYLING */
    .free-space-cell {
      background: #FFFCE8;
      border: 3px dashed #F59E0B;
    }

    /* REAL CRAYON SKETCH STAMP OVERLAYS */
    .stamp-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10;
      opacity: 0.85;
    }

    .stamp-overlay svg {
      width: 85%;
      height: 85%;
    }

    /* BINGO ROW HIGHLIGHTS ON WIN */
    .bingo-cell.winning-cell {
      animation: winPulse 1s infinite alternate;
      border: 4px solid #10B981 !important;
    }

    @keyframes winPulse {
      0% { box-shadow: 0 0 4px #10B981; }
      100% { box-shadow: 0 0 20px #10B981; }
    }

    /* SHEET FOOTER */
    .sheet-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-top: 2px dashed #cbd5e1;
      padding-top: 14px;
      font-size: 11px;
      color: var(--text-muted);
      font-weight: 700;
    }

    /* COLLAPSIBLE DEV PANEL */
    .dev-console-header {
      background: var(--bg-dark);
      color: white;
      padding: 14px 20px;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 13px;
      font-weight: 700;
    }

    .dev-console-content {
      background: #111827;
      color: #A7F3D0;
      font-family: monospace;
      font-size: 11px;
      padding: 20px;
      max-height: 250px;
      overflow-y: auto;
      display: none;
    }

    .dev-console-content.show {
      display: block;
    }

    .copy-btn {
      background: var(--primary);
      color: white;
      border: none;
      padding: 2px 6px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 10px;
      float: right;
    }

    /* PROGRESS SPINNER */
    .build-spinner-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(255,255,255,0.92);
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 1000;
    }

    .spinner {
      width: 60px;
      height: 60px;
      border: 6px solid #cbd5e1;
      border-top-color: var(--primary);
      border-radius: 50%;
      animation: spin 1s infinite linear;
    }

    @keyframes spin {
      100% { transform: rotate(360deg); }
    }

    /* SWITCH STYLES */
    .switch {
      position: relative;
      display: inline-block;
      width: 44px;
      height: 24px;
    }

    .switch input { opacity: 0; width: 0; height: 0; }

    .slider-toggle {
      position: absolute;
      cursor: pointer;
      top: 0; left: 0; right: 0; bottom: 0;
      background-color: #cbd5e1;
      transition: .4s;
      border-radius: 34px;
    }

    .slider-toggle:before {
      position: absolute;
      content: "";
      height: 16px; width: 16px;
      left: 4px; bottom: 4px;
      background-color: white;
      transition: .4s;
      border-radius: 50%;
    }

    input:checked + .slider-toggle { background-color: var(--primary); }
    input:checked + .slider-toggle:before { transform: translateX(20px); }

    /* SCROLL FLOATER FOR MOBILE */
    .mobile-scroll-indicator {
      display: none;
      position: fixed;
      bottom: 16px; right: 16px;
      background: var(--text-main);
      color: white;
      border: 2px solid white;
      padding: 10px 18px;
      border-radius: 99px;
      font-size: 13px; font-weight: 700;
      box-shadow: 0 4px 10px rgba(0,0,0,0.3);
      cursor: pointer; z-index: 1000;
    }

    @media (max-width: 900px) {
      #beb-app-root { overflow: auto; height: auto; }
      .app-container { flex-direction: column; overflow-y: auto; height: auto; }
      .control-panel { width: 100%; max-width: 100%; height: auto; border-right: none; border-bottom: 3px solid var(--text-main); }
      .preview-panel { height: auto; min-height: 600px; }
      .mobile-scroll-indicator { display: block; }
    }

    /* ============================================================
       PLAYER SYSTEM (hot-seat) — replaces the manual crayon dock
       ============================================================ */
    .beb-player-dock {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }
    .beb-player-chips {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .beb-empty-players {
      font-size: 13px;
      color: var(--text-muted);
      font-weight: 700;
      font-style: italic;
    }
    .beb-player-chip {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px 6px 6px;
      border-radius: 999px;
      border: 3px solid transparent;
      background: #fff;
      box-shadow: 0 2px 4px rgba(0,0,0,0.12);
      cursor: pointer;
      font-weight: 800;
      font-size: 13px;
      transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
      user-select: none;
    }
    .beb-player-chip:hover { transform: translateY(-2px); }
    .beb-player-chip .beb-swatch {
      width: 22px; height: 22px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      box-shadow: inset 0 0 0 2px rgba(255,255,255,0.6);
      flex: none;
    }
    .beb-player-chip.active {
      border-color: var(--text-main);
      box-shadow: 0 4px 0 var(--text-main);
      transform: translateY(-1px);
    }
    .beb-player-chip .beb-code {
      font-size: 10px;
      color: var(--text-muted);
      font-weight: 700;
    }
    .beb-turn-flag {
      font-size: 11px;
      background: var(--text-main);
      color: #fff;
      padding: 2px 8px;
      border-radius: 999px;
      font-weight: 800;
      white-space: nowrap;
    }
    .beb-manage-players-btn {
      background: var(--text-main);
      color: #fff;
      border: none;
      padding: 8px 14px;
      border-radius: 8px;
      font-weight: 800;
      font-size: 12px;
      cursor: pointer;
      white-space: nowrap;
    }
    .beb-manage-players-btn:hover { background: #1f2a3a; }

    /* Active-player banner above the card stack */
    .beb-active-banner {
      display: flex;
      align-items: center;
      gap: 10px;
      background: #ECFDF5;
      border: 2px dashed #10B981;
      color: #065F46;
      padding: 8px 14px;
      border-radius: 10px;
      font-weight: 800;
      font-size: 14px;
      margin: 0 0 12px;
    }
    .beb-active-banner .beb-swatch {
      width: 26px; height: 26px; border-radius: 50%;
      display: inline-flex; align-items: center; justify-content: center;
      box-shadow: inset 0 0 0 2px rgba(255,255,255,0.6);
    }
    .beb-active-banner.beb-hidden { display: none; }

    /* Player setup modal */
    .beb-modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(15,23,42,0.55);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2000;
      padding: 20px;
    }
    .beb-modal {
      background: #fff;
      border: 4px solid var(--text-main);
      border-radius: 18px;
      box-shadow: 8px 8px 0 rgba(51,65,85,0.25);
      width: 100%;
      max-width: 460px;
      padding: 24px;
      max-height: 88vh;
      overflow-y: auto;
    }
    .beb-modal h3 {
      font-family: var(--font-playful);
      font-size: 22px;
      margin-bottom: 6px;
      display: flex; align-items: center; gap: 8px;
    }
    .beb-modal p.beb-sub {
      font-size: 13px; color: var(--text-muted); margin-bottom: 16px; line-height: 1.5;
    }
    .beb-add-player-row { display: flex; gap: 8px; margin-bottom: 14px; }
    .beb-add-player-row input {
      flex: 1;
      padding: 12px 14px;
      border: 3px solid var(--card-border);
      border-radius: 10px;
      font-size: 15px;
      font-family: var(--font-body);
      font-weight: 700;
    }
    .beb-add-player-row input:focus { outline: none; border-color: var(--primary); }
    .beb-add-player-row button {
      background: var(--primary);
      color: #fff; border: none;
      padding: 0 18px; border-radius: 10px;
      font-weight: 800; font-size: 14px; cursor: pointer;
      white-space: nowrap;
    }
    .beb-add-player-row button:disabled { opacity: .5; cursor: not-allowed; }
    .beb-player-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
    .beb-player-list-row {
      display: flex; align-items: center; gap: 10px;
      padding: 8px 10px;
      border: 2px solid var(--card-border);
      border-radius: 10px;
    }
    .beb-player-list-row .beb-swatch {
      width: 26px; height: 26px; border-radius: 50%;
      display: inline-flex; align-items: center; justify-content: center;
      box-shadow: inset 0 0 0 2px rgba(255,255,255,0.6);
      flex: none;
    }
    .beb-player-list-row .beb-pname { font-weight: 800; flex: 1; }
    .beb-player-list-row .beb-pcode { font-size: 11px; color: var(--text-muted); font-weight: 700; }
    .beb-player-list-row .beb-remove {
      background: #FEE2E2; color: #B91C1C; border: none;
      width: 28px; height: 28px; border-radius: 8px; cursor: pointer; font-weight: 800;
    }
    .beb-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
    .beb-modal-close {
      background: var(--text-main); color: #fff; border: none;
      padding: 10px 20px; border-radius: 10px; font-weight: 800; cursor: pointer;
    }
    .beb-modal-note { font-size: 12px; margin-top: 10px; font-weight: 700; min-height: 16px; }
    .beb-modal-note.err { color: #B91C1C; }
    .beb-modal-note.ok  { color: #047857; }

    /* ============================================================
       KIDSEDUCATION / HALLOWEEN THEME OVERRIDES
       ============================================================ */
    .control-card h2,
    .preview-header-bar h3 { color: var(--heading); }

    .logo-container span {
      background: linear-gradient(135deg, var(--primary), var(--accent));
    }

    .category-tab-btn.active {
      background: var(--witch-yellow);
      color: #4C1D95;
      box-shadow: 2px 2px 0px var(--text-main);
    }

    .rule-card { background: #F5F3FF; border-color: var(--accent); }
    .rule-card h3 { color: var(--accent); }
    .rule-desc-box { background: #EDE9FE; color: #5B21B6; border-left-color: var(--accent); }

    /* ============================================================
       POKI-STYLE GAME BAR
       ============================================================ */
    .beb-game-bar {
      display: flex; align-items: center; justify-content: space-between;
      gap: 12px; padding: 10px 18px;
      background: var(--bg-dark); color: #fff;
      border-top: 3px solid var(--primary);
      flex-wrap: wrap;
    }
    .beb-game-id { display: flex; align-items: center; gap: 10px; }
    .beb-game-icon {
      width: 40px; height: 40px; border-radius: 12px;
      background: linear-gradient(135deg, var(--primary), var(--accent));
      display: flex; align-items: center; justify-content: center;
      font-size: 22px; box-shadow: 0 2px 6px rgba(0,0,0,.3); flex: none;
    }
    .beb-game-meta { display: flex; flex-direction: column; line-height: 1.15; }
    .beb-game-meta strong { font-family: var(--font-playful); font-size: 15px; }
    .beb-game-meta span { font-size: 11px; color: #CBD5E1; }
    .beb-game-actions { display: flex; gap: 8px; flex-wrap: wrap; }
    .beb-gb-btn {
      display: inline-flex; align-items: center; gap: 6px;
      background: rgba(255,255,255,.12); color: #fff; border: none;
      padding: 8px 12px; border-radius: 10px;
      font-weight: 800; font-size: 13px; cursor: pointer;
      font-family: var(--font-body);
    }
    .beb-gb-btn:hover { background: rgba(255,255,255,.24); }
    .beb-fs-btn { background: var(--primary); }
    .beb-fs-btn:hover { background: var(--primary-hover); }

    /* ============================================================
       FULLSCREEN GAME STAGE
       ============================================================ */
    #bebGameStage:fullscreen,
    #bebGameStage:-webkit-full-screen {
      width: 100vw; height: 100vh;
      background: var(--bg-light);
    }
    #bebGameStage:fullscreen .workbook-stack,
    #bebGameStage:-webkit-full-screen .workbook-stack { padding: 28px; }

    /* Fullscreen puts play first: builder-only chrome is hidden in-game. */
    #bebGameStage:fullscreen .live-rule-badge { display: none; }

    @media (max-width: 600px) {
      .beb-gb-btn span { display: none; }
      .beb-game-bar { padding: 8px 12px; }
    }

    /* ============================================================
       CALM & SOOTHING REFINEMENT
       Airy spacing, soft shadows, gentle warm borders. Replaces the
       hard black-outline / offset-shadow look with a relaxing surface
       treatment tuned for kids + parents. (Placed before the responsive
       block so small-screen spacing still overrides these desktop values.)
       ============================================================ */

    /* Warm, low-contrast dividers instead of hard 3px dark rules. */
    header.master-header {
      border-bottom: 1px solid #F1E4D3;
      padding: 16px 30px;
      box-shadow: 0 2px 14px rgba(107,33,168,0.05);
    }
    .control-panel { border-right: 1px solid #F1E4D3; }
    .preview-panel { background: #FBF6EF; }
    .preview-header-bar {
      background: #fff;
      border-bottom: 1px solid #F1E4D3;
      padding: 16px 22px;
      gap: 14px;
    }
    .step-navigator { border-bottom: 1px solid #F1E4D3; padding: 12px 18px; }
    .step-nav-btn { border: 2px solid #F1E4D3; border-radius: 12px; }
    .step-nav-btn.active { background: var(--primary); border-color: var(--primary); }

    /* Roomier, softer cards. */
    .controls-scroller { padding: 28px; }
    .control-card {
      border: 2px solid #F3E7D6;
      border-radius: 24px;
      padding: 28px;
      margin-bottom: 26px;
      box-shadow: 0 10px 28px -16px rgba(107,33,168,0.22);
    }
    .control-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 18px 36px -18px rgba(107,33,168,0.28);
    }
    .control-card h2 {
      border-bottom: 2px solid #F3E7D6;
      padding-bottom: 14px;
      margin-bottom: 20px;
    }

    /* Grid layout buttons -> soft, readable, generously padded. */
    .grid-btn {
      border: 2px solid #F1E4D3;
      border-radius: 18px;
      padding: 18px 16px;
      box-shadow: 0 3px 10px rgba(31,41,55,0.04);
      transition: all .2s ease;
    }
    .grid-btn.active {
      background: #FFF3E6;
      color: var(--text-main);
      border-color: var(--primary);
      box-shadow: 0 10px 20px -10px rgba(255,122,0,0.45);
      transform: none;
    }
    .grid-btn:hover:not(.active) { border-color: #F0C89A; transform: translateY(-2px); }

    /* Art-style + rule cards. */
    .style-mode-card { border: 2px dashed #E9D9C4; border-radius: 18px; padding: 18px; }
    .style-mode-btn { border: 2px solid #F1E4D3; border-radius: 18px; padding: 16px 12px; transition: all .2s ease; }
    .style-mode-btn.active {
      background: #F2FBE6;
      border-color: var(--accent-2);
      box-shadow: 0 10px 20px -10px rgba(132,204,22,0.4);
      transform: none;
    }
    .rule-card { border-radius: 18px; padding: 18px; border-width: 2px; }
    .rule-mode-select { border: 2px solid #EAD9F5; border-radius: 12px; padding: 12px 14px; }

    /* Category tabs. */
    .category-tab-btn { border: 2px solid #F1E4D3; border-radius: 14px; padding: 12px 10px; }
    .category-tab-btn.active { border-color: transparent; box-shadow: 0 8px 16px -8px rgba(250,204,21,0.55); }

    /* Inputs & toggles. */
    .form-control { border: 2px solid #EFE0CD; border-radius: 14px; padding: 13px 16px; }
    .form-control:focus { outline: none; border-color: var(--primary); }
    .form-group { margin-bottom: 18px; }
    .free-space-toggle { background: #FBF6EF; border-radius: 14px; padding: 14px 16px; }
    .color-box { border: 2px solid #EFE0CD; border-radius: 14px; padding: 10px; }

    /* Wizard + action buttons -> soft rounded pills. */
    .wizard-next-btn, .wizard-prev-btn {
      border: none; border-radius: 999px; padding: 13px 22px;
    }
    .wizard-next-btn { box-shadow: 0 10px 20px -10px rgba(255,122,0,0.55); }
    .wizard-prev-btn { background: #F3ECE2; }
    .wizard-next-btn:hover, .wizard-prev-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 22px -10px rgba(31,41,55,0.25); }

    .btn-action-master { border: none; border-radius: 999px; padding: 18px; }
    .btn-shuffle { background: var(--accent); color: #fff; box-shadow: 0 10px 22px -12px rgba(107,33,168,0.6); }
    .btn-download { background: #22C55E; color: #fff; box-shadow: 0 10px 22px -12px rgba(34,197,94,0.6); }
    .btn-action-master:hover { transform: translateY(-2px); box-shadow: 0 16px 28px -14px rgba(31,41,55,0.3); }
    .btn-action-master:active { transform: translateY(1px); }

    /* Bingo sheets: soft frame + gentle grid instead of hard black. */
    .workbook-stack { padding: 44px; gap: 44px; }
    .bingo-card-sheet {
      border: 2px solid #EFE2D0;
      border-radius: 28px;
      padding: 34px;
      box-shadow: 0 20px 48px -24px rgba(107,33,168,0.30);
    }
    .bingo-grid { background: #F4ECDD; padding: 14px; gap: 14px; border-radius: 22px; }
    .bingo-cell {
      border-radius: 18px;
      padding: 12px;
      box-shadow: 0 2px 6px rgba(31,41,55,0.05);
      transition: transform .18s ease, box-shadow .18s ease;
    }
    .bingo-cell:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -10px rgba(255,122,0,0.35); }

    /* Player chips, banner & game bar: a little more breathing room. */
    .beb-player-chip { padding: 7px 14px 7px 7px; box-shadow: 0 3px 8px rgba(31,41,55,0.10); }
    .beb-player-chip.active { box-shadow: 0 8px 16px -8px rgba(255,122,0,0.5); }
    .beb-active-banner { padding: 12px 18px; border-radius: 16px; margin: 12px 22px 0; }
    .beb-manage-players-btn { border-radius: 999px; padding: 10px 16px; }
    .beb-game-bar { padding: 14px 22px; }
    .beb-gb-btn { padding: 10px 16px; border-radius: 12px; }

    /* ============================================================
       RESPONSIVE — phones, tablets, desktops
       ============================================================ */

    /* Tablet / stacked (<= 900px): single column, controls on top. */
    @media (max-width: 900px) {
      .control-panel { min-width: 0; }
      .workbook-stack { padding: 24px; gap: 28px; }
      .preview-panel { min-height: 70vh; }
      .beb-player-dock { width: 100%; }
      .beb-player-chips { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
    }

    /* Large phones (<= 640px). */
    @media (max-width: 640px) {
      header.master-header { padding: 10px 14px; }
      .logo-container h1 { font-size: 26px; }
      .master-header > div:last-child { display: none; }        /* hide tagline */

      .step-navigator { padding: 8px 10px; gap: 4px; }
      .step-nav-btn { font-size: 10px; padding: 7px 2px; }
      .controls-scroller { padding: 16px; }
      .control-card { padding: 16px; margin-bottom: 18px; }

      .preview-header-bar { padding: 10px 12px; gap: 8px; }
      .preview-header-bar h3 { font-size: 15px; width: 100%; }

      .workbook-stack { padding: 14px; gap: 22px; }
      .bingo-card-sheet { padding: 16px; border-width: 3px; border-radius: 18px; box-shadow: 5px 5px 0 rgba(0,0,0,0.15); }
      .bingo-grid { gap: 8px; padding: 8px; }
      .sheet-header-title { font-size: 22px; }
      .cell-label { font-size: 11px; }

      .beb-active-banner { font-size: 12px; margin: 8px 12px; }
      .beb-game-bar { padding: 8px 12px; }
      .beb-game-meta strong { font-size: 13px; }
      .beb-game-meta span { font-size: 10px; }

      .beb-modal { padding: 18px; }
      .beb-modal h3 { font-size: 19px; }
    }

    /* Small phones (<= 400px). */
    @media (max-width: 400px) {
      .logo-container span { display: none; }                    /* hide "Bingo Builder" pill */
      .logo-container h1 { font-size: 22px; }
      .workbook-stack { padding: 10px; }
      .bingo-card-sheet { padding: 12px; }
      .bingo-grid { gap: 6px; padding: 6px; }
      .bingo-cell { border-radius: 10px; padding: 4px; }
      .sheet-header-title { font-size: 19px; }
      .beb-manage-players-btn { font-size: 11px; padding: 7px 10px; }
      .beb-game-icon { width: 34px; height: 34px; font-size: 18px; }
      .add-player-row, .beb-add-player-row { flex-direction: column; }
      .beb-add-player-row button { padding: 12px; }
    }

    /* Short landscape (phones held sideways): keep cards from being cramped. */
    @media (max-height: 520px) and (min-width: 640px) {
      .workbook-stack { padding: 16px; gap: 20px; }
    }

    /* ============================================================
       LIVE-SITE FIXES
       - Category tabs shrink/wrap instead of overflowing the panel.
       - Cells clip their contents so nothing spills over the card.
       - Uploaded custom images always fit inside the cell.
       ============================================================ */
    .category-tabs { flex-wrap: wrap; }
    .category-tab-btn { min-width: 0; flex: 1 1 30%; white-space: normal; line-height: 1.2; }

    .bingo-cell { overflow: hidden; }
    .beb-custom-img {
      max-width: 82%;
      max-height: 60%;
      width: auto;
      height: auto;
      object-fit: contain;
      border-radius: 8px;
    }