:root {
    /* Desktop default: 10x10 logical */
    --grid-columns: 10;
    --grid-rows: 10;
    --cell-size: calc(100vw / var(--grid-columns));
  
    --yp-bg: #f7f7f7;
    --yp-board-border: #1F2545;
    --yp-text-main: #1F2545;
    --yp-text-muted: #6b7280;
    --yp-surface: #ffffff;
    --yp-shadow-soft: 0 2px 8px rgba(0,0,0,0.15);
  }
  
  /* This page’s base look.
     If you have a global body style, this will just refine it. */
  body {
    margin: 0;
    background: var(--yp-bg);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  }
  
  #site-header {
    position: relative;
    z-index: 100;
    margin-top: 40px;
  }
  
  #site-footer {
    position: relative;
    z-index: 100;
  }
  
  /* Board wrapper keeps the wall centered */
  .board-wrapper {
    width: 100vw;
    min-height: 100vh;
    position: relative;
    overflow: visible;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 0;
    box-sizing: border-box;
    margin-bottom: 0; /* remove gap under the board */
  }
  
/* BOARD /////////////// */


.board {
    width: calc(var(--cell-size) * var(--grid-columns));
    height: calc(var(--cell-size) * var(--grid-rows));
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), var(--cell-size));
    grid-template-rows: repeat(var(--grid-rows), var(--cell-size));
    border: 5px solid var(--yp-board-border);
    box-shadow: 0 0 50px rgba(0,0,0,0.5);
    position: relative;
    background: #ffffff;
    z-index: 1;
    overflow: visible;
  }
  
  /* 🔽 Fade UNDER the board, fading UPWARDS into it */
  .board::after {
    content: "";
    position: absolute;
    left: -5px;
    right: -5px;
    bottom: -50px;      /* pushes gradient below the board edge */
    height: 60px;       /* size of fade area */
    pointer-events: none;
    z-index: -1;
  
    /* same “feel” as your downward fade, but inverted */
    background: linear-gradient(
      to top,
      rgba(0,0,0,0.25),
      rgba(0,0,0,0.10),
      rgba(0,0,0,0.0)
    );
  }
  
  /* Cells */
  .cell {
    width: var(--cell-size);
    height: var(--cell-size);
    margin: 0;
    padding: 0;
    border: none;
    overflow: hidden;
    position: relative;
    cursor: pointer;
  }
  
  /* Post-it images */
  .draggable-img {
    width: var(--cell-size);
    height: var(--cell-size);
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    cursor: grab;
    transition:
      transform 0.2s ease,
      box-shadow 0.2s ease,
      border 0.2s ease;
    border: 2px solid transparent;
    will-change: transform;
  }
  
  .draggable-img:hover {
    transform: scale(1.04) rotate(0.5deg);
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    border: 2px solid rgba(0,0,0,0.2);
    z-index: 10;
  }
  
  .swap-animation {
    animation: swap 0.25s ease;
    box-shadow: 0 6px 25px rgba(0,0,0,0.6);
    border: 2px solid rgba(0,0,0,0.4);
    z-index: 11;
  }
  
  @keyframes swap {
    0%   { transform: scale(1) rotate(0deg); }
    50%  { transform: scale(1.08) rotate(1.5deg); }
    100% { transform: scale(1) rotate(0deg); }
  }
  
  /* Drag ghost following cursor */
  .drag-ghost {
    position: fixed;
    pointer-events: none;
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
    border: 2px solid rgba(0,0,0,0.25);
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
    opacity: 0.9;
    transform: translate(-50%, -50%);
    z-index: 99999;
  }
  
  /* Target cell highlight */
  .drop-target {
    outline: 2px dashed #FFA500;
    outline-offset: -2px;
  }
  

/* TEXT ///////////////////// */

/* Centered Hero Text for Yellow Pages */
.collection-wrap {
    width: min(1100px, 92vw);
    margin: 60px auto 40px;
    padding: 0 16px;
    text-align: center;            /* <-- main centering */
    position: relative;
    z-index: 2;
  }
  
  .collection-title {
    font-size: clamp(2rem, 3.5vw, 3rem);
    margin: 0 0 16px;
    font-weight: 700;
    color: var(--yp-text-main);
    text-align: center;
  }
  
  .collection-lead {
    max-width: 680px;              /* keeps text readable & centered */
    margin: 0 auto 32px;           /* center horizontally */
    line-height: 1.65;
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    color: var(--yp-text-muted);
    text-align: center;
  }
  


