/* ---------- Life Board (js/board.js) ---------- */
.bd-wrap {
  position: relative; border-radius: 22px; padding: 6px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .03));
  box-shadow: 0 14px 34px rgba(0, 0, 0, .40), inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.bd-scroll {
  overflow-x: auto; overflow-y: hidden; border-radius: 18px;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .25) transparent;
  -webkit-overflow-scrolling: touch;
}
.bd-scroll::-webkit-scrollbar { height: 6px; }
.bd-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .25); border-radius: 3px; }
.bd-svg { display: block; width: 100%; min-width: 760px; height: auto; border-radius: 18px; user-select: none; }
@media (max-width: 560px) { .bd-svg { min-width: 900px; } }

.bd-svg text { font-family: var(--font-display, 'Fredoka', 'Segoe UI', system-ui, sans-serif); text-anchor: middle; dominant-baseline: central; }
.bd-emo { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35)); }

/* zones */
.bd-zone { opacity: .07; transition: opacity .4s; }
.bd-zone.now { opacity: .17; }
.bd-zone.past { opacity: .10; }
.bd-zsep { stroke: rgba(255, 255, 255, .10); stroke-width: 1.5; stroke-dasharray: 2 6; stroke-linecap: round; }
.bd-hill.back { opacity: .16; }
.bd-hill.front { opacity: .26; }

