.body {
  background:#fff;
}
/* Prevent iOS/Android text selection + callout while swiping */
.food-boggle,
.food-boggle * {
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important; /* iOS long-press menu */
}

.fb-board,
.fb-cell {
  touch-action: none !important;          /* stop scroll/zoom gestures in the board area */
  -webkit-tap-highlight-color: transparent;
}

.fb-cell {
  -webkit-user-drag: none;
}




.food-boggle{
    --fb-bg:#0f1215;
    
    --fb-card:#171b20;
    --fb-tile:#232a33;
    --fb-tile-hi:#2d3744;
    --fb-text:#e9eef5;
    --fb-sub:#a7b3c2;
    --fb-accent:#7ee081;
    --fb-warn:#ffcf5c;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color: var(--fb-text);
    background: linear-gradient(180deg, #0e1114, #0a0c0f);
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
  }
  
  .fb-topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding: 6px 6px 12px;
  }
  
  .fb-title{
    font-weight: 800;
    letter-spacing: .2px;
    font-size: 18px;
  }
  
  .fb-stats{
    display:flex;
    gap:10px;
  }
  .fb-timer, .fb-score{
    background: var(--fb-card);
    border: 1px solid rgba(255,255,255,.06);
    padding: 8px 10px;
    border-radius: 12px;
    display:flex;
    gap:8px;
    align-items:baseline;
  }
  .fb-timer-label, .fb-score-label{
    color: var(--fb-sub);
    font-size: 12px;
  }
  .fb-timer-val, .fb-score-val{
    font-weight: 800;
    font-size: 14px;
  }
  
  .fb-main{
    display:grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 14px;
  }
  @media (max-width: 860px){
    .fb-main{ grid-template-columns: 1fr; }
  }
  
  .fb-board-wrap{
    background: var(--fb-card);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 16px;
    padding: 12px;
  }
  
  .fb-board{
    display: grid !important;
    grid-template-columns: repeat(var(--fb-size, 4), minmax(0, 1fr)) !important;
    gap: 10px;
    user-select: none;
    touch-action: none;

    max-width: 420px;     /* prevents giant tiles on wide layouts */
    margin: 0 auto;       /* keeps board centered */
  }

  .fb-cell{
    
      aspect-ratio: 1 / 1;          /* ✅ always square */
      height: auto !important;      /* don’t force a fixed height */
      width: 100% !important;       /* fill the grid column */
    
      display: flex !important;
      align-items: center;
      justify-content: center;
    
      font-weight: 900;
      font-size: 22px;
      letter-spacing: .5px;
    
      border-radius: 14px;
      background: var(--fb-tile);
      color: var(--fb-text);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
      cursor: pointer;
    }
    

  @media (max-width: 420px){
    .fb-cell{ height: 58px; font-size: 20px; }
  }
  
  .fb-cell.is-path{
    background: var(--fb-tile-hi);
    box-shadow: inset 0 0 0 2px rgba(126,224,129,.5), 0 8px 16px rgba(0,0,0,.25);
  }
  
  .fb-current{
    display:flex;
    justify-content:space-between;
    gap: 10px;
    margin-top: 12px;
    padding: 10px;
    background: rgba(0,0,0,.2);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.06);
  }
  .fb-current-word{
    font-weight: 900;
    font-size: 18px;
    letter-spacing: 1px;
  }
  .fb-current-msg{
    color: var(--fb-sub);
    font-size: 13px;
    align-self: center;
  }
  
  .fb-controls{
    display:flex;
    gap:10px;
    margin-top: 12px;
  }
  .fb-btn{
    appearance:none;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.04);
    color: var(--fb-text);
    padding: 10px 12px;
    border-radius: 12px;
    font-weight: 700;
    cursor:pointer;
  }
  .fb-btn:disabled{
    opacity: .45;
    cursor:not-allowed;
  }
  .fb-btn-primary{
    background: rgba(126,224,129,.14);
    border-color: rgba(126,224,129,.35);
  }
  
  .fb-side{
    display:flex;
    flex-direction:column;
    gap:14px;
  }
  
  .fb-panel{
    background: var(--fb-card);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 16px;
    padding: 12px;
  }
  .fb-panel-title{
    font-weight: 900;
    margin-bottom: 10px;
    font-size: 14px;
    color: var(--fb-text);
  }
  
  .fb-words{
    display:flex;
    flex-direction:column;
    gap:8px;
    max-height: 340px;
    overflow:auto;
    padding-right: 4px;
  }
  
  .fb-word{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap: 10px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 12px;
    padding: 8px 10px;
  }
  .fb-word.is-food{
    border-color: rgba(126,224,129,.35);
    box-shadow: inset 0 0 0 1px rgba(126,224,129,.18);
  }
  .fb-word-text{ font-weight: 900; letter-spacing: .6px; }
  .fb-word-points{ color: var(--fb-sub); font-weight: 800; }
  
  .fb-yum{
    margin-bottom: 12px;
  }
  .fb-yum-label{
    color: var(--fb-sub);
    font-size: 12px;
    margin-bottom: 6px;
  }
  .fb-yum-meter{
    height: 10px;
    background: rgba(255,255,255,.06);
    border-radius: 999px;
    overflow:hidden;
    border: 1px solid rgba(255,255,255,.08);
  }
  .fb-yum-fill{
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, rgba(126,224,129,.45), rgba(255,207,92,.45));
  }
  .fb-yum-text{
    margin-top: 6px;
    color: var(--fb-sub);
    font-size: 12px;
  }
  
  .fb-help ul{
    margin: 0;
    padding-left: 18px;
    color: var(--fb-sub);
    font-size: 13px;
    line-height: 1.35;
  }
  
  .food-boggle.fb-yum-pop .fb-board-wrap{
    box-shadow: 0 0 0 2px rgba(126,224,129,.25), 0 16px 40px rgba(0,0,0,.35);
  }
  

  /* Floating score toast */
.fb-board-wrap {
    position: relative;
  }
  
  .fb-toast{
    position: absolute;
    left: 50%;
    top: 10px;
    transform: translateX(-50%) translateY(-6px);
    background: rgba(10,12,15,.92);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 14px;
    padding: 10px 12px;
    min-width: 180px;
    max-width: 92%;
    text-align: center;
    box-shadow: 0 16px 40px rgba(0,0,0,.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
    z-index: 50;
  }
  
  .fb-toast-line{
    font-weight: 900;
    letter-spacing: .4px;
  }
  
  .fb-toast-word{
    font-size: 14px;
    color: var(--fb-text);
    margin-bottom: 2px;
  }
  
  .fb-toast-msg{
    font-size: 13px;
    color: var(--fb-sub);
  }
  
  .fb-toast.is-show{
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  
  /* Make it a bit punchier on mobile */
  @media (max-width: 860px){
    .fb-toast{
      top: 8px;
      padding: 12px 14px;
      border-radius: 16px;
    }
    .fb-toast-word{ font-size: 15px; }
    .fb-toast-msg{ font-size: 14px; }
  }