/* 配信目標ビンゴ（配信画面） */
html, body {
  margin: 0;
  padding: 0;
  background: transparent;
  overflow: hidden;
  font-family: "Yu Gothic UI", "Meiryo", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.hint {
  position: fixed; left: 12px; right: 12px; bottom: 12px;
  padding: 10px 14px; background: rgba(20, 24, 33, 0.92); color: #fff;
  font-size: 14px; line-height: 1.6; border-radius: 10px; z-index: 10;
}
.hint a { color: #8fd3ff; }
.notice {
  position: fixed; left: 12px; top: 12px; padding: 10px 14px;
  background: rgba(160, 30, 40, 0.92); color: #fff; font-size: 14px; border-radius: 10px; z-index: 11;
}

.bingo {
  --base: 26px;
  --w: 16;
  --fs: 0.6;
  width: calc(var(--base) * var(--w));
  max-width: calc(100vw - var(--base));
  margin: calc(var(--base) * 0.5);
  padding: calc(var(--base) * 0.6);
  border-radius: calc(var(--base) * 0.7);
  box-sizing: border-box;
}
.bingo.size-S { --base: 19px; }
.bingo.size-M { --base: 26px; }
.bingo.size-L { --base: 36px; }
.bingo.g3 { --w: 16; --fs: 0.62; }
.bingo.g4 { --w: 19; --fs: 0.52; }
.bingo.g5 { --w: 22; --fs: 0.44; }

.head {
  display: flex; align-items: center; justify-content: space-between; gap: calc(var(--base) * 0.4);
  margin-bottom: calc(var(--base) * 0.45);
  min-height: calc(var(--base) * 1.2);
}
.head.no-title { justify-content: flex-end; }
.title {
  flex: 1 1 auto; min-width: 0;
  font-size: calc(var(--base) * 0.85); font-weight: 900; line-height: 1.25;
  overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.head.no-title .title { display: none; }
.badge {
  flex: 0 0 auto; white-space: nowrap;
  padding: calc(var(--base) * 0.1) calc(var(--base) * 0.5);
  border-radius: 999px;
  font-size: calc(var(--base) * 0.55); font-weight: 900; letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.badge:not(.on) { visibility: hidden; }

.card-wrap { position: relative; }
.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--base) * 0.22);
}
.g4 .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g5 .grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.cell {
  position: relative;
  aspect-ratio: 1 / 1;
  min-width: 0;
  border-radius: calc(var(--base) * 0.35);
  padding: calc(var(--base) * 0.2);
  box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  overflow: hidden;
  transition: background-color 0.4s, box-shadow 0.4s;
}
.cell .label {
  max-width: 100%;
  font-size: calc(var(--base) * var(--fs)); font-weight: 800; line-height: 1.22;
  overflow-wrap: anywhere; word-break: normal;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  transition: opacity 0.3s;
}
.cell .prog {
  margin-top: calc(var(--base) * 0.12);
  font-size: calc(var(--base) * var(--fs) * 0.92); font-weight: 900;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  transition: opacity 0.3s;
}
.cell .prog:empty { display: none; }
.cell .num {
  position: absolute; left: calc(var(--base) * 0.14); top: calc(var(--base) * 0.08);
  font-size: calc(var(--base) * var(--fs) * 0.62); font-weight: 800; opacity: 0.6;
  display: none;
}
.nums .cell .num { display: block; }
.cell.type-free .label { font-size: calc(var(--base) * var(--fs) * 1.5); font-weight: 900; letter-spacing: 0.06em; }

/* 埋まった印（スタンプ）。文字の後ろに丸い印を押して、目標の文字は読めるままにする */
.cell .label, .cell .prog { position: relative; z-index: 1; }
.cell .num { z-index: 2; }
.cell .stamp {
  position: absolute; inset: 0; z-index: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; opacity: 0;
}
.cell .stamp span {
  width: 90%; aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: calc(var(--base) * var(--fs) * 0.18) solid var(--stamp-ring);
  background: var(--stamp-bg);
  transform: rotate(-14deg);
  box-sizing: border-box;
}
.cell .check {
  position: absolute; right: calc(var(--base) * 0.12); top: calc(var(--base) * 0.06); z-index: 2;
  font-size: calc(var(--base) * var(--fs) * 0.95); font-weight: 900; line-height: 1;
  color: var(--stamp-ring); opacity: 0;
}
.cell.filled .check { opacity: 1; }
.cell.filled .stamp { opacity: 1; }
.bingo .cell.filled .label, .bingo .cell.filled .prog { color: var(--stamp-text); }
.cell.type-free .stamp, .cell.type-free .check { display: none; }
.cell.stamp-in { animation: bingo-shake 0.5s ease-out; }
.cell.stamp-in .stamp span { animation: bingo-stamp 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.3); }
.cell.stamp-in .check { animation: bingo-check 0.5s ease-out; }
@keyframes bingo-check { 0% { transform: scale(0); } 70% { transform: scale(1.4); } 100% { transform: scale(1); } }
@keyframes bingo-stamp {
  0% { transform: scale(2.2) rotate(-30deg); opacity: 0; }
  60% { transform: scale(0.92) rotate(-12deg); opacity: 1; }
  100% { transform: scale(1) rotate(-14deg); opacity: 1; }
}
@keyframes bingo-shake {
  0%, 100% { transform: translate(0, 0); }
  30% { transform: translate(0, calc(var(--base) * 0.08)); }
  60% { transform: translate(0, calc(var(--base) * -0.04)); }
}
/* リーチ（あと1マスで揃う列の残りのマス） */
.cell.reach { animation: bingo-reach 1.2s ease-in-out infinite; }
@keyframes bingo-reach {
  0%, 100% { box-shadow: 0 0 0 calc(var(--base) * 0.06) var(--reach) inset, 0 0 0 transparent; }
  50% { box-shadow: 0 0 0 calc(var(--base) * 0.12) var(--reach) inset, 0 0 calc(var(--base) * 0.5) var(--reach); }
}