.bd-label rect { opacity: .28; }
.bd-label .bd-ltxt { fill: #fff; font-size: 12.5px; font-weight: 600; }
.bd-label .bd-lage { fill: rgba(255, 255, 255, .45); font-size: 9.5px; font-weight: 500; letter-spacing: .5px; }
.bd-label.past { opacity: .75; }
.bd-label.next { opacity: .55; }
.bd-label.now rect { opacity: 1; filter: drop-shadow(0 0 6px var(--sc)); }
.bd-label.now .bd-ltxt { fill: #fff; font-weight: 700; }
.bd-label.now .bd-lage { fill: #fff; }

.bd-scene { transition: opacity .4s; }
.bd-scene.next { opacity: .72; }
.bd-scene.past { opacity: .8; }

/* sky life */
.bd-star { fill: #fff8ec; animation: bdTwinkle 3s ease-in-out infinite; }
@keyframes bdTwinkle { 0%, 100% { opacity: .15; } 50% { opacity: .75; } }
.bd-cloud { fill: #fff; opacity: .07; }
.bd-cloud.c1 { animation: bdDrift 95s linear infinite; animation-delay: -20s; }
.bd-cloud.c2 { animation: bdDrift2 120s linear infinite; animation-delay: -70s; }
.bd-cloud.c3 { animation: bdDrift3 140s linear infinite; animation-delay: -40s; }
@keyframes bdDrift { from { transform: translate(-60px, 62px); } to { transform: translate(1060px, 62px); } }
@keyframes bdDrift2 { from { transform: translate(-60px, 92px); } to { transform: translate(1060px, 92px); } }
@keyframes bdDrift3 { from { transform: translate(-60px, 54px); } to { transform: translate(1060px, 54px); } }
.bd-bird { fill: none; stroke: rgba(255, 248, 236, .55); stroke-width: 1.6; stroke-linecap: round; }
.bd-bird.b1 { animation: bdFly 38s linear infinite, bdFlap .5s ease-in-out infinite alternate; animation-delay: -12s, 0s; }
.bd-bird.b2 { animation: bdFly2 38s linear infinite, bdFlap .45s ease-in-out infinite alternate; animation-delay: -13s, .2s; }
@keyframes bdFly { from { transform: translate(-30px, 78px); } 50% { transform: translate(500px, 64px); } to { transform: translate(1040px, 80px); } }
@keyframes bdFly2 { from { transform: translate(-48px, 86px); } 50% { transform: translate(482px, 72px); } to { transform: translate(1022px, 88px); } }
@keyframes bdFlap { to { d: path("M-6 -1 Q-3 2 0 0 Q3 2 6 -1"); } }

/* scenery props */
.bd-ramp { fill: rgba(255, 255, 255, .16); stroke: rgba(255, 255, 255, .35); stroke-width: 1.5; }
.bd-swing { fill: none; stroke: rgba(255, 255, 255, .3); stroke-width: 2; stroke-linecap: round; }
.bd-tower.t0 { fill: #3a3f7a; }
.bd-tower.t1 { fill: #2f5aa8; }
.bd-win { fill: rgba(255, 255, 255, .14); }
.bd-win.on { fill: #ffe08a; animation: bdTwinkle 4s ease-in-out infinite; }
.bd-sun { opacity: .9; animation: bdGlow 5s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes bdGlow { 50% { transform: scale(1.08); opacity: 1; } }
.bd-wave { fill: none; stroke: rgba(140, 200, 255, .45); stroke-width: 2.5; stroke-linecap: round; animation: bdWave 3s ease-in-out infinite; }
@keyframes bdWave { 50% { transform: translateX(6px); } }
.bd-bounce { animation: bdBounce 2.4s ease-in-out infinite; }
@keyframes bdBounce { 0%, 100% { transform: translateY(0); } 15% { transform: translateY(-6px); } 30% { transform: translateY(0); } }
.bd-float { animation: bdFloat 4s ease-in-out infinite; }
@keyframes bdFloat { 50% { transform: translateY(-5px); } }
.bd-sway { animation: bdSway 5s ease-in-out infinite; }
@keyframes bdSway { 50% { transform: rotate(8deg) translateX(4px); } }
.bd-sway2 { animation: bdSway2 4s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes bdSway2 { 50% { transform: rotate(-5deg); } }
.bd-toss { animation: bdToss 3.2s ease-in-out infinite; }
@keyframes bdToss { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-10px); } }
.bd-spin { animation: bdSpin 6s ease-in-out infinite; }
@keyframes bdSpin { 50% { transform: rotate(25deg); } }

/* road */
.bd-road-edge, .bd-road, .bd-road-prog, .bd-road-dash { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.bd-road-edge { stroke: #120f24; stroke-width: 36; opacity: .85; }
.bd-road { stroke: #3d3568; stroke-width: 29; }
.bd-road-prog { stroke-width: 29; opacity: .5; }
.bd-road-dash { stroke: #fff8ec; stroke-width: 2.4; stroke-dasharray: 9 11; opacity: .55; animation: bdDash 6s linear infinite; }
@keyframes bdDash { to { stroke-dashoffset: -40; } }

/* tiles */
.bd-tshadow { fill: rgba(0, 0, 0, .35); }
.bd-tdisc { fill: #fff8ec; stroke: var(--sc); stroke-width: 3.5; }
.bd-tin { fill: none; stroke: var(--sc); stroke-width: 1; opacity: .35; }
.bd-tage { fill: #2b2340; font-size: 11px; font-weight: 700; }
.bd-tile.todo .bd-tdisc { fill: #e9e1f5; }
.bd-tile.todo { opacity: .82; }
.bd-tile.done .bd-tdisc { fill: var(--sc); stroke: #fff8ec; stroke-width: 2.5; }
.bd-tile.done .bd-tin { stroke: #fff; opacity: .4; }
.bd-tile.done .bd-tage { fill: #fff; }
.bd-tile.now .bd-tdisc { fill: #fff; stroke: var(--sc); stroke-width: 4; filter: drop-shadow(0 0 6px var(--sc)); }
.bd-tile.now .bd-tage { font-size: 12px; }
.bd-tile.finish .bd-tage { font-size: 13px; }
.bd-pulse { fill: none; stroke: var(--sc); stroke-width: 3; animation: bdPulse 1.6s ease-out infinite; }
@keyframes bdPulse { from { transform: scale(1); opacity: .9; } to { transform: scale(2.1); opacity: 0; } }
.bd-intro .bd-tpop { animation: bdPop .45s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes bdPop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* tokens */
.bd-token { transition: transform .45s cubic-bezier(.3, 1.4, .5, 1); }
.bd-token.hopping { transition: none; }
.bd-pshadow { fill: rgba(0, 0, 0, .45); }
.bd-pdisc { stroke: #fff; stroke-width: 3; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .45)); }
.bd-pbase { stroke: #fff; stroke-width: 1.5; }
.bd-pemo { dominant-baseline: central; }
.bd-token.cur .bd-pawn { animation: bdBob 1.3s ease-in-out infinite; }
.bd-token.cur .bd-pdisc { stroke-width: 3.5; filter: drop-shadow(0 0 7px var(--pc)) drop-shadow(0 4px 3px rgba(0, 0, 0, .45)); }
.bd-token.cur .bd-pshadow { animation: bdShadow 1.3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes bdBob { 50% { transform: translateY(-5px); } }
@keyframes bdShadow { 50% { transform: scale(.75); opacity: .6; } }
.bd-pname { fill: #fff; font-size: 9.5px; font-weight: 700; paint-order: stroke; stroke: rgba(0, 0, 0, .25); stroke-width: 2px; }
.bd-ptag rect { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .4)); }
.bd-token.hopping .bd-ptag { opacity: 0; }
.bd-token.dead { opacity: .9; }
.bd-token.dead .bd-pshadow { opacity: .5; }
.bd-grave { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .5)); }
.bd-stone { fill: #c9c2dc; stroke: #6f6890; stroke-width: 1.5; }
.bd-cross { fill: none; stroke: #6f6890; stroke-width: 1.8; stroke-linecap: round; }
.bd-mound { opacity: .7; }
.bd-gemo { filter: grayscale(.7); opacity: .9; }
.bd-intro .bd-token.intro .bd-drop { animation: bdDrop .6s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes bdDrop { from { transform: translateY(-70px); opacity: 0; } 60% { opacity: 1; } to { transform: none; opacity: 1; } }

/* hop fx */
.bd-puff { fill: none; stroke-width: 2.5; animation: bdPuff .6s ease-out forwards; }
@keyframes bdPuff { from { transform: scale(.4); opacity: .9; } to { transform: scale(1.6); opacity: 0; } }
.bd-spark { animation: bdSpark .65s ease-out forwards; }
@keyframes bdSpark { from { transform: none; opacity: 1; } to { transform: translate(var(--dx), var(--dy)); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .bd-svg *, .bd-svg *::before { animation: none !important; transition: none !important; }
}