/* Layout: single column on phones, host screen splits into ball/board and player list on wide screens. */
:root {
  --bg: #e6ecf1;
  --ink: #14232e;
  --muted: #5d6f7c;
  --paper: #ffffff;
  --line: #14232e;
  --hit: #ffd84a;
  --err: #c0322b;
  --b: #2f6fdb;
  --i: #e0413a;
  --n: #eeeeea;
  --g: #1f9d55;
  --o: #f0a21b;
  --display: "Dela Gothic One", "Zen Kaku Gothic New", sans-serif;
  --body: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
.line-mode .host-only { display: none; } /* LINE participants cannot create rooms */

html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  padding-block: 0 48px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

.top {
  max-width: 980px;
  margin: 0 auto;
  padding-block: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.logo {
  font-family: var(--display);
  font-size: 28px;
  letter-spacing: 0.08em;
  color: var(--ink);
  text-decoration: none;
}
.room-badge {
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: 0.15em;
  border: 3px solid var(--line);
  background: var(--paper);
  padding: 2px 10px;
}

main { max-width: 980px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
main > section { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
main > section[hidden] { display: none; }

h2 { font-size: 18px; margin: 0 0 4px; font-weight: 900; }
p { margin: 0; }
code { background: rgba(20,35,46,.08); padding: 1px 6px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.center { text-align: center; }
.error { color: var(--err); font-weight: 700; margin-top: 8px; }
.label { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--muted); }

.panel {
  background: var(--paper);
  border: 3px solid var(--line);
  box-shadow: 5px 5px 0 var(--line);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.panel.flat { box-shadow: none; padding: 12px 18px; }
.panel summary { cursor: pointer; font-weight: 700; }

.row { display: flex; gap: 8px; }
.row.wrap { flex-wrap: wrap; }
.grow { flex: 1; }

input[type="text"] {
  flex: 1;
  min-width: 0;
  font: inherit;
  padding: 10px 12px;
  border: 3px solid var(--line);
  background: #fff;
  color: var(--ink);
  border-radius: 0;
}
input[type="text"]:focus-visible, .btn:focus-visible, summary:focus-visible {
  outline: 3px solid var(--b);
  outline-offset: 2px;
}

.btn {
  font: inherit;
  font-weight: 900;
  padding: 10px 18px;
  border: 3px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  border-radius: 0;
  box-shadow: 3px 3px 0 var(--line);
  transition: transform .08s, box-shadow .08s;
}
.btn:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: none; }
.btn.primary { background: var(--hit); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.confirm { background: var(--err); color: #fff; }
.small-btn { padding: 6px 12px; font-size: 14px; }

/* Host invite */
.invite { flex-direction: row; flex-wrap: wrap; gap: 24px; align-items: center; }
.code { font-family: var(--display); font-size: 44px; letter-spacing: .18em; line-height: 1.1; }
.qr {
  flex: none;
  width: 156px; height: 156px;
  padding: 8px;
  background: #fff; /* QR codes need a light ground to scan */
  border: 3px solid var(--line);
}
.qr svg { display: block; width: 100%; height: 100%; }
.invite-link { flex: 1; min-width: 240px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.invite-link .label { width: 100%; }
.invite-link input { flex: 1; font-size: 14px; }

.host-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 820px) { .host-grid { grid-template-columns: 1.3fr 1fr; align-items: start; } }

/* Ball */
.ball-row { display: flex; align-items: center; gap: 16px; }
.ball-info { min-width: 0; }
.big-count { font-weight: 900; font-size: 18px; }
.ball {
  --c: var(--b);
  flex: none;
  width: 92px; height: 92px;
  border-radius: 50%;
  border: 4px solid var(--line);
  background: var(--c);
  color: #fff;
  display: grid;
  place-items: center;
  align-content: center;
  box-shadow: 4px 4px 0 var(--line);
}
.ball.big { width: 120px; height: 120px; }
.ball[data-l="B"] { --c: var(--b); }
.ball[data-l="I"] { --c: var(--i); }
.ball[data-l="N"] { --c: var(--n); color: var(--ink); }
.ball[data-l="G"] { --c: var(--g); }
.ball[data-l="O"] { --c: var(--o); color: var(--ink); }
.ball.empty { --c: #cfd8de; color: var(--muted); }
.ball-l { font-family: var(--display); font-size: 16px; line-height: 1; }
.ball-n { font-family: var(--display); font-size: 40px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.ball.big .ball-n { font-size: 52px; }
.ball.pop { animation: pop .45s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes pop { from { transform: scale(.4) rotate(-20deg); } to { transform: none; } }

/* Player card */
.status-bar { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.who { font-weight: 900; font-size: 18px; overflow-wrap: anywhere; }
.card-wrap { display: flex; flex-direction: column; gap: 6px; max-width: 460px; width: 100%; margin: 0 auto; }
.card-head, .card { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.card-head span {
  font-family: var(--display);
  text-align: center;
  font-size: 22px;
  color: #fff;
  border: 3px solid var(--line);
  padding: 2px 0;
}
.card-head span:nth-child(1) { background: var(--b); }
.card-head span:nth-child(2) { background: var(--i); }
.card-head span:nth-child(3) { background: var(--n); color: var(--ink); }
.card-head span:nth-child(4) { background: var(--g); }
.card-head span:nth-child(5) { background: var(--o); color: var(--ink); }
.cell {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background: var(--paper);
  border: 3px solid var(--line);
  font-family: var(--display);
  font-size: clamp(20px, 6.5vw, 32px);
  font-variant-numeric: tabular-nums;
  position: relative;
}
.cell.hit { background: var(--hit); }
.cell.hit::after {
  content: "";
  position: absolute;
  inset: 14%;
  border: 3px solid var(--i);
  border-radius: 50%;
}
.cell.free { background: var(--hit); font-size: clamp(12px, 3.6vw, 18px); font-family: var(--body); font-weight: 900; }
.cell.free::after { display: none; }
.cell.line { background: var(--g); color: #fff; }
.cell.line::after { border-color: #fff; }

.banner {
  font-family: var(--display);
  font-size: 40px;
  text-align: center;
  background: var(--i);
  color: #fff;
  border: 4px solid var(--line);
  box-shadow: 6px 6px 0 var(--line);
  padding: 8px;
  animation: pulse 1s ease-in-out infinite alternate;
}
@keyframes pulse { to { transform: scale(1.03) rotate(-1deg); } }

/* History board: 5 rows (B-I-N-G-O) x 15 numbers */
.board { display: grid; grid-template-columns: repeat(var(--cols, 15), 1fr); gap: 2px; margin-top: 4px; }
.board span {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  font-size: clamp(9px, 2.4vw, 13px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: #eef2f5;
  color: #9aa8b2;
}
.board span.drawn { background: var(--ink); color: #fff; }
.board span.last { background: var(--hit); color: var(--ink); outline: 2px solid var(--ink); }

.deal { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 3px solid var(--line); }
select {
  font: inherit;
  padding: 10px 12px;
  border: 3px solid var(--line);
  background: #fff;
  color: var(--ink);
  border-radius: 0;
}
select:focus-visible { outline: 3px solid var(--b); outline-offset: 2px; }

.check { display: flex; align-items: center; gap: 8px; font-size: 14px; }

/* Players */
/* Names flow left to right and wrap, one chip per person. */
.players { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.players li {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 4px 3px 10px;
  border: 2px solid var(--line);
  background: var(--paper);
  max-width: 100%;
  min-width: 0;
}
.players .nm { min-width: 0; overflow-wrap: anywhere; font-weight: 700; }
.players .tag { font-size: 12px; font-weight: 900; padding: 0 6px; border: 2px solid var(--line); background: var(--paper); }
.players .tag.bingo { background: var(--i); color: #fff; }
.players .tag.reach { background: var(--hit); }
.players .tag.holes { border-color: transparent; background: var(--ink); color: #fff; font-variant-numeric: tabular-nums; }
.players li.is-bingo .tag.holes { background: #fff; color: var(--i); }
.players li.is-reach { background: #fff3c4; }
.players li.is-bingo { background: var(--i); color: #fff; }
.players li.is-bingo .tag { border-color: #fff; }
.players .kick {
  font: inherit; font-size: 14px; line-height: 1; padding: 2px 6px;
  background: none; border: none; color: var(--muted); cursor: pointer;
}
.players li.is-bingo .kick { color: #fff; }
.players .kick:hover { color: var(--err); }
.players .kick:focus-visible { outline: 3px solid var(--b); outline-offset: 1px; }
.winners { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; background: var(--ink); color: #fff; }
.winners strong { font-family: var(--display); font-weight: 400; letter-spacing: .06em; color: var(--hit); }

@media (prefers-reduced-motion: reduce) {
  .ball.pop, .banner { animation: none; }
}