/* BINGO! / COMPLETE（カードの上だけに出して、数秒で消す） */
.burst {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(0.3);
  min-width: 56%; max-width: 92%;
  padding: calc(var(--base) * 0.4) calc(var(--base) * 0.8);
  border-radius: calc(var(--base) * 0.6);
  text-align: center; box-sizing: border-box;
  pointer-events: none; opacity: 0; z-index: 3;
}
.burst-main { font-size: calc(var(--base) * 1.9); font-weight: 900; line-height: 1.1; letter-spacing: 0.04em; white-space: nowrap; }
.burst-sub { margin-top: calc(var(--base) * 0.15); font-size: calc(var(--base) * 0.6); font-weight: 800; white-space: nowrap; }
.g5 .burst-main { font-size: calc(var(--base) * 2.2); }
.burst.show { animation: bingo-burst 3.2s ease-out forwards; }
.complete .burst.show { animation-duration: 5s; }
@keyframes bingo-burst {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3) rotate(-6deg); }
  10% { opacity: 1; transform: translate(-50%, -50%) scale(1.12) rotate(2deg); }
  18% { transform: translate(-50%, -50%) scale(1) rotate(0); }
  82% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.96); }
}

.bingo.waiting .cell { opacity: 0.78; }
.bingo.waiting .cell.type-free { opacity: 1; }

