:root {
  --bg: #eef4f0;
  --surface: #ffffff;
  --surface-2: #f6faf7;
  --text: #14231d;
  --muted: #65756e;
  --line: #d8e4dd;
  --primary: #1f7a55;
  --primary-dark: #14563d;
  --accent: #f2b84b;
  --danger: #b63b43;
  --shadow: 0 18px 50px rgba(21, 55, 40, .11);
  --radius: 22px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--bg); color: var(--text); }
button, input, select { font: inherit; }
a { color: inherit; }
.hidden { display: none !important; }
.center { text-align: center; }
.break { overflow-wrap: anywhere; }
.muted { color: var(--muted); }
.page-center { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.panel { background: var(--surface); border: 1px solid rgba(31,122,85,.10); border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px; }
.panel.compact { width: min(100%, 460px); }
.install-panel { width: min(100%, 720px); }
.brand-mark { width: 62px; height: 62px; border-radius: 18px; display: grid; place-items: center; background: var(--primary); color: #fff; font-size: 34px; font-weight: 900; margin: 0 auto 18px; box-shadow: 0 12px 24px rgba(31,122,85,.25); }
h1, h2 { margin-top: 0; letter-spacing: -.025em; }
h1 { font-size: clamp(28px, 5vw, 42px); }
h2 { font-size: 22px; }
.stack { display: grid; gap: 16px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
label { display: grid; gap: 8px; font-weight: 750; font-size: 14px; }
input, select { width: 100%; border: 1px solid var(--line); border-radius: 14px; padding: 14px 15px; background: #fff; color: var(--text); outline: none; }
select { cursor: pointer; }
input:focus, select:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(31,122,85,.12); }
.room-code-input { text-align: center; letter-spacing: .28em; font-size: 28px; font-weight: 900; }
.button { appearance: none; border: 0; border-radius: 14px; min-height: 48px; padding: 12px 18px; font-weight: 850; cursor: pointer; transition: transform .15s ease, opacity .15s ease, background .15s ease; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.button:hover { transform: translateY(-1px); }
.button:disabled { cursor: not-allowed; opacity: .45; transform: none; }
.button.primary { background: var(--primary); color: #fff; }
.button.primary:hover { background: var(--primary-dark); }
.button.secondary { background: #dfece5; color: var(--primary-dark); }
.button.danger { background: #f8e2e4; color: var(--danger); }
.button.ghost { background: rgba(255,255,255,.11); color: #fff; border: 1px solid rgba(255,255,255,.18); }
.button.full { width: 100%; }
.button.huge { min-height: 62px; font-size: 18px; }
.button.small { min-height: 38px; padding: 8px 13px; font-size: 13px; }
.text-link { display: inline-block; margin-top: 18px; color: var(--primary); font-weight: 750; }
.notice, .inline-message { border-radius: 14px; padding: 13px 15px; margin-bottom: 16px; }
.notice.success, .inline-message.success { background: #ddf3e7; color: #155c3e; }
.notice.error, .inline-message.error { background: #f9e1e3; color: #8d2930; }
.inline-message:empty { display: none; }
.topbar { min-height: 70px; padding: 12px 24px; display: flex; justify-content: space-between; align-items: center; background: #132a22; color: #fff; gap: 16px; }
.topbar > div { display: flex; align-items: center; gap: 14px; }
.topbar span { color: rgba(255,255,255,.65); font-size: 13px; }
.back-link { color: rgba(255,255,255,.72); text-decoration: none; font-weight: 700; }
.admin-shell { width: min(1180px, calc(100% - 32px)); margin: 28px auto; display: grid; gap: 24px; }
.form-inline { display: grid; grid-template-columns: minmax(240px, 1fr) 180px auto; gap: 14px; align-items: end; }
.form-inline-room { grid-template-columns: minmax(240px, 1fr) 170px 170px auto; }
.room-list { display: grid; gap: 10px; }
.room-row { text-decoration: none; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-2); }
.room-row > div { display: grid; gap: 4px; }
.room-row span { color: var(--muted); font-size: 13px; }
.room-meta { justify-items: end; }
.status { display: inline-flex; width: fit-content; align-items: center; border-radius: 999px; padding: 6px 10px; text-transform: uppercase; letter-spacing: .08em; font-size: 11px !important; font-weight: 900; }
.status.waiting { background: #e4e9e6; color: #53615a; }
.status.running { background: #d9f2e4; color: #12623f; }
.status.paused { background: #fff0cf; color: #7a5510; }
.status.finished { background: #f4dde0; color: #8a2f38; }
.control-grid { width: min(1280px, calc(100% - 32px)); margin: 24px auto; display: grid; grid-template-columns: 360px 1fr; gap: 22px; align-items: start; }
.room-access { display: grid; gap: 22px; text-align: center; }
.eyebrow { text-transform: uppercase; letter-spacing: .14em; color: var(--muted); font-size: 12px; font-weight: 900; }
.large-code { font-size: clamp(52px, 7vw, 84px); font-weight: 950; letter-spacing: .08em; }
#qrcode, #publicQr { display: grid; place-items: center; padding: 14px; background: #fff; border-radius: 18px; width: fit-content; margin-inline: auto; }
#qrcode img, #publicQr img { display: block; }
.draw-panel { text-align: center; }
.room-status-line { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.current-ball { width: 210px; aspect-ratio: 1; border-radius: 50%; margin: 24px auto; display: grid; place-items: center; font-size: 92px; font-weight: 950; background: radial-gradient(circle at 35% 30%, #fff 0 5%, #f6d17f 22%, var(--accent) 60%, #ce8d19 100%); box-shadow: inset -12px -16px 24px rgba(118,70,0,.18), 0 22px 40px rgba(143,89,8,.24); border: 8px solid rgba(255,255,255,.75); }
.next-draw { min-height: 28px; margin: -8px 0 14px; color: var(--muted); font-weight: 850; }
.automatic-settings { margin-top: 14px; padding: 14px; border-radius: 16px; background: var(--surface-2); text-align: left; }
.action-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.history-panel, .players-panel { grid-column: 1 / -1; }
.ball-history { display: flex; flex-wrap: wrap; gap: 9px; }
.mini-ball { width: 44px; height: 44px; border-radius: 50%; display: inline-grid; place-items: center; background: #edf2ef; border: 1px solid var(--line); font-weight: 900; }
.mini-ball.latest { background: var(--accent); border-color: #d89d2e; transform: scale(1.08); }
.player-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.player-row { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; }
.player-row > span { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #e5efe9; color: var(--primary-dark); font-size: 12px; font-weight: 900; }
.winner-banner { border-radius: 18px; padding: 16px; margin-bottom: 18px; text-align: center; font-size: 18px; font-weight: 900; }
.winner-banner.line { background: #fff1cf; color: #76500c; }
.winner-banner.bingo { background: #dff4e8; color: #155b3e; }
.player-body { background: linear-gradient(180deg, #17352a 0, #0d211a 38%, var(--bg) 38%); min-height: 100vh; }
.player-app { width: min(100%, 620px); margin: 0 auto; min-height: 100vh; }
.join-view { min-height: 100vh; padding: 42px 24px; color: #fff; display: flex; flex-direction: column; justify-content: center; }
.join-view h1 { margin-bottom: 8px; }
.join-view p { color: rgba(255,255,255,.72); }
.join-view label { color: #fff; }
.join-view input { font-size: 18px; }
.player-header { min-height: 82px; padding: 16px 18px; color: #fff; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.player-header > div:first-child { display: grid; gap: 4px; }
.player-header span { color: rgba(255,255,255,.66); font-size: 12px; }
.player-status { display: flex; gap: 7px; align-items: center; }
#connectionDot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
#connectionDot.online { background: #5fe099; box-shadow: 0 0 0 4px rgba(95,224,153,.12); }
#connectionDot.offline { background: #ff7b84; }
.game-view { min-height: 100vh; padding-bottom: 30px; }
.game-view > *:not(.player-header) { margin-inline: 14px; }
.mobile-current { background: var(--surface); border-radius: 24px; padding: 18px; box-shadow: var(--shadow); text-align: center; display: grid; gap: 2px; }
.mobile-current > span, .mobile-current small { color: var(--muted); }
.mobile-current strong { font-size: 66px; line-height: 1; margin: 7px 0; }
.card-wrap { margin-top: 14px !important; overflow-x: auto; background: var(--surface); border-radius: 22px; padding: 10px; box-shadow: var(--shadow); }
.bingo-card { min-width: 480px; display: grid; grid-template-columns: repeat(9, 1fr); gap: 5px; }
.card-cell { aspect-ratio: 1; border-radius: 10px; display: grid; place-items: center; font-weight: 950; font-size: 20px; position: relative; padding: 0; }
.card-cell.blank { background: #e8efeb; }
.card-cell.number { background: #fff; border: 2px solid #d8e2dc; cursor: pointer; color: var(--text); }
.card-cell.number.drawn-pending { border-color: var(--accent); background: #fff7df; animation: pendingPulse .8s ease-in-out infinite alternate; }
.card-cell.number.drawn-pending::before { content: "TOCA"; position: absolute; top: 2px; font-size: 7px; letter-spacing: .08em; color: #8a5b06; }
.card-cell.number.marked { background: var(--primary); color: #fff; border-color: var(--primary-dark); }
.card-cell.number.marked::after { content: ''; position: absolute; inset: 6px; border: 2px solid rgba(255,255,255,.35); border-radius: 50%; }
.player-help { margin-top: 12px !important; padding: 10px 13px; border-radius: 14px; background: #fff4d8; color: #72500e; text-align: center; font-size: 13px; font-weight: 750; }
.claim-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px !important; }
.recent-mobile { margin-top: 20px !important; }
.recent-mobile h2 { font-size: 17px; }
.compact-history .mini-ball { width: 39px; height: 39px; }
.public-body { background: radial-gradient(circle at 20% 10%, #214a3a, #0a1712 58%); color: #fff; min-height: 100vh; overflow-x: hidden; }
.public-app { min-height: 100vh; padding: 26px 38px 34px; }
.public-header { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; }
.public-header span { color: #f4c76c; letter-spacing: .18em; font-size: 13px; font-weight: 900; }
.public-header strong { font-size: clamp(24px, 3vw, 44px); }
.public-main { min-height: 54vh; display: grid; grid-template-columns: 1fr 340px; align-items: center; gap: 54px; }
.public-ball-zone { text-align: center; }
.public-ball-zone .eyebrow { color: rgba(255,255,255,.62); }
.public-ball { width: min(36vw, 390px); aspect-ratio: 1; margin: 22px auto; border-radius: 50%; display: grid; place-items: center; color: #1c271f; font-size: clamp(120px, 17vw, 235px); line-height: 1; font-weight: 950; background: radial-gradient(circle at 34% 27%, #fff 0 4%, #fbe7b6 18%, #f0bd50 60%, #bf7810 100%); border: 12px solid rgba(255,255,255,.7); box-shadow: inset -24px -28px 40px rgba(109,64,0,.20), 0 38px 80px rgba(0,0,0,.38); }
.public-status { font-size: 24px; color: rgba(255,255,255,.72); }
.public-join { text-align: center; display: grid; gap: 10px; justify-items: center; }
.public-join > span { font-size: 18px; color: rgba(255,255,255,.76); }
.public-join > strong { font-size: 54px; letter-spacing: .10em; }
.public-join small { color: rgba(255,255,255,.58); }
.public-history { border-top: 1px solid rgba(255,255,255,.13); padding-top: 18px; }
.public-history h2 { font-size: 18px; color: rgba(255,255,255,.7); }
.large-history .mini-ball { width: 50px; height: 50px; background: rgba(255,255,255,.11); color: #fff; border-color: rgba(255,255,255,.13); }
.large-history .mini-ball.latest { background: var(--accent); color: #1d281f; }
.public-winner { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; align-content: center; gap: 10px; background: rgba(5,14,10,.90); backdrop-filter: blur(10px); text-align: center; animation: winnerIn .25s ease; }
.public-winner span { font-size: clamp(64px, 12vw, 170px); font-weight: 950; color: var(--accent); }
.public-winner strong { font-size: clamp(36px, 6vw, 86px); }
@keyframes winnerIn { from { opacity: 0; transform: scale(.96); } }
@keyframes pendingPulse { from { transform: scale(1); box-shadow: 0 0 0 0 rgba(242,184,75,.15); } to { transform: scale(1.045); box-shadow: 0 0 0 5px rgba(242,184,75,.17); } }
@media (max-width: 850px) {
  .grid-2, .form-inline, .control-grid, .public-main { grid-template-columns: 1fr; }
  .control-grid { width: min(100% - 20px, 720px); }
  .history-panel, .players-panel { grid-column: auto; }
  .form-inline .button { width: 100%; }
  .public-body { overflow: auto; }
  .public-main { gap: 22px; }
  .public-ball { width: min(88vw, 390px); }
  .public-join { padding-bottom: 24px; }
  .public-app { padding: 20px; }
  .topbar { align-items: flex-start; }
  .topbar > div { align-items: flex-start; flex-direction: column; gap: 3px; }
}
@media (max-width: 520px) {
  .page-center { padding: 14px; }
  .panel { padding: 20px; border-radius: 18px; }
  .grid-2 { grid-template-columns: 1fr; }
  .action-row { grid-template-columns: 1fr; }
  .room-row { align-items: flex-start; }
  .room-meta { justify-items: start; }
  .claim-actions { grid-template-columns: 1fr 1fr; }
}


/* ===== Player UI v0.3 modern redesign ===== */
.player-body {
  background:
    radial-gradient(circle at 50% 20%, rgba(57, 156, 116, .28), transparent 32%),
    linear-gradient(180deg, #08261d 0%, #0b3024 36%, #0c2b21 100%);
  min-height: 100vh;
  color: #ecf7f1;
}
.player-app {
  width: 100%;
}
.modern-join-view {
  min-height: 100vh;
  padding: 28px 18px 40px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 20px;
}
.join-brand {
  width: min(100%, 760px);
  display: flex;
  align-items: center;
  gap: 16px;
}
.join-brand-mark,
.brand-crest {
  width: 72px;
  height: 72px;
  border-radius: 24px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 30% 30%, #38a36f, #0e5d42 65%, #083021 100%);
  color: #fff6d6;
  font-weight: 900;
  font-size: 26px;
  box-shadow: 0 14px 28px rgba(0, 0, 0, .22), inset 0 0 0 2px rgba(255,255,255,.14);
}
.join-eyebrow,
.brand-copy span {
  color: #c9f2dd;
}
.join-brand h1 {
  margin: 0;
  font-size: clamp(34px, 7vw, 56px);
  line-height: .98;
}
.join-panel {
  width: min(100%, 760px);
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 28px;
  padding: 24px;
  box-shadow: 0 24px 50px rgba(0, 0, 0, .18);
  backdrop-filter: blur(12px);
}
.join-panel h2 {
  margin: 6px 0 10px;
  font-size: 28px;
}
.join-panel p,
.modern-join-view p {
  color: rgba(255, 255, 255, .84);
}
.modern-join-view label {
  color: #fff;
}
.modern-join-view input {
  background: rgba(255,255,255,.94);
}
.modern-game-view {
  min-height: 100vh;
  padding: 18px 14px 28px;
}
.player-shell {
  width: min(100%, 880px);
  margin: 0 auto;
  display: grid;
  gap: 16px;
}
.player-top-shell {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.brand-stack {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.brand-copy {
  display: grid;
  gap: 2px;
}
.brand-copy span {
  font-size: 18px;
  font-weight: 800;
}
.brand-copy strong {
  font-size: clamp(30px, 6vw, 54px);
  line-height: .94;
  color: #f5f3e2;
}
.top-meta {
  display: grid;
  gap: 12px;
  justify-items: end;
}
.live-pill,
.drawn-pill {
  min-width: 162px;
  padding: 12px 16px;
  border-radius: 18px;
  background: rgba(6, 29, 22, .36);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
  backdrop-filter: blur(8px);
}
.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.live-pill.running { color: #effcf5; }
.live-pill.waiting { color: #eef7f1; }
.live-pill.paused { color: #ffe9a7; }
.live-pill.finished { color: #d8ece1; }
.live-pill.offline-state { color: #ffd4d4; }
#connectionDot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #49d18e;
  box-shadow: 0 0 0 5px rgba(73,209,142,.16);
}
#connectionDot.offline { background: #f07d7d; box-shadow: 0 0 0 5px rgba(240,125,125,.16); }
.drawn-pill {
  display: grid;
  gap: 2px;
  text-align: left;
}
.drawn-pill strong {
  font-size: 34px;
  line-height: 1;
  color: #ffffff;
}
.drawn-pill small {
  color: rgba(255,255,255,.86);
  font-size: 14px;
}
.player-banner {
  display: flex;
  align-items: center;
  gap: 16px;
}
.player-avatar {
  width: 88px;
  height: 88px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 42px;
  font-weight: 900;
  color: #ffffff;
  background: radial-gradient(circle at 30% 30%, #2ebf73, #178d57 58%, #10623f 100%);
  border: 4px solid rgba(255, 244, 203, .86);
  box-shadow: 0 16px 30px rgba(0, 0, 0, .18);
}
.player-intro {
  display: grid;
  gap: 2px;
}
.player-intro strong {
  font-size: clamp(28px, 6vw, 48px);
  line-height: 1;
  color: #ffffff;
}
.player-intro span {
  font-size: 16px;
  color: #dff9ea;
}
.player-intro small {
  color: rgba(255,255,255,.68);
}
#winnerNotice:empty { display: none; }
.winner-banner {
  margin-bottom: 0;
  border-radius: 18px;
  padding: 16px;
  text-align: center;
  font-size: 17px;
  font-weight: 900;
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
}
.winner-banner.line { background: linear-gradient(180deg, #fff0bf, #f7dda0); color: #71510d; }
.winner-banner.bingo { background: linear-gradient(180deg, #dbf7e7, #bfeccf); color: #15583b; }
.hero-ball-card {
  position: relative;
  overflow: hidden;
  min-height: 300px;
  border-radius: 34px;
  display: grid;
  place-items: center;
  padding: 26px 20px;
  background:
    radial-gradient(circle at center, rgba(115, 250, 186, .24), transparent 40%),
    linear-gradient(180deg, rgba(10, 75, 54, .9) 0%, rgba(7, 53, 40, .96) 100%);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 22px 42px rgba(0,0,0,.22);
}
.hero-ball-card::before,
.hero-ball-card::after {
  content: '';
  position: absolute;
  inset: auto auto 20px 20px;
  width: 10px;
  height: 34px;
  border-radius: 999px;
  background: linear-gradient(180deg, #f2d37f, #b27611);
  box-shadow: 120px -110px 0 0 #dba93c, 250px -36px 0 0 #dba93c, 420px -130px 0 0 #dba93c, 570px -42px 0 0 #dba93c, 692px -120px 0 0 #dba93c;
  transform: rotate(-25deg);
  opacity: .95;
}
.hero-ball-card::after {
  inset: 28px 26px auto auto;
  transform: rotate(32deg);
  box-shadow: -120px 86px 0 0 #dba93c, -250px 170px 0 0 #dba93c, -420px 102px 0 0 #dba93c, -565px 208px 0 0 #dba93c;
}
.hero-pill {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 26px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ccefe1, #b7e6d4);
  color: #194c3c;
  font-size: 16px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .05em;
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}
#mobileCurrent {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: min(78vw, 340px);
  aspect-ratio: 1;
  border-radius: 50%;
  font-size: clamp(100px, 27vw, 180px);
  line-height: 1;
  font-weight: 950;
  color: #fff7de;
  background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.08), rgba(255,255,255,0) 56%);
  text-shadow: 0 5px 18px rgba(0,0,0,.18);
  box-shadow: inset 0 0 0 4px rgba(242, 208, 118, .7), inset 0 0 0 16px rgba(14, 63, 45, .68), 0 0 90px rgba(113, 245, 183, .12);
}
.card-shell {
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,249,248,.96));
  border-radius: 34px;
  padding: 18px;
  box-shadow: 0 20px 36px rgba(0,0,0,.16);
}
.bingo-card {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 10px;
}
.card-cell {
  aspect-ratio: 1;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: clamp(16px, 4.4vw, 30px);
  position: relative;
  padding: 0;
}
.card-cell.blank {
  background: linear-gradient(180deg, #eff3f1, #ebf0ee);
  box-shadow: inset 0 2px 1px rgba(255,255,255,.8), inset 0 -2px 3px rgba(0,0,0,.03);
}
.card-cell.number {
  background: linear-gradient(180deg, #ffffff, #f9fbfa);
  border: 2px solid #dde6e1;
  cursor: pointer;
  color: #163125;
  box-shadow: 0 8px 14px rgba(0,0,0,.05);
}
.card-number { position: relative; z-index: 1; }
.card-cell.number.drawn-pending {
  border-color: #ecb03b;
  background: linear-gradient(180deg, #fff3d6, #ffe6ba);
  color: #8a4706;
  animation: pendingPulse .8s ease-in-out infinite alternate;
  box-shadow: 0 10px 18px rgba(224,163,44,.22);
}
.card-cell.number.drawn-pending::before {
  content: 'TOCA';
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  color: #8d5308;
}
.card-cell.number.marked {
  background: linear-gradient(180deg, #109c59, #0d7f4a 65%, #0b6840 100%);
  color: #ffffff;
  border-color: #0d7a49;
}
.card-cell.number.marked::after {
  content: '';
  position: absolute;
  inset: 8px;
  border: 3px solid rgba(255,255,255,.28);
  border-radius: 999px;
}
.modern-claim-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.modern-claim-actions .button {
  min-height: 82px;
  border-radius: 26px;
  font-size: clamp(18px, 4vw, 24px);
  text-transform: uppercase;
  letter-spacing: .02em;
  box-shadow: 0 18px 28px rgba(0,0,0,.16);
}
.modern-claim-actions .button.secondary {
  background: linear-gradient(180deg, #ffffff, #eef5f1);
  color: #1a7a54;
  border: 3px solid rgba(57, 166, 112, .35);
}
.modern-claim-actions .button.primary {
  background: linear-gradient(180deg, #7bdf6a 0%, #24a750 55%, #158743 100%);
  color: #ffffff;
  border: 3px solid rgba(247, 246, 198, .36);
}
.modern-claim-actions .button:disabled {
  opacity: .58;
}
#gameMessage {
  margin-bottom: 0;
}
.recent-shell {
  border-radius: 28px;
  padding: 20px;
  background: linear-gradient(180deg, rgba(3, 35, 27, .50), rgba(3, 35, 27, .36));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 32px rgba(0,0,0,.15);
}
.recent-shell h2 {
  margin-bottom: 14px;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #dff7e9;
}
.compact-history {
  gap: 12px;
}
.compact-history .mini-ball {
  width: 62px;
  height: 62px;
  background: linear-gradient(180deg, #ffffff, #f6f8f7);
  color: #133126;
  border: 3px solid rgba(255,255,255,.26);
  box-shadow: 0 8px 16px rgba(0,0,0,.12);
  font-size: 28px;
}
.compact-history .mini-ball.latest {
  background: radial-gradient(circle at 35% 30%, #ffe783 0 16%, #ffcc4f 48%, #e7a420 100%);
  color: #714500;
  border-color: #f8dd8a;
  transform: scale(1.04);
}
@media (max-width: 700px) {
  .player-top-shell {
    flex-direction: column;
    align-items: stretch;
  }
  .top-meta {
    grid-template-columns: 1fr 1fr;
    justify-items: stretch;
  }
  .live-pill, .drawn-pill { min-width: 0; }
}
@media (max-width: 560px) {
  .modern-game-view { padding: 14px 10px 22px; }
  .player-shell { gap: 14px; }
  .player-banner { gap: 12px; }
  .player-avatar { width: 74px; height: 74px; font-size: 34px; }
  .player-intro strong { font-size: 24px; }
  .hero-ball-card { min-height: 250px; border-radius: 28px; }
  .hero-pill { font-size: 14px; padding: 9px 20px; }
  #mobileCurrent { width: min(76vw, 290px); font-size: clamp(86px, 26vw, 150px); }
  .card-shell { padding: 14px; border-radius: 26px; }
  .bingo-card { gap: 8px; }
  .card-cell { border-radius: 14px; font-size: clamp(13px, 5.2vw, 24px); }
  .card-cell.number.drawn-pending::before { top: 5px; font-size: 8px; }
  .modern-claim-actions .button { min-height: 70px; font-size: 16px; }
  .compact-history { gap: 9px; }
  .compact-history .mini-ball { width: 52px; height: 52px; font-size: 24px; }
}


/* ===== Public screen + organizer redesign v0.4 ===== */
.public-body-modern {
  background:
    radial-gradient(circle at 50% 10%, rgba(64, 164, 118, .25), transparent 28%),
    linear-gradient(180deg, #081f18 0%, #0a2d22 100%);
}
.public-app-modern {
  min-height: 100vh;
  padding: 28px 28px 32px;
  display: grid;
  gap: 22px;
}
.public-topbar-modern {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}
.public-brand-stack {
  display: flex;
  align-items: center;
  gap: 16px;
}
.public-brand-mark {
  width: 84px;
  height: 84px;
  border-radius: 26px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 30% 30%, #32a96e, #106340 65%, #0a3424 100%);
  color: #fff3d9;
  font-size: 30px;
  font-weight: 900;
  box-shadow: 0 18px 30px rgba(0,0,0,.22);
}
.public-brand-copy span {
  display: block;
  color: #c8efdd;
  font-size: 18px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 800;
}
.public-brand-copy strong {
  display: block;
  color: #ffffff;
  font-size: clamp(34px, 4.2vw, 62px);
  line-height: .96;
}
.public-top-meta {
  display: grid;
  gap: 12px;
  justify-items: end;
}
.public-chip {
  padding: 14px 18px;
  border-radius: 20px;
  background: rgba(4, 31, 22, .44);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
}
.public-chip-live {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #ffffff;
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: .04em;
}
.public-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #44d587;
  box-shadow: 0 0 0 6px rgba(68,213,135,.14);
}
.public-chip-count strong {
  color: #dff7ea;
  font-size: 18px;
}
.public-stage-modern {
  display: grid;
  grid-template-columns: 1.3fr .85fr;
  gap: 24px;
  align-items: stretch;
}
.public-hero-panel,
.public-join-card,
.public-history-card {
  border-radius: 34px;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 22px 40px rgba(0,0,0,.20);
}
.public-hero-panel {
  position: relative;
  overflow: hidden;
  min-height: 620px;
  padding: 34px 26px 24px;
  background: radial-gradient(circle at center, rgba(113, 248, 187, .22), transparent 40%), linear-gradient(180deg, rgba(10, 76, 55, .92), rgba(6, 50, 37, .96));
  display: grid;
  place-items: center;
}
.public-hero-panel::before,
.public-hero-panel::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 42px;
  border-radius: 999px;
  background: linear-gradient(180deg, #f0d07a, #b87c12);
  transform: rotate(-30deg);
  box-shadow: 120px -120px 0 0 #d7a336, 210px -24px 0 0 #d7a336, 350px -140px 0 0 #d7a336, 540px -34px 0 0 #d7a336;
  left: 26px;
  bottom: 80px;
}
.public-hero-panel::after {
  left: auto;
  right: 40px;
  top: 70px;
  transform: rotate(32deg);
  box-shadow: -140px 110px 0 0 #d7a336, -260px 10px 0 0 #d7a336, -390px 160px 0 0 #d7a336, -520px 44px 0 0 #d7a336;
}
.modern-public-ball {
  position: relative;
  z-index: 1;
  width: min(32vw, 420px);
  aspect-ratio: 1;
  margin: 28px auto 10px;
  font-size: clamp(130px, 18vw, 240px);
  color: #fff6dc;
  box-shadow: inset 0 0 0 8px rgba(242,208,118,.75), inset 0 0 0 22px rgba(13,63,45,.7), 0 0 120px rgba(118,240,186,.12);
  background: radial-gradient(circle at center, rgba(255,255,255,.06), rgba(255,255,255,0) 56%);
}
.public-counter-line {
  position: relative;
  z-index: 1;
  color: #ddf8e9;
  font-size: 26px;
  font-weight: 700;
}
.public-counter-line strong { color: #ffffff; }
.public-side-panel {
  display: grid;
  gap: 24px;
}
.public-join-card {
  padding: 22px;
  background: rgba(255,255,255,.95);
  color: #143225;
  display: grid;
  gap: 18px;
  justify-items: center;
  align-content: start;
}
.public-join-copy { text-align: center; display: grid; gap: 6px; }
.public-join-copy span { color: #1c5b40; font-size: 18px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.public-join-copy strong { font-size: 54px; line-height: 1; color: #113d2d; }
.public-join-copy small { color: #50665d; word-break: break-all; }
.modern-large-history { gap: 12px; }
.public-history-card {
  padding: 22px;
  background: rgba(4, 31, 22, .44);
}
.public-history-card h2 {
  margin: 0 0 14px;
  color: #e9fbf2;
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.modern-large-history .mini-ball {
  width: 64px;
  height: 64px;
  font-size: 28px;
  background: linear-gradient(180deg, #ffffff, #f7faf8);
  color: #153226;
  border: 3px solid rgba(255,255,255,.22);
  box-shadow: 0 10px 18px rgba(0,0,0,.14);
}
.modern-large-history .mini-ball.latest {
  background: radial-gradient(circle at 35% 30%, #ffe783 0 16%, #ffcc4f 48%, #e7a420 100%);
  color: #714500;
}
.public-winner.line span, .public-winner.bingo span { color: #f3c86c; }
.admin-body-modern,
.admin-room-body-modern {
  background: linear-gradient(180deg, #0a2b20 0, #e9f1ec 210px, #eef4f0 100%);
  min-height: 100vh;
}
.admin-header-modern,
.admin-room-topbar {
  min-height: 92px;
  padding: 18px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  color: #ffffff;
}
.admin-brand-modern {
  display: flex;
  align-items: center;
  gap: 14px;
}
.admin-brand-mark {
  width: 60px;
  height: 60px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 30% 30%, #35ab70, #106340 65%, #0a3424 100%);
  color: #fff2d2;
  font-weight: 900;
  font-size: 24px;
  box-shadow: 0 12px 24px rgba(0,0,0,.2);
}
.admin-brand-modern span {
  display: block;
  color: rgba(255,255,255,.74);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 800;
}
.admin-brand-modern strong {
  display: block;
  font-size: clamp(26px, 4vw, 40px);
}
.admin-shell-modern {
  margin-top: 8px;
}
.admin-hero-panel {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  background: linear-gradient(135deg, #0d3b2b, #12523a 56%, #17724d 100%);
  color: #ffffff;
}
.admin-hero-panel .eyebrow { color: #c9efdd; }
.admin-hero-panel h1 { margin: 6px 0 10px; color: #fff; }
.admin-hero-panel p { margin: 0; color: rgba(255,255,255,.82); max-width: 780px; }
.admin-hero-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(160px, 1fr));
  gap: 14px;
}
.hero-stat {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  padding: 18px 20px;
  display: grid;
  gap: 4px;
}
.hero-stat strong { font-size: 34px; line-height: 1; }
.hero-stat span { color: rgba(255,255,255,.8); }
.admin-form-panel { background: #ffffff; }
.admin-create-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1.6fr) repeat(2, minmax(180px, 1fr)) auto;
  gap: 14px;
  align-items: end;
}
.admin-create-grid .button { min-height: 50px; }
.admin-rooms-panel .section-head-inline,
.modern-history-panel .section-head-inline,
.modern-players-panel .section-head-inline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.modern-room-list { gap: 14px; }
.modern-room-row {
  border-radius: 20px;
  background: linear-gradient(180deg, #f8fbf9, #f1f6f3);
  box-shadow: 0 10px 18px rgba(0,0,0,.04);
  padding: 18px 20px;
}
.room-main-copy { display: grid; gap: 4px; }
.room-main-copy strong { font-size: 20px; }
.room-main-copy span { color: #63736d; }
.room-meta-modern { gap: 6px; }
.modern-control-grid {
  width: min(1280px, calc(100% - 32px));
  margin: 14px auto 28px;
  grid-template-columns: 360px 1fr;
  gap: 22px;
}
.modern-room-access {
  background: linear-gradient(180deg, #0d3b2b, #114733);
  color: #ffffff;
  border: 0;
}
.modern-room-access .large-code { color: #fff3d1; }
.modern-room-access .text-link { color: #d4f6e2; }
.modern-draw-panel {
  background: linear-gradient(180deg, #0b3326, #0f4330 46%, #0f4330 46%, #114c36 100%);
  color: #ffffff;
  border: 0;
}
.modern-room-status-line { margin-bottom: 14px; }
.players-chip { color: rgba(255,255,255,.84); }
.modern-current-ball {
  width: 240px;
  font-size: 108px;
}
.modern-next-draw {
  color: rgba(255,255,255,.82);
  font-size: 18px;
}
.modern-automatic-settings {
  background: rgba(255,255,255,.08);
  color: #ffffff;
}
.modern-automatic-settings label { color: #ffffff; }
.modern-automatic-settings select {
  background: rgba(255,255,255,.95);
}
.modern-action-row .button { min-height: 54px; }
.modern-history-panel,
.modern-players-panel {
  background: #ffffff;
}
.modern-ball-history .mini-ball {
  width: 50px;
  height: 50px;
  font-size: 20px;
}
.player-list { display: grid; gap: 10px; }
.player-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(180deg, #f7faf8, #eff5f1);
  border: 1px solid #dce7e0;
}
.player-row span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #0f7d4a;
  color: #fff;
  font-weight: 800;
}
.player-row strong { font-size: 16px; }
@media (max-width: 1080px) {
  .public-stage-modern { grid-template-columns: 1fr; }
  .modern-control-grid { grid-template-columns: 1fr; }
  .admin-hero-panel { flex-direction: column; align-items: stretch; }
}
@media (max-width: 820px) {
  .admin-create-grid { grid-template-columns: 1fr; }
  .public-topbar-modern,
  .admin-header-modern,
  .admin-room-topbar {
    flex-direction: column;
    align-items: flex-start;
  }
  .public-top-meta { justify-items: stretch; width: 100%; }
  .public-chip { width: 100%; }
  .public-brand-copy strong { font-size: 34px; }
}
@media (max-width: 560px) {
  .public-app-modern { padding: 18px 14px 24px; }
  .public-brand-mark { width: 66px; height: 66px; font-size: 24px; }
  .public-brand-copy span { font-size: 13px; }
  .public-brand-copy strong { font-size: 28px; }
  .public-hero-panel { min-height: 400px; padding-inline: 18px; }
  .modern-public-ball { width: min(70vw, 280px); font-size: 110px; }
  .public-counter-line { font-size: 18px; }
  .public-join-copy strong { font-size: 42px; }
  .modern-large-history .mini-ball { width: 54px; height: 54px; font-size: 22px; }
  .admin-header-modern, .admin-room-topbar { padding: 16px; }
}


/* ===== Project branding + public live board v0.5 ===== */
.site-logo-full { display: block; height: auto; }
.player-join-logo { width: min(86vw, 460px); filter: drop-shadow(0 10px 24px rgba(0,0,0,.20)); }
.player-header-logo { width: min(58vw, 320px); filter: drop-shadow(0 10px 24px rgba(0,0,0,.20)); }
.full-logo-brand { justify-content: center; }
.logo-brand-stack { align-items: flex-start; }
.admin-header-logo { width: min(46vw, 340px); }
.admin-room-logo { width: min(50vw, 340px); margin-top: 6px; }
.admin-brand-with-logo { gap: 0; }
.logo-topbar-modern { align-items: flex-start; }
.public-bingo-body {
  background:
    radial-gradient(circle at 50% 8%, rgba(64, 164, 118, .20), transparent 28%),
    linear-gradient(180deg, #071f17 0%, #092c21 100%);
  color: #fff;
  min-height: 100vh;
}
.public-bingo-app {
  min-height: 100vh;
  padding: 22px 28px 28px;
  display: grid;
  gap: 22px;
}
.public-bingo-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}
.public-logo-wrap { flex: 1 1 auto; }
.public-header-logo { width: min(46vw, 540px); filter: drop-shadow(0 10px 22px rgba(0,0,0,.18)); }
.public-header-right {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 14px;
  width: min(900px, 62vw);
}
.public-info-chip,
.public-live-chip,
.public-audio-chip,
.waiting-qr-card,
.waiting-copy-card,
.public-lastball-card,
.public-recent-card,
.public-fullboard-card {
  border-radius: 30px;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 38px rgba(0,0,0,.18);
}
.public-info-chip,
.public-live-chip,
.public-audio-chip {
  min-height: 120px;
  padding: 18px 22px;
  background: rgba(4, 31, 22, .48);
  display: grid;
  align-content: center;
  gap: 6px;
}
.public-chip-label {
  color: #f0cf74;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 13px;
}
.public-info-chip strong,
.public-live-chip strong,
.public-audio-chip strong {
  font-size: 22px;
  line-height: 1.08;
}
.public-info-chip small,
.public-live-chip small,
.public-audio-chip small { color: rgba(255,255,255,.78); font-size: 16px; }
.public-live-chip {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.public-live-chip > div { display: grid; gap: 4px; }
.public-audio-chip {
  appearance: none;
  color: #fff;
  text-align: left;
  cursor: pointer;
  font: inherit;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.public-audio-chip:hover { transform: translateY(-2px); }
.public-audio-chip:focus-visible { outline: 3px solid #f0cf74; outline-offset: 3px; }
.public-audio-chip.enabled {
  background: rgba(20, 116, 76, .72);
  border-color: rgba(240, 207, 116, .55);
}
.public-audio-chip > span:last-child { display: grid; gap: 4px; }
.public-audio-icon { font-size: 30px; line-height: 1; }
.public-waiting-screen {
  display: grid;
  grid-template-columns: 500px 1fr;
  gap: 22px;
}
.waiting-qr-card {
  min-height: 560px;
  background: radial-gradient(circle at center, rgba(116,248,188,.14), transparent 42%), linear-gradient(180deg, #095239, #063a2c 100%);
  display: grid;
  place-items: center;
  padding: 30px;
}
#publicQr {
  width: 360px;
  height: 360px;
  padding: 18px;
  background: white;
  border-radius: 26px;
  box-shadow: 0 0 0 4px rgba(244, 201, 93, .72), 0 0 80px rgba(244, 201, 93, .18);
}
#publicQr img { width: 100% !important; height: auto !important; }
.waiting-copy-card {
  background: rgba(4, 31, 22, .56);
  padding: 34px 34px 30px;
  display: grid;
  align-content: center;
  gap: 26px;
}
.waiting-copy-card h1 {
  margin: 0;
  color: #f5d27c;
  font-size: clamp(42px, 6vw, 74px);
  line-height: .95;
  text-transform: uppercase;
}
.waiting-steps {
  display: grid;
  gap: 16px;
}
.waiting-step {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 16px;
  align-items: center;
}
.waiting-step span {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #1a9257, #0f7648 100%);
  border: 3px solid rgba(246,236,187,.48);
  font-size: 34px;
  font-weight: 900;
}
.waiting-step strong { font-size: 30px; display: block; }
.waiting-step small { display: block; color: rgba(255,255,255,.82); font-size: 22px; }
.waiting-code-card {
  margin-top: 6px;
  border-radius: 24px;
  padding: 22px 26px;
  background: rgba(8, 79, 54, .72);
  border: 1px solid rgba(246,204,106,.22);
  display: grid;
  gap: 8px;
}
.waiting-code-card strong {
  color: #ffe9af;
  font-size: clamp(66px, 9vw, 116px);
  line-height: .95;
  text-shadow: 0 0 22px rgba(255,207,104,.28);
}
.waiting-code-card small { color: rgba(255,255,255,.9); font-size: 22px; }
.public-live-screen {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 22px;
}
.public-live-left,
.public-live-right { display: grid; gap: 18px; }
.public-lastball-card {
  position: relative;
  overflow: hidden;
  min-height: 520px;
  background: radial-gradient(circle at center, rgba(115, 250, 186, .24), transparent 40%), linear-gradient(180deg, rgba(10, 75, 54, .92) 0%, rgba(7, 53, 40, .96) 100%);
  display: grid;
  place-items: center;
  align-content: center;
  padding: 26px 18px;
}
.public-lastball-card::before,
.public-lastball-card::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 40px;
  border-radius: 999px;
  background: linear-gradient(180deg, #f1d17b, #b87c12);
  transform: rotate(-28deg);
  box-shadow: 120px -120px 0 0 #d7a336, 230px -30px 0 0 #d7a336, 360px -140px 0 0 #d7a336, 520px -44px 0 0 #d7a336;
  left: 20px;
  bottom: 52px;
}
.public-lastball-card::after {
  left: auto;
  right: 28px;
  top: 70px;
  transform: rotate(34deg);
  box-shadow: -140px 100px 0 0 #d7a336, -260px 14px 0 0 #d7a336, -390px 150px 0 0 #d7a336;
}
.public-last-ball {
  position: relative;
  z-index: 1;
  width: min(34vw, 420px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: clamp(140px, 19vw, 260px);
  line-height: 1;
  font-weight: 950;
  color: #fff6dc;
  text-shadow: 0 4px 14px rgba(0,0,0,.16);
  box-shadow: inset 0 0 0 4px rgba(242,208,118,.7), inset 0 0 0 16px rgba(13,63,45,.72), 0 0 110px rgba(113,245,183,.12);
}
.public-lastball-caption {
  position: relative;
  z-index: 1;
  margin-top: 18px;
  border-radius: 999px;
  padding: 14px 26px;
  background: rgba(10, 42, 32, .86);
  color: #f0cf74;
  border: 1px solid rgba(240,207,116,.30);
  font-size: 18px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.public-recent-card,
.public-fullboard-card {
  background: rgba(4, 31, 22, .46);
  padding: 18px 20px 20px;
}
.public-recent-card h2,
.public-fullboard-card h2 {
  margin: 0 0 14px;
  color: #f2cf72;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: 28px;
}
.public-recent-history { gap: 12px; }
.public-recent-history .mini-ball {
  width: 68px;
  height: 68px;
  background: linear-gradient(180deg, #ffffff, #f6f8f7);
  color: #163125;
  border: 3px solid rgba(255,255,255,.24);
  box-shadow: 0 8px 16px rgba(0,0,0,.12);
  font-size: 28px;
}
.public-recent-history .mini-ball.latest {
  background: radial-gradient(circle at 35% 30%, #ffe783 0 16%, #ffcc4f 48%, #e7a420 100%);
  color: #714500;
}
.board-head-inline h2 { margin-bottom: 0; }
.board-head-inline strong { color: #fff; font-size: 24px; }
.board-90-grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 12px;
}
.board-90-cell {
  aspect-ratio: 1;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #ffffff, #f8faf9);
  color: #173226;
  border: 3px solid rgba(255,255,255,.18);
  box-shadow: 0 7px 14px rgba(0,0,0,.10);
  font-size: clamp(22px, 1.4vw, 32px);
  font-weight: 900;
}
.board-90-cell.drawn {
  background: linear-gradient(180deg, #189456, #0f7a49 100%);
  color: #ffffff;
  border-color: rgba(226, 248, 214, .52);
}
.board-90-cell.latest {
  background: radial-gradient(circle at 35% 30%, #ffe783 0 16%, #ffcc4f 48%, #e7a420 100%);
  color: #7c4b00;
  border-color: #f8dd8a;
  transform: scale(1.04);
}
@media (max-width: 1180px) {
  .public-waiting-screen,
  .public-live-screen { grid-template-columns: 1fr; }
  .public-header-right { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .public-header-right { width: min(100%, 680px); }
  .public-bingo-header { flex-direction: column; }
  .public-header-logo { width: min(80vw, 540px); }
}
@media (max-width: 760px) {
  .public-bingo-app { padding: 16px; }
  .waiting-qr-card { min-height: auto; }
  #publicQr { width: 260px; height: 260px; }
  .waiting-copy-card h1 { font-size: 38px; }
  .waiting-step { grid-template-columns: 54px 1fr; }
  .waiting-step span { width: 54px; height: 54px; font-size: 24px; }
  .waiting-step strong { font-size: 22px; }
  .waiting-step small { font-size: 18px; }
  .waiting-code-card strong { font-size: 54px; }
  .public-lastball-card { min-height: 340px; }
  .public-last-ball { width: min(70vw, 280px); font-size: 110px; }
  .board-90-grid { gap: 8px; }
  .board-90-cell { font-size: 18px; }
  .public-recent-history .mini-ball { width: 52px; height: 52px; font-size: 22px; }
}


/* ===== Server timer + winner celebrations v0.8 — approved green/gold style ===== */
.winner-celebration,
.player-winner-celebration {
  --winner-deep: #03291f;
  --winner-green: #07543c;
  --winner-green-bright: #16995b;
  --winner-mint: #bcebd6;
  --winner-gold: #efc35d;
  --winner-gold-light: #fff0b5;
  --winner-cream: #fffaf0;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 45%, rgba(33, 165, 96, .30), transparent 34%),
    radial-gradient(circle at 50% 42%, rgba(239, 195, 93, .13), transparent 58%),
    linear-gradient(180deg, #062f24 0%, #03251c 100%);
}
.winner-celebration.bingo,
.player-winner-celebration.bingo {
  background:
    radial-gradient(circle at 50% 44%, rgba(239, 195, 93, .25), transparent 34%),
    radial-gradient(circle at 50% 44%, rgba(32, 154, 88, .26), transparent 59%),
    linear-gradient(180deg, #073326 0%, #03251c 100%);
}
.winner-celebration {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  align-content: center;
  padding: clamp(24px, 4vw, 64px);
  text-align: center;
  animation: celebrationBackdrop .35s ease both;
}
.player-winner-celebration {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  align-content: center;
  padding: 20px;
  text-align: center;
  animation: celebrationBackdrop .35s ease both;
}
.winner-brand-logo {
  position: absolute;
  z-index: 5;
  top: clamp(16px, 3vh, 38px);
  left: 50%;
  width: min(58vw, 680px);
  height: clamp(95px, 18vh, 190px);
  transform: translateX(-50%);
  background: url('logo-horizontal.png') center / contain no-repeat;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .25));
  animation: winnerLogoIn .65s .05s cubic-bezier(.2,.85,.24,1.12) both;
}
.player-winner-celebration .winner-brand-logo {
  top: 16px;
  width: min(88vw, 390px);
  height: 112px;
}
.winner-prize-panel {
  position: relative;
  z-index: 6;
  width: min(92vw, 930px);
  min-height: min(62vh, 590px);
  padding: clamp(28px, 5vh, 64px) clamp(24px, 6vw, 80px);
  border: 2px solid rgba(239, 195, 93, .72);
  border-radius: clamp(30px, 4vw, 58px);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  background:
    radial-gradient(circle at 50% 38%, rgba(37, 174, 101, .29), transparent 38%),
    linear-gradient(180deg, rgba(8, 73, 52, .94), rgba(3, 43, 32, .96));
  box-shadow:
    inset 0 0 0 7px rgba(239, 195, 93, .08),
    0 30px 90px rgba(0, 0, 0, .40),
    0 0 70px rgba(239, 195, 93, .08);
  animation: winnerPanelIn .65s cubic-bezier(.2,.85,.24,1.12) both;
}
.player-winner-celebration .winner-prize-panel {
  width: min(92vw, 520px);
  min-height: min(62vh, 520px);
  padding: 34px 22px 30px;
  border-radius: 34px;
}
.winner-prize-panel::before,
.winner-prize-panel::after {
  content: '✦';
  position: absolute;
  top: 28px;
  color: var(--winner-gold);
  font-size: clamp(22px, 3vw, 42px);
  text-shadow: 0 0 18px rgba(239, 195, 93, .55);
  animation: winnerSparkle 1.4s ease-in-out infinite alternate;
}
.winner-prize-panel::before { left: clamp(24px, 4vw, 64px); }
.winner-prize-panel::after { right: clamp(24px, 4vw, 64px); animation-delay: .45s; }
.winner-prize-icon {
  width: clamp(80px, 10vw, 132px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  margin-bottom: 2px;
  color: #1e503c;
  font-size: clamp(42px, 6vw, 76px);
  background:
    radial-gradient(circle at 35% 28%, #fff8d6 0 12%, #f4d06c 48%, #c88b1f 100%);
  border: 5px solid rgba(255, 247, 203, .72);
  box-shadow:
    inset -8px -10px 18px rgba(119, 72, 0, .18),
    0 16px 36px rgba(0, 0, 0, .28),
    0 0 46px rgba(239, 195, 93, .22);
  animation: winnerIconPop .75s .12s cubic-bezier(.2,.85,.24,1.25) both;
}
.winner-prize-panel > span {
  color: var(--winner-gold-light);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(78px, 13vw, 190px);
  line-height: .86;
  font-weight: 900;
  letter-spacing: -.035em;
  text-shadow:
    0 4px 0 rgba(132, 80, 0, .45),
    0 12px 34px rgba(0, 0, 0, .38),
    0 0 32px rgba(239, 195, 93, .20);
  animation: winnerTitlePop .78s .18s cubic-bezier(.2,.85,.24,1.22) both;
}
.winner-prize-panel > small {
  color: var(--winner-mint);
  font-size: clamp(18px, 2.6vw, 34px);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 900;
  animation: winnerNameIn .55s .40s ease both;
}
.winner-prize-panel > strong {
  max-width: 88vw;
  color: var(--winner-cream);
  font-size: clamp(48px, 8vw, 126px);
  line-height: .96;
  overflow-wrap: anywhere;
  text-shadow: 0 9px 30px rgba(0, 0, 0, .35);
  animation: winnerNameIn .65s .48s cubic-bezier(.2,.85,.24,1.12) both;
}
.player-winner-celebration .winner-prize-panel > span {
  font-size: clamp(66px, 19vw, 118px);
}
.player-winner-celebration .winner-prize-panel > small {
  font-size: 18px;
}
.player-winner-celebration .winner-prize-panel > strong {
  font-size: clamp(42px, 13vw, 78px);
}
.winner-light-rays {
  position: absolute;
  z-index: 1;
  width: min(105vw, 1250px);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: .28;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(239, 195, 93, .26) 0deg 2deg,
    transparent 2deg 11deg
  );
  mask-image: radial-gradient(circle, transparent 0 16%, #000 31%, transparent 68%);
  animation: winnerRaysRotate 22s linear infinite;
}
.winner-confetti {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
}
.winner-confetti i {
  position: absolute;
  left: var(--x);
  top: -8%;
  width: 11px;
  height: 28px;
  border-radius: 4px;
  background: var(--winner-gold);
  transform: rotate(var(--r));
  box-shadow: 0 0 10px rgba(239, 195, 93, .16);
  animation: confettiFall 3.1s var(--d) linear infinite;
}
.winner-confetti i:nth-child(4n + 1) { background: #efc35d; }
.winner-confetti i:nth-child(4n + 2) { background: #bcebd6; }
.winner-confetti i:nth-child(4n + 3) { background: #35c97d; }
.winner-confetti i:nth-child(4n + 4) { background: #fff3c7; }
.winner-confetti i:nth-child(3n) {
  width: 18px;
  height: 18px;
  border-radius: 50% 0 50% 0;
}
@keyframes celebrationBackdrop {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes winnerLogoIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-28px) scale(.86); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes winnerPanelIn {
  from { opacity: 0; transform: scale(.88) translateY(26px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes winnerIconPop {
  0% { opacity: 0; transform: scale(.35) rotate(-10deg); }
  72% { opacity: 1; transform: scale(1.12) rotate(3deg); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes winnerTitlePop {
  0% { opacity: 0; transform: scale(.42) rotate(-5deg); }
  70% { opacity: 1; transform: scale(1.07) rotate(1deg); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes winnerNameIn {
  from { opacity: 0; transform: translateY(24px) scale(.92); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes winnerSparkle {
  from { opacity: .55; transform: scale(.82) rotate(-8deg); }
  to { opacity: 1; transform: scale(1.18) rotate(8deg); }
}
@keyframes winnerRaysRotate {
  to { transform: rotate(360deg); }
}
@keyframes confettiFall {
  0% { opacity: 0; transform: translate3d(0, -10vh, 0) rotate(var(--r)); }
  10% { opacity: 1; }
  100% { opacity: .96; transform: translate3d(var(--drift), 112vh, 0) rotate(calc(var(--r) + 680deg)); }
}
@media (max-width: 680px) {
  .player-winner-celebration { padding: 14px; }
  .player-winner-celebration .winner-brand-logo { width: min(90vw, 390px); height: 96px; }
  .player-winner-celebration .winner-prize-panel { min-height: 500px; padding-top: 70px; }
  .winner-prize-icon { width: 84px; font-size: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .winner-celebration *,
  .player-winner-celebration * {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (max-width: 760px) {
  .public-header-right { grid-template-columns: 1fr; }
}


/* Activación de voz al inicio de cada sesión de la pantalla pública. */
.public-audio-start-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgba(2, 21, 15, .86);
  backdrop-filter: blur(12px);
}
.public-audio-start-card {
  width: min(720px, 94vw);
  min-height: 500px;
  padding: 48px;
  border-radius: 38px;
  border: 1px solid rgba(240, 207, 116, .38);
  background:
    radial-gradient(circle at 50% 0%, rgba(64, 164, 118, .34), transparent 44%),
    linear-gradient(180deg, #0b543c 0%, #073326 100%);
  box-shadow: 0 34px 90px rgba(0, 0, 0, .48);
  color: #fff;
  text-align: center;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 20px;
}
.public-audio-start-icon {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 56px;
  background: rgba(240, 207, 116, .17);
  border: 2px solid rgba(240, 207, 116, .56);
  box-shadow: 0 0 50px rgba(240, 207, 116, .16);
}
.public-audio-start-card h2 {
  margin: 0;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1;
}
.public-audio-start-card p {
  max-width: 600px;
  margin: 0;
  color: rgba(255, 255, 255, .84);
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.45;
}
.public-audio-start-button {
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 20px 34px;
  background: #f0cf74;
  color: #123a2c;
  font: inherit;
  font-size: clamp(20px, 2.3vw, 28px);
  font-weight: 950;
  cursor: pointer;
  box-shadow: 0 16px 32px rgba(0, 0, 0, .24);
  transition: transform .18s ease, filter .18s ease;
}
.public-audio-start-button:hover { transform: translateY(-2px) scale(1.01); filter: brightness(1.04); }
.public-audio-start-button:focus-visible { outline: 4px solid #fff; outline-offset: 5px; }
.public-audio-start-card > small {
  max-width: 560px;
  color: rgba(255, 255, 255, .62);
  font-size: 15px;
  line-height: 1.4;
}
@media (max-width: 680px) {
  .public-audio-start-overlay { padding: 16px; }
  .public-audio-start-card { min-height: 440px; padding: 32px 22px; border-radius: 28px; }
  .public-audio-start-icon { width: 88px; height: 88px; font-size: 42px; }
  .public-audio-start-button { width: 100%; }
}


/* ===== Controles de operación, premios y cartón ganador v0.9.0 ===== */
.admin-wide-notice { grid-column: 1 / -1; margin: 0; }
.mode-selector { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 6px; border-radius: 16px; background: rgba(4, 49, 36, .08); }
.mode-button { border: 0; border-radius: 12px; padding: 13px 10px; background: transparent; color: #31584b; font: inherit; font-weight: 900; cursor: pointer; }
.mode-button.active { background: #0b573f; color: #fff; box-shadow: 0 8px 20px rgba(3, 62, 43, .20); }
.voice-button { width: 100%; background: #f4e2a5; color: #143f31; border: 1px solid rgba(121, 84, 9, .15); }
.voice-button:disabled { opacity: .45; cursor: not-allowed; }
.managed-player-row { grid-template-columns: 34px 14px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.player-position { display: grid !important; place-items: center; }
.connection-state { width: 11px !important; height: 11px; padding: 0 !important; border-radius: 50%; background: #9aa8a1; box-shadow: 0 0 0 4px rgba(154,168,161,.13); }
.connection-state.online { background: #1ca966; box-shadow: 0 0 0 4px rgba(28,169,102,.15); }
.connection-state.offline { background: #c08a31; box-shadow: 0 0 0 4px rgba(192,138,49,.14); }
.player-row-copy { min-width: 0; display: grid; gap: 3px; }
.player-row-copy strong { overflow-wrap: anywhere; }
.player-row-copy small { color: #71847c; font-size: 12px; }
.player-row-actions { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.button.tiny { padding: 8px 10px; font-size: 12px; border-radius: 10px; }
.prizes-admin-panel { grid-column: 1 / -1; }
.prize-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.prize-fieldset { margin: 0; padding: 18px; border: 1px solid rgba(10, 79, 57, .14); border-radius: 20px; display: grid; gap: 14px; background: rgba(247, 251, 248, .78); }
.prize-fieldset legend { padding: 0 8px; font-weight: 950; color: #0b573f; }
.prize-fieldset textarea { resize: vertical; min-height: 86px; }
.current-prize-image { display: grid; gap: 8px; }
.current-prize-image img { width: 100%; max-height: 180px; object-fit: cover; border-radius: 14px; }
.check-label { display: flex !important; grid-template-columns: auto 1fr; align-items: center; gap: 8px; }
.check-label input { width: auto; }
.prize-save-button { grid-column: 1 / -1; justify-self: end; min-width: 220px; }
.admin-modal { position: fixed; inset: 0; z-index: 13000; display: grid; place-items: center; padding: 18px; background: rgba(2, 25, 18, .76); backdrop-filter: blur(8px); }
.admin-modal-card { position: relative; width: min(760px, 96vw); padding: 28px; border-radius: 28px; background: #fff; box-shadow: 0 30px 90px rgba(0,0,0,.35); }
.admin-modal-close { position: absolute; right: 16px; top: 12px; width: 42px; height: 42px; border: 0; border-radius: 50%; background: #edf3ef; color: #143f31; font-size: 30px; cursor: pointer; }
.admin-card-preview, .winner-card-grid { display: grid; grid-template-columns: repeat(9, 1fr); gap: 5px; }
.admin-card-cell, .winner-card-cell { aspect-ratio: 1; display: grid; place-items: center; border-radius: 9px; font-weight: 950; background: #eef4f0; color: #123e30; }
.admin-card-cell.blank, .winner-card-cell.blank { background: #dce6df; opacity: .45; }

.public-prizes-strip { width: min(1500px, calc(100% - 44px)); margin: 12px auto 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.public-prize-card { min-height: 92px; display: grid; grid-template-columns: 82px 1fr; gap: 16px; align-items: center; padding: 12px 18px; border-radius: 22px; color: #fff; background: linear-gradient(135deg, #0a5b40, #07382a); border: 1px solid rgba(239,195,93,.28); box-shadow: 0 14px 34px rgba(0,0,0,.16); }
.public-prize-card.bingo { background: linear-gradient(135deg, #795413, #3e2a07); }
.public-prize-card img, .public-prize-placeholder { width: 82px; height: 68px; object-fit: cover; border-radius: 14px; display: grid; place-items: center; background: rgba(255,255,255,.12); font-size: 34px; }
.public-prize-card div { display: grid; gap: 2px; min-width: 0; }
.public-prize-card small { color: #f5d77d; text-transform: uppercase; letter-spacing: .08em; font-weight: 900; }
.public-prize-card strong { font-size: clamp(18px, 2vw, 28px); overflow-wrap: anywhere; }
.public-prize-card span { color: rgba(255,255,255,.79); }
.public-prize-card em { color: #f7df99; font-style: normal; font-size: 13px; }

.public-ball-reveal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; pointer-events: none; background: rgba(1, 24, 17, .34); backdrop-filter: blur(3px); opacity: 0; }
.public-ball-reveal.active { animation: ballRevealBackdrop 1.8s ease both; }
.public-ball-reveal.leaving { opacity: 0; transition: opacity .35s ease; }
.ball-reveal-stage { display: grid; place-items: center; gap: 14px; color: #fff; text-transform: uppercase; font-weight: 950; letter-spacing: .12em; }
.ball-reveal-stage strong { width: min(38vw, 410px); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; color: #0b4432; background: radial-gradient(circle at 35% 25%, #fffef8 0 18%, #f2d371 52%, #c89120 100%); border: 12px solid rgba(255,255,255,.76); box-shadow: 0 40px 90px rgba(0,0,0,.42), inset 0 -18px 40px rgba(113,69,0,.22); font-size: clamp(120px, 18vw, 270px); letter-spacing: -.05em; animation: ballRevealPop 1.55s cubic-bezier(.15,.82,.2,1.1) both; }
@keyframes ballRevealBackdrop { 0% { opacity: 0; } 14%, 78% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ballRevealPop { 0% { opacity: 0; transform: translateY(-34vh) scale(.34) rotate(-18deg); } 55% { opacity: 1; transform: translateY(0) scale(1.08) rotate(3deg); } 72% { transform: scale(.96) rotate(-1deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }

.winner-content-grid { position: relative; z-index: 3; width: min(1500px, 95vw); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(430px, .95fr); gap: 24px; align-items: center; }
.winner-content-grid .winner-prize-panel { width: 100%; min-width: 0; }
.winner-card-panel { padding: 24px; border-radius: 30px; background: rgba(255,250,240,.96); border: 3px solid rgba(239,195,93,.8); box-shadow: 0 28px 70px rgba(0,0,0,.34); }
.winner-card-heading { display: flex; justify-content: space-between; gap: 14px; margin-bottom: 16px; color: #0a4d38; font-size: clamp(18px, 2vw, 30px); font-weight: 950; }
.winner-card-cell { min-width: 0; font-size: clamp(18px, 2.1vw, 34px); border: 2px solid rgba(11,87,63,.08); }
.winner-card-cell.winner-hit { color: #173c2e; background: radial-gradient(circle at 35% 28%, #fff9d8, #efc35d); border-color: #aa7413; box-shadow: 0 0 0 3px rgba(239,195,93,.24); transform: scale(1.04); }
.winner-configured-prize { width: min(640px, 90%); margin-top: 16px; display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; padding: 12px 16px; border-radius: 18px; background: rgba(0,0,0,.18); text-align: left; }
.winner-configured-prize img { width: 88px; height: 72px; border-radius: 12px; object-fit: cover; }
.winner-configured-prize div { display: grid; gap: 3px; }
.winner-configured-prize b { color: #fff3bd; font-size: clamp(17px, 1.7vw, 25px); }
.winner-configured-prize p { margin: 0; color: rgba(255,255,255,.82); font-size: 14px; }
.winner-configured-prize small { color: #f1d579; }

.player-card-id { color: rgba(255,255,255,.65) !important; }
.player-prizes { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; margin: 8px 0 14px; }
.player-prize-card { display: grid; grid-template-columns: auto 1fr; gap: 9px; align-items: center; padding: 10px; border-radius: 15px; background: #0b543c; color: #fff; }
.player-prize-card.bingo { background: #705016; }
.player-prize-card img { width: 50px; height: 50px; object-fit: cover; border-radius: 10px; }
.player-prize-card div { min-width: 0; display: grid; gap: 2px; }
.player-prize-card small { color: #f3d47e; font-size: 10px; text-transform: uppercase; }
.player-prize-card strong { font-size: 13px; overflow-wrap: anywhere; }
.player-prize-card span { font-size: 10px; color: rgba(255,255,255,.72); }
.expelled-view { min-height: 100dvh; display: grid; place-items: center; padding: 22px; background: radial-gradient(circle at 50% 0, #165f46, #062d22 70%); }
.expelled-card { width: min(520px, 94vw); padding: 38px 28px; border-radius: 28px; text-align: center; background: #fff; color: #173f31; box-shadow: 0 28px 80px rgba(0,0,0,.34); }
.expelled-icon { font-size: 58px; }
.expelled-card h1 { margin: 10px 0; }
.expelled-card p { font-size: 18px; }
.expelled-card small { color: #74857e; }

@media (max-width: 900px) {
  .prize-form-grid { grid-template-columns: 1fr; }
  .prize-save-button { grid-column: 1; width: 100%; }
  .managed-player-row { grid-template-columns: 28px 12px minmax(0, 1fr); }
  .player-row-actions { grid-column: 1 / -1; width: 100%; }
  .player-row-actions .button { flex: 1; }
  .winner-content-grid { grid-template-columns: 1fr; overflow-y: auto; padding: 130px 0 30px; }
  .winner-card-panel { width: min(720px, 94vw); margin: 0 auto; }
  .public-prizes-strip { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .player-prizes { grid-template-columns: 1fr; }
  .admin-modal-card { padding: 24px 14px; }
  .admin-card-preview { gap: 3px; }
  .admin-card-cell { border-radius: 6px; font-size: 13px; }
  .public-prizes-strip { width: calc(100% - 20px); }
  .public-prize-card { grid-template-columns: 62px 1fr; padding: 10px; }
  .public-prize-card img, .public-prize-placeholder { width: 62px; height: 58px; }
}