/* Bảng chơi 2 đội: thanh điểm vàng ở trên, lưới 2×2 ô số xanh. Giao diện cố định một kiểu sáng. */
  :root {
    --bar: #fbc565;
    --bg: #ffffff;
    --ink: #333333;
    --hot: #ff6b6b;
    --blue-light: #4a9bfb;
    --blue-light-2: #5b8ef0;
    --blue-dark: #2489f5;
    --blue-dark-2: #3a62c0;
    --ok: #2f9e44;
    --no: #e03131;
    --show: #f08c00;
    --white: #ffffff;
    --font-num: 'Luckiest Guy', 'Arial Black', Impact, sans-serif;
    --font-text: 'Roboto Slab', Georgia, serif;
  }
  html, body { height: 100%; }
  * { box-sizing: border-box; }
  [hidden] { display: none !important; }
  body {
    margin: 0; font-family: var(--font-text); background: var(--bg); color: var(--ink);
    display: flex; flex-direction: column;
  }

  header {
    background: var(--bar);
    display: flex; justify-content: space-around; align-items: center;
    padding-block: 12px 16px;
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
  .team {
    text-align: center; cursor: pointer; user-select: none;
    background: none; border: none; font: inherit; color: var(--ink);
  }
  .team .name { font-size: clamp(26px, 5vw, 56px); padding: 0 20px; }
  .team.active .name { background: var(--hot); color: var(--white); }
  .team .score { font-family: var(--font-num); font-size: clamp(30px, 5vw, 48px); font-variant-numeric: tabular-nums; }

  main {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 12px;
    padding-block: 20px;
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
  .tile {
    border: none; border-radius: 22px; cursor: pointer;
    font-family: var(--font-num); color: var(--white);
    font-size: clamp(64px, 12vw, 140px);
    min-height: 140px;
    transition: transform .2s, background .2s, color .2s;
  }
  .tile.light { background: linear-gradient(var(--blue-light), var(--blue-light-2)); }
  .tile.dark  { background: linear-gradient(var(--blue-dark), var(--blue-dark-2)); }
  .tile:hover, .tile:focus-visible {
    background: var(--bar); color: var(--blue-dark); transform: rotate(2deg) scale(1.03); outline: none;
  }
  .tile.done { visibility: hidden; }

  .overlay {
    position: fixed; inset: 0; background: var(--bg);
    display: flex;
  }
  .card {
    flex: 1; min-height: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; padding: 16px 24px 24px; text-align: center;
  }
  .card .num { font-family: var(--font-num); font-size: 40px; color: var(--blue-dark); }
  .card .q { font-size: clamp(32px, 6vw, 72px); text-wrap: balance; }
  .card .a { font-family: var(--font-num); font-size: clamp(32px, 6vw, 72px); color: var(--blue-dark); min-height: 1.2em; }
  .btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
  .btns button {
    border: none; border-radius: 12px; padding: 16px 32px; font: inherit; font-size: 24px;
    cursor: pointer; color: var(--white);
  }
  .btns button:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
  .b-show { background: var(--show); }
  .b-ok { background: var(--ok); }
  .b-no { background: var(--no); }
  @media (prefers-reduced-motion: reduce) { .tile { transition: none; } .tile:hover { transform: none; } }

  .finish {
    position: fixed; inset: 0; background: #000;
    display: flex; align-items: center; justify-content: center; padding: 16px;
  }
  .finish canvas { position: absolute; inset: 0; }
  .finish-card {
    position: relative; background: var(--bg); border-radius: 22px;
    width: min(560px, 100%); padding: 28px 24px; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    animation: pop .5s ease-out;
  }
  .finish-card img { max-width: 100%; max-height: 45vh; border-radius: 16px; }
  .winner { font-family: var(--font-num); font-size: clamp(32px, 6vw, 56px); color: var(--blue-dark); }
  .final-score { display: flex; gap: 16px; justify-content: center; }
  .final-score div {
    background: var(--bar); border-radius: 16px; padding: 10px 28px;
    display: flex; flex-direction: column; align-items: center;
  }
  .final-score span { font-size: 22px; }
  .final-score b { font-family: var(--font-num); font-weight: normal; font-size: 48px; font-variant-numeric: tabular-nums; }
  @keyframes pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
  .card .hint { display: block; flex: 1 1 auto; min-height: 0; max-width: 100%; max-height: 60vh; object-fit: contain; border-radius: 20px; }