/* CONTROLS ///////////////////// */

  .board-controls {
    margin: 20px auto;
    text-align: center;
    width: 100%;
    max-width: 260px;
  }
  
  .board-controls-label {
    display: block;
    padding: 15px 0;
    margin-bottom: -2px;
    font-weight: 600;
    color: var(--yp-text-main);
  }
  
  .size-toggle-group {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
    margin-bottom: 10px;
  }
  
  .size-toggle-btn {
    padding: 8px 12px;
    border-radius: 8px;
    border: none;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    box-shadow: var(--yp-shadow-soft);
    background: var(--yp-surface);
    color: var(--yp-text-main);
    transition:
      background-color 0.15s ease,
      color 0.15s ease,
      transform 0.05s ease;
  }
  
  .size-toggle-btn.active {
    background: var(--yp-board-border);
    color: #ffffff;
    transform: translateY(1px);
  }
  
  .size-toggle-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }
  
  .board-controls-buttons {
    margin-top: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
  }
  
  .board-btn {
    padding: 6px 12px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    box-shadow: var(--yp-shadow-soft);
    background: var(--yp-surface);
    color: var(--yp-text-main);
    transition: background-color 0.15s ease;
  }
  
  .board-btn:hover {
    background: #f3f4ff;
  }
  
  /* LOG ///////////////////// */

/* LOG — Clean, Merged, Corrected Layout */
.log-container {
    width: min(1100px, 92vw);
    margin: 20px auto 40px;
    padding: 16px 20px 24px;
    background: var(--yp-surface);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    position: relative;
    z-index: 2;
  }
  
  /* Title */
  .log-title {
    font-size: 1.2em;
    font-weight: 700;
    margin-bottom: 14px;
    color: var(--yp-text-main);
  }
  
  /* Top row: Save + circle slots */
  .log-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
  }
  
  /* Save Pattern button */
  .save-positions-btn {
    padding: 8px 14px;
    background-color: var(--yp-board-border);
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: background-color 0.2s ease, opacity 0.2s ease;
  }
  
  .save-positions-btn:hover {
    background-color: #11172f;
  }
  
  .save-positions-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  
  /* Pattern Slot Circles */
  .pattern-slots {
    display: flex;
    gap: 12px;
  }
  
  .slot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: #0f1a3a; /* navy = empty/save */
    transition:
      transform 0.18s ease,
      box-shadow 0.18s ease,
      background-color 0.18s ease;
  }
  
  /* hover */
  .slot:hover {
    transform: scale(1.1);
    box-shadow: 0 0 0 3px rgba(15,26,58,0.35);
  }
  
  /* saved */
  .slot.saved {
    background: #fff;
    border: 2px solid #0f1a3a;
  }
  
  /* delete-armed */
  .slot.reset {
    background: #d10f0f;
  }
  
  /* Log entry list */
  .log-entry {
    font-family: monospace;
    font-size: 0.9em;
    line-height: 1.5;
    color: #333;
    white-space: pre-wrap;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
  }
  
  /* Patterns left (bottom-right) */
  .patterns-count {
    color: var(--yp-text-main);
    font-size: 0.85rem;
    opacity: 0.7;
    margin-left: auto;
  }
  
  /* Flash / Animation classes */
  @keyframes slotSaveFlash {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(15,26,58,0.7); }
    50% { transform: scale(1.18); box-shadow: 0 0 0 8px rgba(15,26,58,0); }
    100% { transform: scale(1); }
  }
  
  @keyframes slotLoadFlash {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(15,152,80,0.6); }
    50% { transform: scale(1.16); box-shadow: 0 0 0 8px rgba(15,152,80,0); }
    100% { transform: scale(1); }
  }
  
  @keyframes slotDeleteFlash {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(209,15,15,0.7); }
    50% { transform: scale(1.18); box-shadow: 0 0 0 8px rgba(209,15,15,0); }
    100% { transform: scale(1); }
  }
  
  .slot.flash-save    { animation: slotSaveFlash .32s ease-out; }
  .slot.flash-load    { animation: slotLoadFlash .32s ease-out; }
  .slot.flash-delete  { animation: slotDeleteFlash .35s ease-out; }
  


  /* Timmmer TIMMER  ///////////////////// */

  .scroll-banner {
    position: fixed;
    bottom: 12px;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    background: rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 12px 0;
    backdrop-filter: blur(8px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
    z-index: 9999;
  }
  
  .scroll-text {
    display: inline-block;
    padding-left: 100%;
    font-family: monospace;
    font-weight: 700;
    color: #888888;
    font-size: 20px;
    animation: scroll-left 25s linear infinite;
  }
  
  @keyframes scroll-left {
    0%   { transform: translateX(0%); }
    100% { transform: translateX(-100%); }
  }
  


  /* RESPONSIVE ////////////// */

  /* Mobile: <= 599px ----------------------------------- */
@media (max-width: 599px) {
    /* Mobile board: 5 columns x 20 rows */
    :root {
      --grid-columns: 5;
      --grid-rows: 20;
      --cell-size: calc(100vw / var(--grid-columns));
    }
  
    .board-wrapper {
      align-items: flex-start;
    }
  
    .size-toggle-group {
      display: none; /* hide size toggles, keep shuffle/reset */
    }
  
    .collection-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  
  /* Tablet: 600–959px ---------------------------------- */
  @media (min-width: 600px) and (max-width: 959px) {
    .collection-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  
  /* Desktop: >= 960px ---------------------------------- */
  @media (min-width: 960px) {
    .collection-grid {
      grid-template-columns: repeat(5, 1fr);
    }
  }