/* Pop Block — clean white look (Oct 19 2026, replaces the neon art). Everything is drawn in CSS, like Pop! and
   Pop Merge: white page, jelly blocks coloured from game.js (--bc), plates and buttons in code. Loaded after
   base/layout/components and only restyles them; the game logic is unchanged. */

body { background: #f6f7fb; }
body:has(#rpGuestBanner > *) { padding-bottom: 92px; }
.platform-strip::before, .platform-strip::after { display: none; }

/* header */
.score-badge { display: none !important; }
.brand { height: 44px; }
.brand img { height: 100%; width: auto; }
.top #rpAccountIcon { overflow: hidden; padding: 0; }

/* score plate: two white pills, combo flame between them */
.nb-plate { position: relative; flex-shrink: 0; width: min(440px, calc(100% - 8px)); margin: 4px auto 8px; display: flex; gap: 10px; align-items: stretch; }
.nb-plate > div { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px 10px; line-height: 1;
  background: #fff; border: 1.5px solid #ece7f7; border-radius: 16px; box-shadow: 0 3px 0 #ece7f7, 0 8px 18px -10px rgba(76,29,149,.25); }
.nb-plate small { font-size: 10px; font-weight: 800; letter-spacing: 1.2px; color: #8b8aa6; }
.nb-plate b { font-family: 'Baloo 2', sans-serif; font-size: clamp(20px, 6vw, 26px); font-weight: 800; color: #db2777; font-variant-numeric: tabular-nums; margin-top: 2px; }
.nb-r b { color: #7c3aed; }
.nb-flame { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 34px; height: 34px; border-radius: 50%;
  background: #fff; border: 1.5px solid #fde68a; display: none; place-items: center; font-style: normal; font-size: 18px;
  box-shadow: 0 3px 10px rgba(245,158,11,.35); animation: cbFlame .9s ease-in-out infinite; }
.nb-flame::before { content: '🔥'; }
.nb-flame.on { display: grid; }
@keyframes cbFlame { 50% { transform: translate(-50%, -50%) scale(1.12); } }

/* board: a white card; it takes whatever height is left (body is 100dvh) */
.board-wrap { flex: 1 1 auto; min-height: 0; overflow: visible; container-type: size; display: flex; align-items: center; justify-content: center; }
.pb-card { width: min(440px, 100cqw, 100cqh); margin: 0 auto; aspect-ratio: 1; flex-shrink: 0; padding: 3.2%; justify-content: center; overflow: visible;
  background: #fff; border: 1.5px solid #ece7f7; border-radius: 22px; box-shadow: 0 4px 0 #ece7f7, 0 14px 30px -14px rgba(76,29,149,.3); }
.pb-cell { background: #f1f0f7; border: 0; border-radius: 22%; position: relative; box-shadow: inset 0 2px 3px rgba(60,40,120,.08); }
/* jelly block: lighter top, deeper bottom lip, glossy highlight (colour from game.js --bc) */
.pb-cell.filled, .pb-piece-cell { border-radius: 24%;
  background: radial-gradient(120% 90% at 50% 18%, color-mix(in srgb, var(--bc, #ec4899) 50%, #fff) 0%, var(--bc, #ec4899) 50%, color-mix(in srgb, var(--bc, #ec4899) 75%, #000) 100%);
  box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--bc, #ec4899) 60%, #000), inset 0 2px 3px rgba(255,255,255,.55), 0 2px 4px color-mix(in srgb, var(--bc, #ec4899) 35%, transparent); }
.pb-cell.filled::before, .pb-piece-cell::before { content: ''; position: absolute; left: 18%; top: 12%; width: 46%; height: 22%; border-radius: 50%;
  background: rgba(255,255,255,.55); pointer-events: none; }
.pb-piece-cell { position: relative; }
.pb-piece-grid > div:not(.pb-piece-cell) { background: none; box-shadow: none; }
.pb-cell.preview-valid { background: color-mix(in srgb, #7c3aed 22%, #fff) !important; box-shadow: inset 0 0 0 2px rgba(124,58,237,.45) !important; }
.pb-cell.preview-invalid { background: #fee2e2 !important; box-shadow: inset 0 0 0 2px rgba(239,68,68,.7) !important; }
/* the lines this placement would clear glow while the piece is held */
.pb-cell.will-clear::after { content: ''; position: absolute; inset: -2px; border-radius: 26%; pointer-events: none;
  box-shadow: 0 0 0 2px #fbbf24, 0 0 12px 2px rgba(251,191,36,.7); animation: cbGlow .7s ease-in-out infinite alternate; }
@keyframes cbGlow { from { opacity: .45; } to { opacity: 1; } }
.pb-cell.clearing { animation: cbClear .3s ease forwards; }
@keyframes cbClear { 40% { transform: scale(1.15); filter: brightness(1.35); } to { opacity: 0; transform: scale(.4); } }

/* gold platform block: gold jelly + the platform's colour + its real emblem */
.pb-cell.gold, .pb-piece-cell.gold { --bc: #f5b301; position: relative; }
.pb-cell.gold::before, .pb-piece-cell.gold::before { display: none; }
.nb-gold { position: absolute; left: 16%; top: 16%; width: 68%; height: 68%; border-radius: 22%; background: var(--pc); display: flex; align-items: center; justify-content: center;
  overflow: hidden; box-shadow: 0 0 0 1.5px rgba(255,255,255,.8); }
.nb-gold img { width: 86%; height: 86%; object-fit: contain; }

/* effects layer over the board, all drawn in CSS */
.nb-fx { position: absolute; pointer-events: none; z-index: 25; overflow: visible; }
.nb-sweep { position: absolute; height: calc(var(--cell, 36px) * .9); transform: translateY(-50%); border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.95), rgba(251,191,36,.85), rgba(255,255,255,.95), transparent);
  animation: cbSweep .45s ease-out forwards; }
.nb-sweep.col { transform-origin: 0 0; transform: rotate(90deg) translateY(-50%); }
@keyframes cbSweep { from { opacity: 0; clip-path: inset(0 100% 0 0); } 40% { opacity: 1; } to { opacity: 0; clip-path: inset(0 0 0 0); } }
.nb-burst { position: absolute; width: calc(var(--cell, 36px) * 1.4); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.95) 0 20%, rgba(251,191,36,.7) 35%, transparent 65%); animation: cbBurst .45s ease-out both; }
@keyframes cbBurst { from { opacity: 1; transform: translate(-50%, -50%) scale(.3); } to { opacity: 0; transform: translate(-50%, -50%) scale(1.4); } }
.nb-goldburst { position: absolute; width: calc(var(--cell, 36px) * 3); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(255,240,170,.95) 0 15%, rgba(245,179,1,.65) 35%, transparent 68%); animation: cbBurst .6s ease-out forwards; }
.nb-pop { position: absolute; transform: translate(-50%, 0); white-space: nowrap; font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 26px; color: #db2777;
  -webkit-text-stroke: 4px #fff; paint-order: stroke fill; animation: nbPop 1s ease-out forwards; }
.nb-pop.gold { font-size: 17px; color: #b45309; }
@keyframes nbPop { 0% { opacity: 0; transform: translate(-50%, 6px) scale(.6); } 20% { opacity: 1; transform: translate(-50%, -6px) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -48px) scale(1); } }
.board-wrap.nb-shake { animation: nbShake .35s ease; }
@keyframes nbShake { 20% { transform: translate(-5px, 2px); } 40% { transform: translate(5px, -2px); } 60% { transform: translate(-3px, 1px); } 80% { transform: translate(2px, 0); } }

/* combo badge ("COMBO x3!", "INCRÍVEL!", "LENDÁRIO!"): a pink pill */
.combo-popup { top: 6%; max-width: none; width: auto; padding: 8px 22px; border-radius: 999px; font-family: 'Baloo 2', sans-serif; font-size: clamp(20px, 6.4vw, 28px);
  color: #fff; background: linear-gradient(180deg, #ff5fa8, #e11d74); box-shadow: 0 4px 0 #a30f52, 0 10px 22px -8px rgba(225,29,116,.6); text-shadow: 0 1px 2px rgba(0,0,0,.25); }

/* "NOVO RECORDE!" when you pass your record mid-game */
.nb-record { position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%) scale(.5); opacity: 0; pointer-events: none; z-index: 31;
  padding: 10px 26px; border-radius: 999px; background: linear-gradient(180deg, #fde68a, #f59e0b); box-shadow: 0 4px 0 #b45309, 0 12px 26px -10px rgba(245,158,11,.7); }
.nb-record span { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: clamp(16px, 5vw, 22px); color: #6b2a00; white-space: nowrap; }
.nb-record.show { animation: nbRecord 2.4s ease forwards; }
@keyframes nbRecord { 0% { opacity: 0; transform: translate(-50%, -80%) scale(.5); } 12% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
  20% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -60%) scale(1); } }

/* tray: three white slots */
.pb-tray-wrap { padding: 10px 0 4px; }
.pb-tray { width: min(440px, calc(100% - 4px)); margin: 0 auto; aspect-ratio: 1040 / 400; gap: 10px; display: grid; grid-template-columns: repeat(3, 1fr); }
.pb-piece-slot { width: 100%; height: 100%; background: #fff; border: 1.5px solid #ece7f7; border-radius: 18px; box-shadow: 0 3px 0 #ece7f7; }
.pb-ghost { filter: drop-shadow(0 10px 14px rgba(76,29,149,.3)); }

/* result screens */
.result { background: rgba(255,255,255,.95); border-radius: 20px; backdrop-filter: blur(3px); }
.result-title { font-family: 'Baloo 2', sans-serif; font-size: 24px; color: #db2777; }
.result-moves { color: #1e1b4b; }
.result-btn { background: linear-gradient(180deg, #ff5fa8, #e11d74); color: #fff; border: 0; border-radius: 16px;
  box-shadow: 0 4px 0 #a30f52, 0 10px 18px -8px rgba(225,29,116,.5); }
.result-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #a30f52; }

/* bottom buttons */
.hud { background: #fff; border: 1.5px solid #ece7f7; box-shadow: 0 3px 0 #ece7f7; }
.hud .hud-stats { display: none; }
.hud-btns { flex: 1; justify-content: center; }
.btn { background: #f6f4fb; border: 1.5px solid #ece7f7; color: #4c1d95; }

/* short screens: smaller plate and tray so the board keeps most of the room */
@media (max-height: 760px) {
  .nb-plate > div { padding: 4px 10px; }
  .pb-tray { width: min(340px, calc(100% - 4px)); }
  .pb-tray-wrap { padding-top: 6px; }
  .brand { height: 36px; }
}
@media (prefers-reduced-motion: reduce) { .nb-flame, .pb-cell.will-clear::after { animation: none; } }
.result .lose-taunt { max-width: 66%; }
.result .result-sub { max-width: 70%; }
/* the floating "Dúvidas" chat button sits over the right end of the bottom button row: keep that corner free */
body:has(#rpChatFab[style*="flex"]) .hud, body:has(#rpChatFab.show) .hud { width: auto; margin-left: 12px; margin-right: 84px; }
@media (min-width: 481px) { body:has(#rpChatFab[style*="flex"]) .hud, body:has(#rpChatFab.show) .hud { margin-right: 100px; } }