/*! © 2026 Dr. Oluwaseun Ogunmola · Dr. Ogunmola GameLabs · All rights reserved. Free to play at https://gamelabs.ogunmola.com.ng · Not licensed for re-hosting, copying or reuse. Terms: https://gamelabs.ogunmola.com.ng/terms/ */
body { --accent: #FFB703; --accent-deep: #D98E04; --bg1: #FFF1CC; --bg2: #FFFCF2; }
.bb-cards { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 10px; max-width: 640px; margin: 0 auto; }
.bb-card { appearance: none; border: 0; aspect-ratio: 3 / 4; border-radius: 18px; cursor: pointer; position: relative; background: transparent; perspective: 600px; padding: 0; }
.bb-card span { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 18px; backface-visibility: hidden; transition: transform .35s ease; font-size: clamp(1.8rem, 7vw, 3rem); box-shadow: 0 4px 0 #D9C48F; }
.bb-back { background: repeating-linear-gradient(45deg, #5BAA4A 0 12px, #4E9A3F 12px 24px); }
.bb-face { background: #fff; transform: rotateY(180deg); }
.bb-card.up .bb-back { transform: rotateY(180deg); }
.bb-card.up .bb-face { transform: rotateY(360deg); }
.bb-card.done .bb-face { background: #EAFBF0; box-shadow: 0 0 0 3px #1F8A45; }
.bb-show { margin: 10px 0 14px; }
.bb-timer { height: 10px; border-radius: 99px; background: #F2E3B6; overflow: hidden; position: relative; max-width: 420px; margin: 0 auto; }
.bb-timer::after { content: ""; position: absolute; inset: 0; background: var(--accent-deep); transform-origin: left; animation: bbShrink linear forwards; animation-duration: inherit; }
@keyframes bbShrink { to { transform: scaleX(0); } }
.bb-path { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }
.bb-path .kk-chip { min-width: 56px; padding: 6px 10px; font-size: clamp(1.6rem, 6vw, 2.4rem); }
.bb-path .kk-chip.num { font-family: var(--display); font-weight: 700; }
.bb-path .ask { background: var(--accent); color: #fff; font-family: var(--display); font-weight: 700; }
.bb-arrow { font-size: 1.5rem; color: #C2A15A; }
.bb-wall { width: min(260px, 70vw); aspect-ratio: 1; margin: 0 auto; border-radius: 24px; background: radial-gradient(circle at 50% 30%, #FFF6D6, #F2D58A); display: grid; place-items: center; box-shadow: inset 0 -12px 0 rgba(0,0,0,.06); }
.bb-shadow { font-size: clamp(5rem, 22vw, 8rem); filter: brightness(0) opacity(.85); }
.bb-shadow.tilt { transform: rotate(-20deg) scaleX(-1); }
.bb-word { font-family: var(--display); font-weight: 700; font-size: 1.4rem; margin: 6px 0 0; }