/* pop */
.theme-pop { --reach: #ffb020; background: rgba(255, 255, 255, 0.95); color: #23263a; box-shadow: 0 calc(var(--base) * 0.15) calc(var(--base) * 0.5) rgba(0, 0, 0, 0.25); }
.theme-pop .cell { background: #eef1f8; }
.theme-pop .cell .prog { color: #ff3d6e; }
.theme-pop .cell.filled { background: #ffe8ee; }
.theme-pop .cell.line { background: #ffd1dc; }
.theme-pop { --stamp-ring: #ff3d6e; --stamp-bg: rgba(255, 61, 110, 0.88); --stamp-text: #fff; }
.theme-pop .cell.type-free .label { color: #ff3d6e; }
.theme-pop .cell.type-free { background: repeating-linear-gradient(135deg, #ffe8ee 0 8px, #fff4f7 8px 16px); }
.theme-pop .badge { background: #ff6b8b; color: #fff; }
.theme-pop.waiting .badge { background: #5d6478; }
.theme-pop .burst { background: linear-gradient(135deg, #ff6b8b, #ffb020); color: #fff; box-shadow: 0 calc(var(--base) * 0.2) calc(var(--base) * 0.8) rgba(255, 61, 110, 0.45); }
.theme-pop .burst-main { text-shadow: 0 3px 0 rgba(0, 0, 0, 0.15); }

/* simple */
.theme-simple { --reach: #ffe066; background: rgba(16, 18, 26, 0.78); color: #fff; }
.theme-simple .cell { background: rgba(255, 255, 255, 0.10); }
.theme-simple .cell .prog { color: #ffe066; }
.theme-simple .cell.filled { background: rgba(255, 224, 102, 0.16); }
.theme-simple .cell.line { background: rgba(255, 224, 102, 0.30); }
.theme-simple { --stamp-ring: #ffe066; --stamp-bg: rgba(255, 224, 102, 0.9); --stamp-text: #1a1a1a; }
.theme-simple .cell.type-free .label { color: #ffe066; }
.theme-simple .cell.type-free { background: repeating-linear-gradient(135deg, rgba(255, 224, 102, 0.18) 0 8px, rgba(255, 224, 102, 0.08) 8px 16px); }
.theme-simple .badge { background: #ffe066; color: #1a1a1a; }
.theme-simple.waiting .badge { background: rgba(255, 255, 255, 0.2); color: #fff; }
.theme-simple .burst { background: rgba(16, 18, 26, 0.94); color: #ffe066; border: 2px solid #ffe066; }
.theme-simple .burst-sub { color: #fff; }

/* neon */
.theme-neon { --reach: #b6ff3f; background: rgba(8, 6, 20, 0.82); color: #fff; border: 2px solid #3ff0ff; box-shadow: 0 0 calc(var(--base) * 0.5) #3ff0ff; }
.theme-neon .title { text-shadow: 0 0 10px #3ff0ff; }
.theme-neon .cell { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(63, 240, 255, 0.45); }
.theme-neon .cell .prog { color: #3ff0ff; text-shadow: 0 0 6px #3ff0ff; }
.theme-neon .cell.filled { background: rgba(255, 79, 216, 0.12); border-color: rgba(255, 79, 216, 0.7); }
.theme-neon .cell.line { background: rgba(255, 79, 216, 0.26); box-shadow: 0 0 12px rgba(255, 79, 216, 0.6); }
.theme-neon { --stamp-ring: #ff4fd8; --stamp-bg: rgba(255, 79, 216, 0.28); --stamp-text: #fff; }
.theme-neon .cell .stamp span { box-shadow: 0 0 10px #ff4fd8, 0 0 10px #ff4fd8 inset; }
.theme-neon .cell.filled .label { text-shadow: 0 0 6px #ff4fd8; }
.theme-neon .cell .check { text-shadow: 0 0 6px #ff4fd8; }
.theme-neon .cell.type-free .label { color: #b6ff3f; text-shadow: 0 0 8px #b6ff3f; }
.theme-neon .cell.type-free { border-color: rgba(182, 255, 63, 0.7); }
.theme-neon .badge { background: transparent; border: 2px solid #b6ff3f; color: #b6ff3f; text-shadow: 0 0 6px #b6ff3f; box-shadow: 0 0 8px rgba(182, 255, 63, 0.6); }
.theme-neon.waiting .badge { border-color: #3ff0ff; color: #3ff0ff; text-shadow: 0 0 6px #3ff0ff; box-shadow: none; }
.theme-neon .burst { background: rgba(8, 6, 20, 0.92); border: 2px solid #ff4fd8; color: #3ff0ff; box-shadow: 0 0 calc(var(--base) * 0.8) #ff4fd8; }
.theme-neon .burst-main { text-shadow: 0 0 12px #3ff0ff, 0 0 24px #ff4fd8; }
.theme-neon .burst-sub { color: #ff4fd8; text-shadow: 0 0 6px #ff4fd8; }

/* xmas（クリスマス：深い緑の地に赤と金。雪の粒を地にうすく） */
.theme-xmas {
  --reach: #ffd166;
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.22) 0 2px, transparent 3px),
    radial-gradient(circle at 78% 9%, rgba(255, 255, 255, 0.18) 0 2px, transparent 3px),
    radial-gradient(circle at 92% 62%, rgba(255, 255, 255, 0.16) 0 2px, transparent 3px),
    radial-gradient(circle at 34% 88%, rgba(255, 255, 255, 0.16) 0 2px, transparent 3px),
    linear-gradient(160deg, rgba(20, 84, 56, 0.95), rgba(10, 52, 36, 0.95));
  color: #fff8ec;
  border: calc(var(--base) * 0.12) solid #c8202f;
  box-shadow: 0 0 0 calc(var(--base) * 0.06) #ffd166 inset, 0 calc(var(--base) * 0.15) calc(var(--base) * 0.5) rgba(0, 0, 0, 0.3);
}
.theme-xmas .title { color: #ffd166; }
.theme-xmas .cell { background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 209, 102, 0.35); }
.theme-xmas .cell .prog { color: #ffd166; }
.theme-xmas .cell.filled { background: rgba(200, 32, 47, 0.30); }
.theme-xmas .cell.line { background: rgba(200, 32, 47, 0.50); }
.theme-xmas { --stamp-ring: #ffd166; --stamp-bg: rgba(200, 32, 47, 0.90); --stamp-text: #fff; }
.theme-xmas .cell.type-free { background: repeating-linear-gradient(135deg, rgba(232, 120, 128, 0.9) 0 8px, rgba(255, 255, 255, 0.95) 8px 16px); }
.theme-xmas .cell.type-free .label { color: #b0101f; text-shadow: 0 0 3px #fff, 0 0 6px #fff, 0 0 10px #fff; }
.theme-xmas .badge { background: #c8202f; color: #fff; border: 2px solid #ffd166; }
.theme-xmas.waiting .badge { background: rgba(255, 255, 255, 0.2); color: #fff; border-color: transparent; }
.theme-xmas .burst { background: linear-gradient(135deg, #c8202f, #8e1420); color: #fff; border: 3px solid #ffd166; box-shadow: 0 calc(var(--base) * 0.2) calc(var(--base) * 0.8) rgba(200, 32, 47, 0.5); }
.theme-xmas .burst-main { color: #fff; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.2); }
.theme-xmas .burst-sub { color: #ffd166; }