:root{
  --bg1:#b9e6ff; --bg2:#f8fdff; --ink:#263238;
  --accent:#ff7eb6; --accent-2:#7c4dff;
  --card:#ffffffcc; --glass:rgba(255,255,255,.65);
  --shadow:0 18px 40px rgba(16,30,50,.12);
  --pad:clamp(10px,2vw,14px);
  --tile: clamp(36px, 4.5vw, 64px);
  --gap: clamp(8px, 1.6vw, 14px);

  /* HUD height reserved for stage padding; increase if you add more HUD rows/content */
  --hud-height: 112px;
}

/* slightly push screen content down so sun/moon are partially visible */
.bnp-screen{
  width:100%;
  display:grid;
  place-items:center;
  padding: calc(var(--pad) + 9vh + 24px) var(--pad) var(--pad);
  height:auto;
}

/* base reset */
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}

/* Host card basics */
.bnp-host-card { position:relative; overflow:visible; }

/* instructions */
.bnp-instructions ol { margin:0 0 6px 20px; padding:0; color:rgba(10,30,50,.72); }
.bnp-instructions li { margin:6px 0; font-size:14px; }

/* gender chips */
.bnp-gender-row { justify-content:center; gap:18px; margin-top:8px; }
.bnp-chip {
  position:relative;
  transition: transform .18s cubic-bezier(.2,.9,.24,1), box-shadow .22s, border-color .18s;
  padding:10px 18px; font-weight:800; letter-spacing:.01em;
  background:linear-gradient(180deg,#fff,#fbfbff);
  border:2px solid rgba(15,30,60,.06);
  border-radius:14px;
  box-shadow: 0 10px 28px rgba(10,28,54,.06);
  cursor:pointer;
  min-width:86px;
  text-align:center;
}
.bnp-chip::before{
  content:""; position:absolute; inset:-6px; border-radius:18px; pointer-events:none; opacity:0;
  transform:scale(.94); transition: opacity .28s, transform .4s, box-shadow .4s;
}
/* stronger selected chip styles (more prominent color + glow) */
.bnp-chip.on {
  transform: translateY(-6px);
  box-shadow: 0 22px 56px rgba(12,40,90,.18), 0 6px 28px rgba(124,77,255,.08);
  z-index: 6;
}

/* distinct, more saturated visual treatment per gender */
.bnp-chip.on[data-g="boy"] {
  background: linear-gradient(180deg,#dff4ff,#cfeaff);
  border-color: rgba(24,90,200,.26);
  color: #032b4a;
  text-shadow: 0 6px 14px rgba(12,32,56,.06);
}
.bnp-chip.on[data-g="girl"] {
  background: linear-gradient(180deg,#fff1fb,#ffdff3);
  border-color: rgba(255,80,140,.28);
  color: #3b0822;
  text-shadow: 0 6px 14px rgba(28,6,24,.04);
}
.bnp-chip.on[data-g="twins"]{
  background: linear-gradient(180deg,#f2efff,#e9e6ff);
  border-color: rgba(120,77,255,.28);
  color:#1c1634;
  text-shadow: 0 6px 14px rgba(12,8,36,.05);
}

/* make the ring / halo stronger for selected chips */
.bnp-chip.on::before {
  opacity:1;
  transform:scale(1.02);
  box-shadow: 0 12px 48px rgba(124,77,255,.14), 0 0 44px rgba(124,77,255,.06);
  border: 3px solid rgba(255,255,255,0.08);
}

.bnp-chip:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(8,20,40,.08); }

/* share area */
.bnp-share-animated { opacity: 0; transform: translateY(8px); transition: opacity .36s cubic-bezier(.2,.9,.24,1), transform .36s; }
.bnp-share-animated.show { opacity:1; transform: translateY(0); }
.bnp-share-input { font-weight:700; letter-spacing:0.02em; background:linear-gradient(180deg,#fff,#fbfdff); border-radius:10px; padding:10px 12px; box-shadow: inset 0 1px 0 rgba(255,255,255,.9); }

/* animated buttons */
.bnp-animated-btn { transform: translateY(0); transition: transform .12s ease, box-shadow .12s; }
.bnp-animated-btn:active { transform: translateY(2px); box-shadow: none; }

/* instructions card shown inside game stage */
.bnp-game-instructions {
  width: min(920px, 96%);
  max-width: 920px;
  margin: 0 auto;
  padding: 16px 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(245,252,255,0.95));
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(8,20,40,.06);
  border: 1px solid rgba(12,30,70,.04);
  text-align: left;
  font-size: 15px;
  line-height: 1.45;
}

/* When showing instructions we hide all other interactive/game parts inside .bnp-game */
.bnp-game.showing-instructions .bnp-hud,
.bnp-game.showing-instructions .bnp-stage > #bnp-board,
.bnp-game.showing-instructions .bnp-stage > #bnp-tiles,
.bnp-game.showing-instructions .bnp-fx,
.bnp-game.showing-instructions canvas,
.bnp-game.showing-instructions .bnp-actions,
.bnp-game.showing-instructions .bnp-progress {
  display: none !important;
}

.bnp-sub, 
.bnp-host-card p,
.bnp-instructions ol,
.bnp-instructions li,
.bnp-game-instructions,
.bnp-game-instructions .bnp-instr-desc,
.bnp-game-instructions .bnp-instr-list,
.bnp-game-instructions .bnp-instr-list li {
  line-height: 1.85; /* more breathing room */
}

/* slightly larger spacing for instruction list items */
.bnp-instructions li,
.bnp-game-instructions .bnp-instr-list li {
  margin: 10px 0;
}

/* ensure the instruction paragraph has slightly bigger bottom margin */
.bnp-game-instructions .bnp-instr-desc {
  margin-bottom: 14px;
}

/* ensure the instructions card stays visible and centered */
.bnp-game.showing-instructions .bnp-game-instructions {
  display: block;
  margin-top: 6px;
  z-index: 999;
}

/* title + list */
.bnp-game-instructions .bnp-instr-title {
  margin: 0 0 6px;
  font-size: clamp(16px, 2.4vw, 20px);
  font-weight: 800;
}
.bnp-game-instructions .bnp-instr-desc { margin: 0 0 10px; color: #123; }
.bnp-game-instructions .bnp-instr-list { margin: 0; padding-left: 18px; }
.bnp-game-instructions .bnp-instr-list li { margin: 6px 0; }

/* root container and day/night variables */
.bnp{
  min-height:100vh;
  display:grid;
  place-items:center;
  background:linear-gradient(180deg,var(--bg1),var(--bg2));
  transition:background 1s linear;
  position:relative;
  overflow:hidden;
  animation: dayNight 20s linear infinite;
}

/* day/night keyframes update variables (keeps the sun/moon behavior) */
@keyframes dayNight{
  0%   { --bg1:#b9e6ff; --bg2:#f8fdff; }
  50%  { --bg1:#061428; --bg2:#071a29; }
  100% { --bg1:#b9e6ff; --bg2:#f8fdff; }
}

/* subtle night stars (uses ::before on .bnp) */
.bnp::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,.9) 0, transparent 60%),
    radial-gradient(1.4px 1.4px at 28% 40%, rgba(255,255,255,.95) 0, transparent 60%),
    radial-gradient(1px 1px at 72% 14%, rgba(255,255,255,.85) 0, transparent 60%),
    radial-gradient(1.2px 1.2px at 86% 66%, rgba(255,255,255,.9) 0, transparent 60%);
  opacity:0; transition:opacity .9s linear; mix-blend-mode:screen;
  animation: starFade 20s linear infinite;
}
@keyframes starFade{ 0%{opacity:0} 44%{opacity:0} 50%{opacity:1} 90%{opacity:1} 95%{opacity:0} 100%{opacity:0} }

/* Sun + rays: visible only during day portion (0–44% and 96–100%) — no overlap with moon */
.bnp::after {
  content: "";
  position: absolute;
  right: 8vw;
  top: 6vh;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff9c4 0%, #ffe082 18%, #ffc107 48%, #ffb300 100%);
  box-shadow: 0 10px 40px rgba(255,160,20,0.18), 0 2px 10px rgba(255,140,0,0.08);
  transform: translateY(0) scale(1);
  opacity: 1;
  transition: opacity .5s, transform .5s;
  filter: blur(.2px);
  z-index: 1;
  animation: sunCycle 20s linear infinite;
}
@keyframes sunCycle {
  /* visible 0-30, hidden 31-95, visible again 96-100 */
  0%   { opacity:1; transform:translateY(0) scale(1); }
  24%  { opacity:1; transform:translateY(0) scale(1); }
  45%  { opacity:0; transform:translateY(-8px) scale(.96); }
  75%  { opacity:0; transform:translateY(-8px) scale(.96); }
  100% { opacity:1; transform:translateY(0) scale(1); }
}

/* sun rays */
.bnp-sun-rays {
  position: absolute;
  right: calc(8vw + 50px);
  top: calc(6vh + 12px);
  width: 200px;
  height: 200px;
  pointer-events: none;
  transform-origin: center;
  opacity: 0.6;
  z-index: 0;
  background: radial-gradient(circle, rgba(255,210,110,.09) 0%, rgba(255,210,110,0) 45%);
  border-radius: 50%;
  filter: blur(6px);
  animation: sunRays 20s ease-in-out infinite;
}
@keyframes sunRays { 0% { transform: scale(.96); opacity: 0.42 } 40% { transform: scale(1); opacity:0.52 } 45%{opacity:0} 95%{opacity:.45} 100%{opacity:.5} }

/* moon: visible only during night portion (50–90%) — no overlap with sun */
.bnp-moon {
  position: absolute;
  right: 8vw;
  top: 6vh;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f7f8ff 0%, #dfe9ff 20%, #c9dbff 60%);
  box-shadow: 0 8px 30px rgba(0,0,0,.18);
  opacity: 0;
  transform: translateY(-8px) scale(.94);
  transition: opacity .5s, transform .5s;
  z-index: 2;
  filter: blur(.2px);
  animation: moonCycle 20s linear infinite;
}
@keyframes moonCycle {
  0%   { opacity: 0; transform: translateY(-8px) scale(.94); }
  45%  { opacity: 0; transform: translateY(-8px) scale(.94); }
  50%  { opacity: 1; transform: translateY(0)  scale(1); }
  80%  { opacity: 1; transform: translateY(0)  scale(1); }
  90%  { opacity: 0; transform: translateY(-8px) scale(.94); }
  100% { opacity: 0; transform: translateY(-8px) scale(.94); }
}

.bnp-card{
  width:min(720px,96%); padding:clamp(18px,3.5vw,34px);
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.6));
  border-radius:20px; box-shadow:var(--shadow); backdrop-filter: blur(8px);
}

/* header / controls */
.bnp-title{ margin:0 0 6px; font-size:clamp(26px,4vw,36px); letter-spacing:-0.01em; font-weight:700 }
.bnp-sub{ margin:0 0 16px; color:rgba(23,34,52,.7) }

.bnp-row{ display:flex; gap:var(--gap); flex-wrap:wrap; align-items:center; margin:10px 0; justify-content: center; }
.bnp-input{ flex:1; padding:12px 14px; border-radius:12px; border:0; background:linear-gradient(180deg,#fbfdff,#f2f8ff); box-shadow:inset 0 1px 0 rgba(255,255,255,.9); font-size:16px; width: 100%; }
.bnp-btn{ padding:15px 20px; border-radius:12px; border:0; background:linear-gradient(90deg,var(--accent-2),var(--accent)); color:#fff; font-weight:700; cursor:pointer; box-shadow:0 10px 24px rgba(30,52,93,.12); margin-top: 15px; }

/* HUD: explicit vertical stacking (badges row, progress row, actions row) so heights are predictable */
.bnp-hud {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  justify-content:center;
  z-index: 20;
  pointer-events: auto;
  padding: 10px 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 26px rgba(6,20,40,.06);
  width: min(96%, 1100px);
}

/* keep badges grouped and allow them to stay inline */
.bnp-hud .bnp-badge {
  flex: 0 1 auto;
  order: 1;
}

/* progress occupies its own centered full row */
.bnp-progress {
  order: 2;
  flex: 0 0 100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* actions occupy their own centered full row */
.bnp-actions {
  order: 3;
  flex: 0 0 100%;
  display:flex;
  justify-content:center;
  margin-top:18px;
  margin-bottom: 18px;
}

/* badges: use inline-flex so the number and suffix stay on same line */
.bnp-badge{
  background: var(--glass);
  padding: 10px 14px;
  border-radius: 999px;
  font-weight:800;
  backdrop-filter: blur(6px);
  color: #0b2540;
  min-width: 68px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 8px 18px rgba(8,20,40,.06);
  margin: 0 6px;
  white-space:nowrap; /* prevents number and 's' from breaking lines */
  font-size:15px;
}

/* progress bar: upgraded look (glossy track + subtle stripes + glowing fill end cap) */
.bnp-progress{
  display:flex;
  align-items:center;
  gap:12px;
  padding:8px 10px;
  border-radius:14px;
  background: linear-gradient(180deg,#f7fbff,#fcfeff);
  box-shadow: 0 6px 24px rgba(10,24,50,.06), inset 0 1px 0 rgba(255,255,255,.75);
  width: 100%;
  max-width: 820px;
  justify-content:center;
  margin: 0;
  margin-top: 15px;
  margin-bottom: 15px;
}
.bnp-progress-text{ font-weight:800; font-size:13px; color:#0f2a44; min-width:56px; text-align:center; }
.bnp-progress-track{
  flex:1;
  height:14px;
  background: linear-gradient(180deg,#e9f3ff,#f7fbff);
  border-radius:999px;
  overflow:hidden;
  box-shadow: inset 0 2px 8px rgba(255,255,255,.85), inset 0 -6px 18px rgba(0,0,0,0.02);
  position:relative;
  border: 1px solid rgba(255,255,255,0.6);
}
/* subtle diagonal stripes inside track */
.bnp-progress-track::before{
  content: "";
  position:absolute; inset:0;
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.03) 0 6px, rgba(0,0,0,0) 6px 12px);
  pointer-events:none;
  mix-blend-mode: overlay;
  opacity:0.8;
}

/* fill - gradient + glow + end-cap */
.bnp-progress-fill{
  height:100%;
  width:0%;
  background: linear-gradient(90deg,var(--accent-2),var(--accent));
  transition: width .5s cubic-bezier(.2,.9,.24,1);
  position:relative;
  box-shadow: 0 8px 24px rgba(124,77,255,.12), inset 0 1px 0 rgba(255,255,255,.35);
  border-radius:999px;
}
/* glowing circular cap at the trailing edge of fill */
.bnp-progress-fill::after{
  content:"";
  position:absolute;
  right:0;
  top:50%;
  transform:translate(50%,-50%);
  width:14px;height:14px;border-radius:50%;
  background: rgba(255,255,255,.9);
  box-shadow: 0 6px 18px rgba(124,77,255,.22), 0 0 22px rgba(124,77,255,.12);
  opacity:0;
  transition:opacity .28s;
}
/* show cap when progress > 2% (JS-controlled width) */
.bnp-progress-fill[style*="width:0%"]::after { opacity:0; }
.bnp-progress-fill[style*="width:"]::after { opacity:1; }

/* action buttons: own row */
.bnp-actions { display:flex; gap:8px; align-items:center; justify-content:center; margin-top:4px; }
.bnp-actions .bnp-mini { padding:8px 10px; border-radius:10px; font-weight:700; background:linear-gradient(180deg,#fff,#fbfdff); border:1px solid rgba(10,25,50,.04); box-shadow:0 8px 18px rgba(8,20,40,.04); cursor:pointer; }

/* Stage: reserve exact HUD height to avoid overlap and ensure board is visible */
.bnp-stage{
  position: relative;
  width: 100%;
  max-width: 1100px;
  min-height: 44svh;
  height: auto;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(245,252,255,.6));
  overflow: visible;
  padding: calc(var(--hud-height)) 22px 26px; /* top padding equals HUD reserved height */
  box-shadow: 0 30px 80px rgba(8,20,40,.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap);
  box-sizing: border-box;
}

/* scenic layers */
.bnp-bg .bnp-cloud{ position:absolute; width:320px; height:140px; border-radius:80px; background: linear-gradient(180deg,#fff,#fdfdff); filter:drop-shadow(0 18px 40px rgba(10,30,60,.06)); opacity:.95; transform:translateX(-10%); animation: drift 28s linear infinite }
.bnp-bg .bnp-cloud::before, .bnp-bg .bnp-cloud::after { content:""; position:absolute; background:#fff; border-radius:50% }
.bnp-bg .c1{ left:-30%; top:10%; animation-delay:0s } .bnp-bg .c2{ left:-45%; top:45%; transform:scale(.9); animation-delay:8s } .bnp-bg .c3{ left:-35%; top:72%; transform:scale(1.1); animation-delay:16s }
@keyframes drift{ to{ transform:translateX(160%) } }

/* board: responsive grid so slots scale smoothly with viewport */
.bnp-board{
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(36px, var(--tile)));
  justify-content: center;
  gap: var(--gap);
  padding: calc(var(--pad) + 6px);
  background: linear-gradient(180deg, rgba(250,255,255,.95), rgba(245,250,255,.85));
  border-radius: 16px;
  border: 2px dashed rgba(120,170,255,.12);
  box-shadow: inset 0 6px 18px rgba(255,255,255,.6);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  z-index: 2;
  margin-top: 113px;
  overflow: visible;
}

/* Ensure individual slots don't force overflow: let them size with the grid cell */
.bnp-slot {
  width: 100%;
  max-width: var(--tile);
  height: var(--tile);
  display: grid;
  min-width: 0;
  place-items: center;
  user-select: none;
  border-radius: 14px;
  background: linear-gradient(180deg,#f7fbff,#ffffff);
  border: 2px dashed rgba(120,170,255,.12);
  color: rgba(80,120,160,.6);
  box-sizing: border-box;
}

/* Tiles (draggable items) keep same visual size but are allowed to wrap within tiles area */
.bnp-tile {
  width: var(--tile);
  height: var(--tile);
  display: grid;
  place-items: center;
  user-select: none;
  border-radius: 14px;
  font-weight: 900;
  font-size: clamp(12px, calc(var(--tile) * 0.48), 34px);
  letter-spacing: .02em;
  color: #082034;
  background: linear-gradient(180deg,#ffffff,#eaf4ff);
  box-shadow: 0 20px 40px rgba(14,30,60,.08), 0 2px 6px rgba(8,20,40,.04);
  box-sizing: border-box;
  min-width: 0;
  line-height: 1;
}

/* spacing between board and tiles */
.bnp-board + .bnp-tiles { margin-top: 8px; }

/* tiles container */
.bnp-tiles{
  position: relative;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--gap);
  padding:15px;
  background:linear-gradient(180deg,#ffffff,#f5fbff);
  border-radius:14px;
  box-shadow:0 18px 40px rgba(8,20,40,.07);
  width:calc(100% - 48px);
  max-width:calc(100% - 48px);
  box-sizing:border-box;
  z-index: 2;
}

.bnp-slot{ background:linear-gradient(180deg,#f7fbff,#ffffff); border:2px dashed rgba(120,170,255,.12); color:rgba(80,120,160,.6) }
.bnp-slot.filled{ border-style:solid; color:#08314b; background:linear-gradient(180deg,rgba(255,255,255,.92), rgba(250,250,255,.98)); box-shadow:inset 0 6px 14px rgba(20,40,80,.03); font-weight: bolder; font-size: 22px; }

.bnp-tile{
  position:relative; cursor:grab; color:#082034; border:0; background:linear-gradient(180deg,#ffffff,#eaf4ff);
  box-shadow: 0 20px 40px rgba(14,30,60,.08), 0 2px 6px rgba(8,20,40,.04);
  transform: translateZ(0);
}
.bnp-tile:active{ cursor:grabbing }
.bnp-tile.glow{ box-shadow:0 18px 50px rgba(124,77,255,.18), 0 8px 24px rgba(10,30,60,.08); transform:scale(1.02) }
.bnp-tile.wrong{ animation:shake .28s ease }
@keyframes shake{ 20%{transform:translateX(-8px)} 60%{transform:translateX(8px)} 100%{transform:translateX(0)} }

/* improved hint highlight: more prominent (scale + pulse + outline) */
.bnp-tile.hint-glow {
  animation: hintPop .9s cubic-bezier(.2,.9,.24,1);
  box-shadow: 0 30px 80px rgba(124,77,255,.22), 0 12px 36px rgba(10,30,60,.10);
  transform: translateY(-6px) scale(1.14);
  z-index: 9999; /* bring to front while highlighted */
  border: 2px solid rgba(255,255,255,0.9);
  background: linear-gradient(180deg,#fff8ff,#eaf0ff);
}
@keyframes hintPop {
  0% { transform: translateY(0) scale(1); opacity:1; filter: brightness(1); }
  30% { transform: translateY(-8px) scale(1.18); filter: brightness(1.08); }
  60% { transform: translateY(-4px) scale(1.12); filter: brightness(1.04); }
  100% { transform: translateY(0) scale(1.14); filter: brightness(1); }
}

.bnp-fx{ position:absolute; inset:0; pointer-events:none; z-index:4; opacity:0.85; mix-blend-mode:screen; }
#bnp-sparkle, #bnp-sparkle-end { opacity:0.75; filter: blur(.4px); }

/* end screen */
.bnp-end{ place-items:center }
.bnp-reveal{text-align:center}
.bnp-reveal-title{font-size:clamp(30px,6vw,56px); margin:0 0 8px }
.bnp-end-stats{opacity:.85;margin:6px 0 16px}
.bnp-sharebar{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap }
.bnp-icon{ display:grid; place-items:center; width:44px; height:44px; background:#fff; border-radius:12px; box-shadow:var(--shadow); text-decoration:none; color:var(--ink); font-weight:700 }

/* bigger, bolder, animated reveal title */
.bnp-reveal-title {
  font-size: clamp(40px, 9vw, 92px);
  margin: 0 0 12px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
  transform-origin: center;
  opacity: 0;
  transform: scale(.86) translateY(8px);
  transition: opacity .36s ease, transform .48s cubic-bezier(.2,.9,.24,1);
  text-shadow: 0 10px 30px rgba(20,30,60,.12);
}

/* gender-specific color accents (added by JS at reveal time) */
.bnp-reveal-title.boy { color: #0b5ea8; text-shadow: 0 12px 36px rgba(11,94,168,.18); }
.bnp-reveal-title.girl { color: #d4387a; text-shadow: 0 12px 36px rgba(212,56,122,.18); }
.bnp-reveal-title.twins { color: #5e3ad6; text-shadow: 0 12px 36px rgba(94,58,214,.18); }

/* small 'pop' animation class that JS will add briefly to trigger motion */
.bnp-reveal-title.pop {
  opacity: 1;
  transform: scale(1) translateY(0);
  animation: bnpPopPulse 1.2s cubic-bezier(.2,.9,.24,1);
  font-size: 55px !important;
}

@keyframes bnpPopPulse {
  0%   { transform: scale(.9) translateY(8px); opacity: 0; }
  40%  { transform: scale(1.06) translateY(-6px); opacity: 1; }
  70%  { transform: scale(.98) translateY(0); }
  100% { transform: scale(1) translateY(0); }
}

/* improved end stats layout (cleaner) */
.bnp-end-stats {
  opacity: .95;
  margin: 6px 0 10px;
  font-size: 16px;
  color: rgba(6,28,46,.9);
}

/* sentence where 'Share' button used to be */
.bnp-end-sentence {
  margin: 8px 0 14px;
  color: rgba(12,28,50,.76);
  font-size: 15px;
  text-align: center;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.bnp-sharebar { display:flex; gap:10px; justify-content:center; align-items:center; flex-wrap:wrap; margin-top:6px; }

.bnp-icon { width:52px; height:52px; font-size:20px; }

#bnp-play-again { display: block;
  margin: 20px auto 0; }

@media (max-width:720px){
  :root{ --hud-height: 140px; } /* taller on small screens for stacked HUD rows */
  .bnp-stage{ padding: calc(var(--hud-height)) 14px 16px; min-height:30svh; }
  .bnp-progress{ max-width: 100%; width: 100%; }
  .bnp-badge { min-width:56px; padding:8px 10px; }
  .bnp-board, .bnp-tiles { width: calc(100% - 28px); max-width: calc(100% - 28px); }
  .bnp-board { margin-top: -100px; }
  .bnp-slot.filled {font-size: 16px;}
  .bnp-game-instructions { padding: 26px 26px; font-size: 14px; }
  .bnp-game-instructions .bnp-instr-list { padding-left: 14px; }
}

@media (max-width:520px){
  .bnp-chip { min-width:72px; padding:8px 12px; font-size:15px; }
  .bnp-share-animated { width:100%; }
  :root{ --hud-height: 160px; }
  .bnp-board { margin-top: -100px; }
  .bnp-reveal-title { font-size: clamp(28px, 12vw, 48px); }
  .bnp-end-stats { font-size: 14px; }
  .bnp-icon { width:44px; height:44px; font-size:18px; }
}