/* ================================
   The Parisii Beatles Web App — Base UI
   Minimal, accessible, portfolio-ready
   (Clean single-source CSS: no duplicates / no overrides fighting)
   ================================ */

   :root{
    /* Core */
    --bg: #ffffff;
    --surface: #f6f7f9;
    --text: #111111;
    --muted: #4b5563;
    --border: rgba(0,0,0,.12);
  
    /* Accent */
    --accent: #ffcc00;
    --accent-2: #ff8c00;
  
    /* Layout */
    --radius: 14px;
    --shadow: 0 10px 28px rgba(0,0,0,.08);
    --max: 1100px;
  
    /* Type scale */
    --font-base: 16px;
    --font-scale: 1; /* normal */
  }
  
  /* Dark Theme */
  body.theme-dark{
    --bg: #0f1115;
    --surface: #161a22;
    --text: #f3f4f6;
    --muted: #cbd5e1;
    --border: rgba(255,255,255,.14);
    --shadow: 0 18px 40px rgba(0,0,0,.45);
  }
  
  /* High Contrast (simple + safe) */
  body.contrast-high{
    --border: rgba(255,204,0,.65);
  }
  
  /* Larger font (toggle) */
  body.font-large{
    --font-scale: 1.15;
  }
  
  /* Global reset */
  *{ box-sizing: border-box; }
  html, body{ height: 100%; }
  
  body{
    margin:0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: calc(var(--font-base) * var(--font-scale));
    line-height: 1.55;
    transition: background .25s ease, color .25s ease;
  }
  
  /* ================================
     Header + Nav
     ================================ */
  
  .app-header{
    width: 100%;
    border-bottom: 2px solid rgba(255,204,0,.65);
    background: linear-gradient(180deg, var(--bg), rgba(0,0,0,0));
    padding: 16px 18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 12px;
  }
  
  .app-header > *{
    max-width: var(--max);
    margin: 0 auto;
  }
  
  .app-header h1{
    margin:0;
    font-size: 1.35rem;
    letter-spacing: .2px;
  }
  
  .accessibility-controls{
    display:flex;
    gap: 8px;
    align-items:center;
  }
  
  .accessibility-controls button{
    appearance: none;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    border-radius: 10px;
    padding: 8px 10px;
    font-weight: 900;
    cursor: pointer;
    transition: transform .12s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
  }
  
  .accessibility-controls button:hover{
    border-color: rgba(255,204,0,.7);
    transform: translateY(-1px);
  }
  
  .accessibility-controls button:focus{
    outline: none;
    box-shadow: 0 0 0 4px rgba(255,204,0,.22);
  }
  
  .accessibility-controls button[aria-pressed="true"]{
    border-color: rgba(255,204,0,.95);
    box-shadow: 0 0 0 4px rgba(255,204,0,.18);
  }
  
  /* Nav */
  .app-nav{
    max-width: var(--max);
    margin: 0 auto;
    padding: 14px 18px;
    display:flex;
    flex-wrap: wrap;
    gap: 10px;
    border-bottom: 1px solid var(--border);
  }
  
  .app-nav button{
    appearance:none;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    padding: 10px 12px;
    border-radius: 999px;
    cursor:pointer;
    font-weight: 900;
    transition: transform .12s ease, border-color .2s ease, box-shadow .2s ease;
  }
  
  .app-nav button:hover{
    border-color: rgba(255,204,0,.7);
    transform: translateY(-1px);
  }
  
  .app-nav button:focus{
    outline:none;
    box-shadow: 0 0 0 4px rgba(255,204,0,.22);
  }
  
  /* ================================
     Main Container
     ================================ */
  
  #game-container{
    max-width: var(--max);
    margin: 0 auto;
    padding: 22px 18px 44px;
  }
  
  /* ================================
     Panels (all pages)
     ================================ */
  
  .panel{
    background: linear-gradient(180deg, var(--surface), rgba(0,0,0,0));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px 16px;
  }
  
  .panel h2{
    margin: 0 0 10px;
    font-size: 1.35rem;
  }
  
  .panel p{
    margin: 8px 0;
    color: var(--text);
  }
  
  .panel .muted{
    color: var(--muted);
  }
  
  /* ================================
     Home (nice layout)
     ================================ */
  
  .home-grid{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 14px;
  }
  
  .home-card{
    border: 1px solid var(--border);
    background: var(--bg);
    border-radius: 14px;
    padding: 14px 12px;
  }
  
  .home-card h3{
    margin: 0 0 6px;
    font-size: 1.05rem;
  }
  
  .home-card p{
    margin: 0;
    color: var(--muted);
    font-weight: 650;
  }
  
  /* ================================
     Settings Page blocks
     ================================ */
  
  .settings-block{
    margin-top: 14px;
    padding: 14px 12px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--bg);
  }
  
  .settings-block h3{
    margin: 0 0 10px;
    font-size: 1.05rem;
  }
  
  .settings-grid{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
  }
  
  .setting{
    display:flex;
    flex-direction: column;
    gap: 6px;
    font-weight: 900;
  }
  
  .setting span{
    color: var(--muted);
    font-size: .95rem;
    font-weight: 850;
  }
  
  .setting select{
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    border-radius: 10px;
    padding: 10px 10px;
    font-weight: 900;
  }
  
  .setting select:focus{
    outline: none;
    box-shadow: 0 0 0 4px rgba(255,204,0,.22);
    border-color: rgba(255,204,0,.7);
  }
  
  .settings-note{
    margin-top: 10px;
    color: var(--muted);
    font-weight: 700;
    font-size: .95rem;
  }
  
  /* ================================
     Forms + Buttons (shared)
     ================================ */
  
  input, select, button{ font: inherit; }
  
  input[type="text"]{
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    border-radius: 10px;
    padding: 10px 10px;
    font-weight: 850;
  }
  
  input[type="text"]::placeholder{
    color: rgba(127,127,127,.9);
  }
  
  input[type="text"]:focus{
    outline: none;
    box-shadow: 0 0 0 4px rgba(255,204,0,.22);
    border-color: rgba(255,204,0,.7);
  }
  
  button{
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    border-radius: 10px;
    padding: 10px 12px;
    font-weight: 950;
    cursor: pointer;
    transition: transform .12s ease, border-color .2s ease, box-shadow .2s ease, opacity .2s ease;
  }
  
  button:hover{
    border-color: rgba(255,204,0,.7);
    transform: translateY(-1px);
  }
  
  button:focus{
    outline: none;
    box-shadow: 0 0 0 4px rgba(255,204,0,.22);
  }
  
  button:disabled{
    opacity: .45;
    cursor: not-allowed;
    transform: none;
  }
  
  /* Primary CTA */
  .btn-primary{
    background: linear-gradient(180deg, rgba(255,204,0,.95), rgba(255,140,0,.9));
    border-color: rgba(255,204,0,.9);
    color: #111;
    box-shadow: 0 10px 26px rgba(0,0,0,.18);
  }
  
  /* ================================
     Seat Selector — tidy settings + grid
     ================================ */
  
  .seat-controls{ margin: 10px 0 16px; }
  
  .seat-row{
    display:flex;
    gap: 10px;
    align-items: flex-end;
    flex-wrap: wrap;
    margin: 10px 0;
  }
  
  /* Top row feels like “Seat Settings” */
  .seat-row:first-of-type{
    padding: 12px;
    border: 1px solid var(--border);
    background: var(--bg);
    border-radius: 14px;
  }
  
  .field{
    display:flex;
    flex-direction: column;
    gap: 6px;
    font-weight: 950;
  }
  
  .field span{
    color: var(--muted);
    font-size: .95rem;
    font-weight: 900;
  }
  
  .field.grow{
    flex: 1;
    min-width: 260px;
  }
  
  .seat-warn{
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255,0,0,.25);
    background: rgba(255,0,0,.06);
    color: var(--text);
  }
  .seat-warn code{ font-weight: 950; }
  
  /* Quote callout */
  .seat-quote{
    margin: 10px 0 14px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--bg);
    font-size: 0.98rem;
    line-height: 1.35;
    color: var(--text);
  }
  
  /* Seat grid cards */
  .seat-grid{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
    margin-top: 10px;
  }
  
  .seat{
    border-radius: 16px;
    padding: 12px;
    border: 2px solid rgba(255, 204, 0, .65);
    background: rgba(255,255,255,.03);
    box-shadow: 0 10px 30px rgba(0,0,0,.18);

    display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 140px;
  }
  body:not(.theme-dark) .seat{
    background: rgba(0,0,0,.02);
  }
  
  .seat .seat-number{
    font-weight: 1000;
    opacity:.95;
    margin-bottom: 6px;
  }
  
  .seat .seat-song{
    font-size:.92rem;
    opacity:.95;
    margin-bottom: 6px;
    color: var(--muted);
    font-weight: 900;
  }
  
  .seat .student-name{ font-weight: 1000; }
  .seat .seat-empty{ opacity:.75; font-weight: 950; }
  
  .seat.claimed{
    border-color: rgba(255, 204, 0, .95);
    background: rgba(255, 204, 0, .08);
  }
  
  /* ================================
     Bingo Module (Sgt Pepper vibe)
     Drop-in styles for js/games/bingo.js
     ================================ */
  
  .bingo-wrap{
    display: grid;
    gap: 14px;
  }
  
  .bingo-topbar{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: end;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--bg);
  }
  
  .bingo-topbar .field{
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-weight: 900;
    min-width: 180px;
  }
  
  .bingo-topbar .field span{
    color: var(--muted);
    font-size: .95rem;
  }
  
  .bingo-topbar select{
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    border-radius: 10px;
    padding: 10px 10px;
    font-weight: 1000;
  }
  
  .bingo-actions{
    display: flex;
    gap: 10px;
    margin-left: auto;
    flex-wrap: wrap;
  }
  
  .bingo-actions button{
    appearance: none;
    border: 1px solid rgba(255,204,0,.55);
    background: var(--surface);
    color: var(--text);
    padding: 10px 14px;
    border-radius: 12px;
    font-weight: 1000;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease;
  }
  
  .bingo-actions button:hover{
    transform: translateY(-1px);
    border-color: rgba(255,204,0,.9);
    box-shadow: 0 0 0 4px rgba(255,204,0,.15);
  }
  
  .bingo-actions button:disabled{
    opacity: .5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
  }
  
  .bingo-actions .btn-primary{
    background: linear-gradient(180deg, #ffd84d, #f1b82b);
    color: #141414;
    border-color: rgba(255,204,0,.95);
  }
  
  .bingo-stage{
    position: relative;
    padding: 18px 14px 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: linear-gradient(180deg, var(--bg), rgba(0,0,0,0));
    min-height: 420px;
    overflow: hidden;
  }
  
  .bingo-center{
    min-height: 250px;
    display: grid;
    place-items: center;
    text-align: center;
    gap: 10px;
    padding: 12px;
  }
  
  .bingo-call{
    font-size: 1.15rem;
    font-weight: 1000;
    letter-spacing: .3px;
  }
  
  .bingo-fact{
    color: var(--muted);
    font-weight: 900;
    max-width: 52ch;
    margin: 0 auto;
  }
  
  .bingo-sub{
    color: var(--muted);
    font-weight: 900;
    margin-top: 6px;
  }
  
  /* BIG BALL */
  .bingo-ball-big{
    width: 170px;
    height: 170px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    margin: 0 auto;
    position: relative;
    border: 3px solid rgba(255,204,0,.85);
    box-shadow: 0 18px 50px rgba(0,0,0,.45);
    user-select: none;
  }
  
  .bingo-ball-big::before{
    content:"";
    position:absolute;
    top: 12px;
    left: 16px;
    width: 56px;
    height: 56px;
    border-radius: 999px;
    background: rgba(255,255,255,.55);
    filter: blur(1px);
    opacity: .55;
  }
  
  .bingo-ball-big .big-letter{
    font-size: 1.6rem;
    font-weight: 1000;
    line-height: 1;
    opacity: .92;
  }
  
  .bingo-ball-big .big-num{
    font-size: 3.2rem;
    font-weight: 1100;
    line-height: 1;
  }
  
  .bingo-pop{
    animation: bingoPop .35s ease;
  }
  @keyframes bingoPop{
    0%{ transform: scale(.92); }
    60%{ transform: scale(1.06); }
    100%{ transform: scale(1); }
  }
  
  /* CALLED BALLS GRID (stable, no overlap) */
  .bingo-history{
    margin-top: 10px;
    border-top: 1px solid var(--border);
    padding-top: 12px;
  }
  
  .bingo-history-title{
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    color: var(--muted);
    font-weight: 1000;
  }
  
  .bingo-balls-grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
    gap: 10px;
    place-items: center;
    max-height: 170px;
    overflow-y: auto;
    padding-right: 6px;
  }
  
  /* small balls */
  .bingo-ball{
    width: 44px;
    height: 44px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-weight: 1100;
    color: #111;
    border: 2px solid rgba(255,204,0,.85);
    box-shadow: 0 10px 22px rgba(0,0,0,.3);
    position: relative;
    user-select: none;
  }
  
  .bingo-ball::before{
    content:"";
    position:absolute;
    top: 5px;
    left: 7px;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.55);
    opacity: .6;
  }
  
  /* Sgt Pepper-ish colour families by B I N G O bucket */
  .ball-b{ background: radial-gradient(circle at 30% 25%, #ffd1d1 0%, #ff4d5f 55%, #b8001d 100%); }
  .ball-i{ background: radial-gradient(circle at 30% 25%, #ffe3c2 0%, #ff9c2a 55%, #c25f00 100%); }
  .ball-n{ background: radial-gradient(circle at 30% 25%, #fff2b6 0%, #ffd84d 55%, #c99000 100%); }
  .ball-g{ background: radial-gradient(circle at 30% 25%, #d2ffd6 0%, #2fd56a 55%, #0a7a32 100%); }
  .ball-o{ background: radial-gradient(circle at 30% 25%, #d7e6ff 0%, #4f7cff 55%, #1d2ea8 100%); }
  
  /* Countdown overlay (pre-start timer) */
  .bingo-overlay{
    position: absolute;
    inset: 0;
    background: rgba(10,12,16,.72);
    display: none;
    place-items: center;
    z-index: 10;
    backdrop-filter: blur(3px);
  }
  
  .bingo-overlay.show{ display: grid; }
  
  .bingo-countdown{
    text-align: center;
    padding: 18px 16px;
    border-radius: 16px;
    border: 1px solid rgba(255,204,0,.55);
    background: rgba(15,17,21,.75);
    box-shadow: 0 18px 45px rgba(0,0,0,.55);
  }
  
  .bingo-countdown .label{
    font-weight: 1000;
    color: rgba(255,204,0,.95);
    letter-spacing: .3px;
  }
  
  .bingo-countdown .time{
    font-size: 4rem;
    font-weight: 1100;
    margin-top: 6px;
  }
  
  /* BIG FINISH */
  .bingo-finish{
    text-align: center;
    padding: 22px 18px;
    border-radius: 18px;
    border: 1px solid rgba(255,204,0,.75);
    background: rgba(15,17,21,.82);
    box-shadow: 0 22px 60px rgba(0,0,0,.6);
    position: relative;
    overflow: hidden;
  }
  
  /* confetti burst */
  .bingo-finish::before,
  .bingo-finish::after{
    content:"";
    position:absolute;
    inset:-30%;
    background:
      radial-gradient(circle, rgba(255,204,0,.9) 0 2px, transparent 3px) 0 0/26px 26px,
      radial-gradient(circle, rgba(255,77,95,.9) 0 2px, transparent 3px) 10px 12px/28px 28px,
      radial-gradient(circle, rgba(79,124,255,.9) 0 2px, transparent 3px) 18px 6px/30px 30px,
      radial-gradient(circle, rgba(47,213,106,.9) 0 2px, transparent 3px) 6px 18px/24px 24px;
    opacity: .22;
    transform: rotate(8deg);
    animation: confettiDrift 2.2s ease infinite;
    pointer-events: none;
  }
  .bingo-finish::after{
    opacity: .14;
    transform: rotate(-10deg);
    animation-duration: 2.8s;
  }
  
  @keyframes confettiDrift{
    0%{ transform: translateY(-8px) rotate(8deg); }
    50%{ transform: translateY(8px) rotate(8deg); }
    100%{ transform: translateY(-8px) rotate(8deg); }
  }
  
  .bingo-finish-title{
    display:flex;
    gap: 8px;
    justify-content: center;
    align-items: baseline;
    margin-bottom: 10px;
  }
  
  .bingo-letter{
    font-size: 3.2rem;
    font-weight: 1100;
    text-shadow: 0 10px 30px rgba(0,0,0,.55);
    animation: letterBounce 1.1s ease infinite;
  }
  .bingo-letter:nth-child(2){ animation-delay: .08s; }
  .bingo-letter:nth-child(3){ animation-delay: .16s; }
  .bingo-letter:nth-child(4){ animation-delay: .24s; }
  .bingo-letter:nth-child(5){ animation-delay: .32s; }
  
  @keyframes letterBounce{
    0%{ transform: translateY(0) scale(1); }
    35%{ transform: translateY(-10px) scale(1.03); }
    65%{ transform: translateY(0) scale(1); }
    100%{ transform: translateY(0) scale(1); }
  }
  
  .bingo-finish p{
    margin: 0;
    font-weight: 1000;
    color: var(--text);
  }
  
  .bingo-brand{
    margin-top: 10px;
    color: rgba(255,204,0,.85);
    font-weight: 1100;
    letter-spacing: .3px;
  }
  
  .bingo-watermark{
    margin-top: 12px;
    font-size: .95rem;
    color: rgba(255,204,0,.75);
    font-weight: 1000;
  }
  
  /* smaller screens */
  @media (max-width: 640px){
    .bingo-ball-big{ width: 140px; height: 140px; }
    .bingo-ball-big .big-num{ font-size: 2.8rem; }
  }
  
  /* ================================
     Reduced Motion (optional future hook)
     ================================ */
  body.low-motion *{
    transition: none !important;
    animation: none !important;
  }

  /* LICURSI.DEV — corner stamp watermark (safe, doesn’t overlap content) */
body::after{
  content: "licursi.dev";
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  pointer-events: none;

  padding: 10px 16px;
  border-radius: 14px;
  border: 2px solid rgba(255,204,0,.75);
  background: rgba(10,12,16,.72);
  color: rgba(255,204,0,.95);

  font-weight: 1000;
  letter-spacing: .18em;
  text-transform: none;

  transform: rotate(-10deg);
  box-shadow: 0 18px 45px rgba(0,0,0,.55);
}

/* keep it tidy on smaller screens */
@media (max-width: 720px){
  body::after{
    right: 10px;
    bottom: 10px;
    padding: 8px 12px;
    border-radius: 12px;
    transform: rotate(-8deg) scale(.92);
  }
}

/* ========================= */
/* Battleships Layout */
/* ========================= */

.bb-game-layout{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  gap:40px;
  margin-top:30px;
}

.bb-board-area{
  display:flex;
  flex-direction:column;
  align-items:center;
}

.bb-panel{
  width:260px;
  display:flex;
  flex-direction:column;
  gap:16px;
}

.bb-status{
  font-weight:900;
  text-align:center;
  font-size:18px;
}


/* ========================= */
/* Team Names */
/* ========================= */

.bb-team-names{
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px;
  max-width:520px;
  margin:0 auto 25px auto;

  display:flex;
  flex-direction:column;
  gap:6px;
}

.bb-team-names h4{
  text-align:center;
  margin:0;
}

.bb-team-names input{
  height:32px;
  padding:4px 8px;
  border-radius:6px;
  border:1px solid var(--border);
}


/* ========================= */
/* Scoreboard */
/* ========================= */

.bb-scoreboard{
  display:flex;
  justify-content:center;
  gap:30px;
  margin-bottom:20px;
}

.bb-score-card{
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 20px;

  display:flex;
  flex-direction:column;
  align-items:center;
}

.bb-score-name{
  font-weight:900;
  font-size:16px;
}

.bb-score-value{
  font-size:28px;
  font-weight:900;
}


/* ========================= */
/* Battleships Board */
/* ========================= */

.bb-wrapper{
  position:relative;
  width:550px;
  max-width:95vw;
  overflow:hidden;
}

.bb-board-image{
  width:100%;
  display:block;
}

.bb-board{
  position:absolute;
  top:95px;
  left:110px;

  width:330px;
  height:330px;

  display:grid;
  grid-template-columns:repeat(10,1fr);
  grid-template-rows:repeat(10,1fr);
}


/* ========================= */
/* Grid Cells */
/* ========================= */

.bb-cell{
  display:flex;
  justify-content:center;
  align-items:center;
  position:relative;
}


/* ========================= */
/* Hit / Miss Markers */
/* ========================= */

.bb-cell img:not(.bb-ship){
  width:85%;
  pointer-events:none;
  position:relative;
  z-index:5;   /* ABOVE ships */
}


/* ========================= */
/* Revealed Ships */
/* ========================= */

.bb-ship{
  position:absolute;

  width:200%;
  height:200%;

  object-fit:contain;
  pointer-events:none;

  z-index:3;   /* BELOW markers */

  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
}


/* ========================= */
/* Team Input Panels */
/* ========================= */

.bb-team-box{
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;

  display:flex;
  flex-direction:column;
  gap:10px;
}

.bb-team-box h4{
  text-align:center;
  margin:0;
}

.bb-team-box input{
  padding:6px;
  border-radius:6px;
  border:1px solid var(--border);
}

.bb-team-box button{
  padding:8px;
  font-weight:700;
  cursor:pointer;
}


/* ========================= */
/* Fleet Displays */
/* ========================= */

#bb-red-fleet-box,
#bb-blue-fleet-box{
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px;

  display:flex;
  flex-direction:column;
  gap:6px;
}

#bb-red-fleet-box img,
#bb-blue-fleet-box img{
  width:100%;
  object-fit:contain;
}


/* ========================= */
/* Animations */
/* ========================= */

.bb-sub{
  position:absolute;
  width:60px;
  z-index:20;
}

.bb-torpedo{
  position:absolute;
  width:35px;
  z-index:25;
}


/* ========================= */
/* Title */
/* ========================= */

h2{
  text-align:center;
}


/* ========================= */
/* Win Effects */
/* ========================= */

.bb-win{
  display:block;
  font-size:36px;
  font-weight:900;
  color:#ffcc00;
  text-align:center;
  animation: bbWinPulse 0.8s infinite alternate;
}

@keyframes bbWinPulse{
  from{
    transform:scale(1);
  }
  to{
    transform:scale(1.15);
  }
}

.bb-flash{
  animation: bbFlash 0.4s ease;
}

@keyframes bbFlash{
  0%{
    background:rgba(255,255,255,0.8);
  }
  100%{
    background:transparent;
  }
}

.bb-cheat-panel {
  position: absolute !important;
  top: 120px;
  right: 20px;

  width: 280px;
  max-height: 70vh;
  overflow-y: auto;

  background: linear-gradient(180deg, #0b0f18, #0a0d14);
  border: 1px solid rgba(255, 204, 0, 0.7);
  border-radius: 12px;

  box-shadow: 0 10px 30px rgba(0,0,0,0.5);

  z-index: 99999;
}

.bb-cheat-panel summary {
  cursor: pointer;
  padding: 10px 12px;
  font-weight: 900;
  color: #ffcc00; /* Beatles gold */
  border-bottom: 1px solid rgba(255, 204, 0, 0.3);
}

.bb-cheat {
  margin: 0;
  padding: 10px 12px;

  font-size: 0.75rem;   /* 👈 bigger but still compact */
  line-height: 1.35;

  color: #e6e6e6;
  white-space: pre-wrap;
}

/* ================================
   Responsive Patch — Parisii Beatles App
   Keeps desktop intact, fixes tablet/mobile
   ================================ */

   html,
   body{
     width:100%;
     overflow-x:hidden;
   }
   
   img{
     max-width:100%;
   }
   
   /* Prevent wide content from forcing page overflow */
   #game-container,
   .panel,
   .home-card,
   .settings-block,
   .seat,
   .bingo-wrap,
   .bingo-stage,
   .bb-team-names,
   .bb-team-box,
   .bb-scoreboard,
   .bb-game-layout,
   .bb-board-area,
   .bb-panel{
     min-width:0;
   }
   
   /* Header and nav safety */
   .app-header{
     flex-wrap:wrap;
   }
   
   .app-header h1{
     overflow-wrap:anywhere;
   }
   
   .app-nav{
     overflow-x:auto;
     -webkit-overflow-scrolling:touch;
     scrollbar-width:thin;
   }
   
   .app-nav button{
     white-space:nowrap;
   }
   
   /* Stop fixed watermark overlapping important mobile content */
   @media (max-width: 900px){
     body::after{
       right:10px;
       bottom:10px;
       transform:rotate(-8deg) scale(.82);
       font-size:.8rem;
       padding:7px 10px;
     }
   
     .bb-cheat-panel{
       position:static !important;
       width:100%;
       max-height:260px;
       margin:14px 0;
     }
   }
   
   /* Tablet and smaller */
   @media (max-width: 768px){
     .app-header{
       align-items:flex-start;
       gap:14px;
     }
   
     .app-header h1{
       font-size:1.15rem;
       max-width:100%;
     }
   
     .accessibility-controls{
       flex-wrap:wrap;
       justify-content:flex-start;
     }
   
     .app-nav{
       max-width:100%;
       padding:12px 14px;
       flex-wrap:nowrap;
     }
   
     #game-container{
       padding:18px 14px 36px;
     }
   
     .panel{
       padding:16px 14px;
     }
   
     .home-grid,
     .settings-grid,
     .seat-grid{
       grid-template-columns:1fr;
     }
   
     .seat-row,
     .bingo-topbar{
       flex-direction:column;
       align-items:stretch;
     }
   
     .field,
     .field.grow,
     .bingo-topbar .field{
       width:100%;
       min-width:0;
     }
   
     .seat-row button,
     .bingo-actions,
     .bingo-actions button{
       width:100%;
     }
   
     .bingo-actions{
       margin-left:0;
       flex-direction:column;
     }
   
     .bingo-stage{
       min-height:auto;
       padding:14px 12px;
     }
   
     .bingo-ball-big{
       width:130px;
       height:130px;
     }
   
     .bingo-ball-big .big-num{
       font-size:2.5rem;
     }
   
     .bingo-finish-title{
       gap:5px;
     }
   
     .bingo-letter{
       font-size:2.1rem;
     }
   
     /* Battleships: stack the wide game instead of crushing it */
     .bb-game-layout{
       flex-direction:column;
       align-items:center;
       gap:24px;
       margin-top:22px;
     }
   
     .bb-board-area{
       width:100%;
     }
   
     .bb-panel{
       width:min(100%, 420px);
       order:-1;
     }
   
     .bb-team-names{
       width:100%;
       max-width:520px;
     }
   
     .bb-scoreboard{
       flex-wrap:wrap;
       gap:14px;
     }
   
     .bb-score-card{
       flex:1 1 140px;
     }
   
     .bb-wrapper{
       width:min(100%, 550px);
       max-width:100%;
       overflow-x:auto;
     }
   
     #bb-red-fleet-box,
     #bb-blue-fleet-box{
       width:100%;
     }
   }
   
   /* Phone portrait */
   @media (max-width: 520px){
     .app-header{
       flex-direction:column;
       align-items:stretch;
       padding:14px;
     }
   
     .app-header h1{
       font-size:1rem;
       line-height:1.25;
     }
   
     .accessibility-controls{
       justify-content:flex-start;
     }
   
     .accessibility-controls button{
       padding:7px 9px;
     }
   
     .app-nav{
       gap:8px;
       padding:10px 12px;
     }
   
     .app-nav button{
       padding:9px 11px;
       font-size:.95rem;
     }
   
     #game-container{
       padding:14px 10px 30px;
     }
   
     .panel{
       border-radius:12px;
       padding:14px 12px;
     }
   
     .panel h2{
       font-size:1.15rem;
     }
   
 input[type="text"],
select{
  width:100%;
}

.seat-row button,
.bingo-actions button,
.bb-team-box button{
  width:100%;
}

.accessibility-controls{
  flex-direction:row;
  flex-wrap:wrap;
}

.accessibility-controls button{
  width:auto;
  min-width:48px;
  min-height:48px;
}
   
     .seat{
       min-height:auto;
     }
   
     .bingo-center{
       min-height:220px;
       padding:8px;
     }
   
     .bingo-call{
       font-size:1rem;
     }
   
     .bingo-balls-grid{
       grid-template-columns:repeat(auto-fill, minmax(40px, 1fr));
       gap:8px;
     }
   
     .bingo-ball{
       width:38px;
       height:38px;
       font-size:.85rem;
     }
   
     .bingo-countdown .time{
       font-size:3rem;
     }
   
     .bingo-letter{
       font-size:1.55rem;
     }
   
     /* Battleships: make board usable on phone */
     .bb-scoreboard{
       flex-direction:column;
       align-items:stretch;
     }
   
     .bb-score-card{
       width:100%;
     }
   
     .bb-team-names{
       padding:10px;
     }
   
     .bb-team-box{
       padding:10px;
     }
   
     .bb-status{
       font-size:1rem;
     }
   
     .bb-win{
       font-size:1.6rem;
     }
   
     .bb-wrapper{
       width:100%;
       max-width:100%;
     }
   
     .bb-cheat-panel{
       max-height:220px;
     }
   
     body::after{
       display:none;
     }
   }
   
   /* Very small phones */
   @media (max-width: 380px){
     .app-header h1{
       font-size:.95rem;
     }
   
     .app-nav button{
       font-size:.9rem;
       padding:8px 10px;
     }
   
     .panel h2{
       font-size:1rem;
     }
   
     .bingo-ball-big{
       width:110px;
       height:110px;
     }
   
     .bingo-ball-big .big-num{
       font-size:2.1rem;
     }
   
     .bb-board{
       top:17.3%;
       left:20%;
       width:60%;
       height:60%;
     }
   }
   
   /* Landscape phones: give wide games more room */
   @media (max-height: 520px) and (orientation: landscape){
     .app-header{
       padding:10px 14px;
     }
   
     .app-nav{
       padding:8px 14px;
     }
   
     #game-container{
       padding-top:12px;
     }
   
     .bb-game-layout{
       flex-direction:row;
       align-items:flex-start;
       overflow-x:auto;
       justify-content:flex-start;
       padding-bottom:12px;
     }
   
     .bb-panel{
       order:0;
       flex:0 0 260px;
     }
   
     .bb-board-area{
       flex:0 0 480px;
     }
   
     body::after{
       display:none;
     }
   }
   
   @media (max-width: 520px){
    .app-header{
      text-align:center;
      align-items:center;
    }
  
    .app-header h1{
      width:100%;
      text-align:center;
    }
  
    .accessibility-controls{
      width:100%;
      justify-content:center;
    }
  }

  @media (max-width: 900px){

    .bb-cheat-panel + .bb-cheat-panel{
  
      display:none;
  
    }
  
  }