/* =================================================== */
/*                GLOBAL  PALETTE / SIZES              */
/* =================================================== */
:root {
    /* colours */
    --clr-bg:        #f0f2f8;
    --clr-primary:   #ff5757;
    --clr-primary-2: #ff7474;
    --clr-white:     #ffffff;
    --clr-grey:      #e1e5ee;
  
    /* radii & shadows */
    --radius-lg: 12px;
    --radius-md: 8px;
    --shadow-card: 0 4px 18px rgba(0,0,0,.10);
    --shadow-cell: 0 3px  8px rgba(0,0,0,.05);
  
    /* layout maths (desktop / large-mobile defaults) */
    --gap: 7px;
    --vertical-offset: 11rem;          /* header + button + gaps + padding */
  
    /* header-chip design */
    --hdr-chip-size: clamp(2.4rem, 9vw, 3.6rem);
    --hdr-chip-gap:  clamp(0.3rem, 1.5vw, 0.6rem);
    --hdr-glow:      0 0 10px 3px rgba(58, 58, 58, 0.35);
  }
  
  /* =================================================== */
  /*                    GLOBAL RESET                     */
  /* =================================================== */
  *,
  *::before,
  *::after { box-sizing: border-box; }
  
  body {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100dvh;
    padding: 1.2rem 0;                 /* safe-area breathing room */
  
    font-family: "Poppins", Arial, sans-serif;
    background: var(--clr-bg);
    text-align: center;
    -webkit-font-smoothing: antialiased;
  }
  
  /* =================================================== */
  /*                    CARD WRAPPER                     */
  /* =================================================== */
  .bingo-container {
    /* width shrinks with viewport height if necessary so 6 rows always fit */
    width: min(
            95vw,
            calc((100dvh - var(--vertical-offset)) * 5 / 6)
          );
  
    background: var(--clr-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 1.3rem 1rem;
  
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow: hidden;
  
    animation: container-in .55s ease forwards;
    opacity: 0;
    transform: translateY(18px);
  }
  
  /* =================================================== */
  /*                “B  I  N  G  O”  HEADER              */
  /* =================================================== */
  .bingo-header {
    margin: 0;
    display: flex;
    justify-content: space-between;
    gap: var(--hdr-chip-gap);
  
    background: var(--clr-white);      /* bar itself now white */
    padding: .45em var(--hdr-chip-gap);
    border-radius: var(--radius-md);
    position: relative;
    overflow: hidden;
  
    font-size: 0;                      /* suppress baseline gaps */
  }
  
  .bingo-header::before,
  .bingo-header::after {
    content: "";
    flex: 1 0 var(--hdr-chip-gap);     /* rounded ends via spacers */
  }
  
  /* ------------- chip / individual letter ------------- */
  .bingo-header span {
    position: relative;
    display: grid;
    place-items: center;
  
    width:  var(--hdr-chip-size);
    height: var(--hdr-chip-size);
    border-radius: 50%;
    font-size: calc(var(--hdr-chip-size) * 0.65);
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0,0,0,.3);
  
    background: conic-gradient(
      from 0deg,
      #ff5757 0% 20%, #ffb657 20% 40%,
      #ffe657 40% 60%, #57ffa2 60% 80%,
      #57a8ff 80% 100%
    );
    background-size: 200% 200%;
    animation: swirl 6s linear infinite;
  
    box-shadow:
        inset 0 0 0 2px rgba(255,255,255,.45),
        inset 0 4px 8px rgba(0,0,0,.15),
        0 0 6px rgba(0,0,0,.12);
  
    opacity: 0;
    transform: translateY(-120%) scale(.6);
    animation: chip-drop .65s cubic-bezier(.22,1.38,.43,1.06) forwards;
  }
  
  .bingo-header span:nth-child(1){ animation-delay: .15s; }
  .bingo-header span:nth-child(2){ animation-delay: .25s; }
  .bingo-header span:nth-child(3){ animation-delay: .35s; }
  .bingo-header span:nth-child(4){ animation-delay: .45s; }
  .bingo-header span:nth-child(5){ animation-delay: .55s; }
  
  /* =================================================== */
  /*                        GRID                         */
  /* =================================================== */
  .bingo-card {
    flex-grow: 1;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--gap);
  }
  
  /* =================================================== */
  /*                     SQUARES / CELLS                 */
  /* =================================================== */
  .bingo-cell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  
    aspect-ratio: 1 / 1;                   /* fixed square */
    padding: 6px;
    border: 2px solid var(--clr-grey);
    border-radius: var(--radius-md);
    background: var(--clr-white);
    box-shadow: var(--shadow-cell);
  
    cursor: pointer;
    user-select: none;
    overflow: hidden;
  
    font-weight: 600;
    font-size: 16px;                       /* shrinks via JS */
    line-height: 1.25;
    word-break: break-word;
  
    opacity: 0;
    transform: scale(.85);
    animation: cell-in .45s ease forwards;
  }
  
  @media (hover: hover) {
    .bingo-cell:hover  { background: #fafbff; transform: scale(.97); }
  }
  .bingo-cell:active   { transform: scale(.93); }
  
  .bingo-cell.marked {
    border-color: var(--clr-primary);
  }
  .bingo-cell.marked::after {
    content: "✖";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(2.8rem, 6vw, 4.8rem);
    font-weight: 700;
    color: var(--clr-primary);
    animation: pop .3s ease;
    pointer-events: none;
  }
  
  /* =================================================== */
  /*                  REFRESH BUTTON                     */
  /* =================================================== */
  .refresh-btn {
    align-self: center;
    font: 600 .95rem/1 "Poppins", sans-serif;
    color: #fff;
    background: var(--clr-primary);
    padding: .55rem 1.1rem;
    border: none;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    cursor: pointer;
    transition: transform .15s ease, background .25s ease;
  }
  .refresh-btn:hover        { background: var(--clr-primary-2); transform: scale(1.04); }
  .refresh-btn:active       { transform: scale(.96); }
  .refresh-btn:focus-visible{ outline: 3px solid var(--clr-primary-2); outline-offset: 2px; }
  
  /* =================================================== */
  /*                      KEYFRAMES                      */
  /* =================================================== */
  @keyframes container-in { to { opacity: 1; transform: translateY(0); } }
  
  @keyframes cell-in      { to { opacity: 1; transform: scale(1); } }
  
  @keyframes pop {
    0%   { transform: scale(.4) rotate(6deg); opacity: 0; }
    100% { transform: scale(1) rotate(6deg); opacity: 1; }
  }
  
  @keyframes chip-drop {
    60%  { transform: translateY(10%)  scale(1.08); opacity: 1; }
    100% { transform: translateY(0)    scale(1);    opacity: 1; }
  }
  
  @keyframes swirl { to { background-position: 200% 0; } }
  
  /* =================================================== */
  /*                MOBILE-SPECIFIC TWEAKS               */
  /* =================================================== */
  @media (max-width: 480px) {
    :root {
      /* tighter everything for small screens */
      --hdr-chip-size: clamp(2rem, 10vw, 2.8rem);
      --hdr-chip-gap: 0.25rem;
      --gap: 5px;
      --vertical-offset: 9.5rem;
    }
  
    .bingo-container {
      padding: 1rem 0.6rem;
      gap: 0.8rem;
    }
  
    .refresh-btn {
      font-size: 0.85rem;
      padding: 0.5rem 0.9rem;
    }
  
    .bingo-cell { padding: 4px; }
  }

  
  /* ─── Home Button (circular with icon) ─────────────────── */
  #homeBtn {
    position: fixed;
    bottom: 1rem;
    right: 1rem;

    width: 3.5rem;
    height: 3.5rem;
    padding: 0;                         /* remove default padding */

    background-color: rgba(0, 0, 0, 0.7);
    background-image: url('/assets/back_btn.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1.8rem 1.8rem;     /* adjust icon size */

    border: none;
    border-radius: 50%;                 /* make it a circle */
    cursor: pointer;

    z-index: 200;
    transition: background-color 0.2s ease;
  }

  #homeBtn:hover {
    background-color: rgba(0, 0, 0, 0.85);
  }