/* ============================================================
   BINDU LOOP — visual layer
   ============================================================ */

.bd-title-screen{
  min-height:100dvh !important;
  justify-content:flex-end !important;
  align-items:stretch !important;
  padding:0 18px calc(28px + env(safe-area-inset-bottom)) !important;
  background:
    linear-gradient(180deg,rgba(20,10,40,0) 0%,rgba(20,10,40,.7) 50%,#0a0618 100%),
    radial-gradient(circle at 30% 20%,rgba(255,138,60,.35),transparent 45%),
    radial-gradient(circle at 70% 30%,rgba(122,214,255,.25),transparent 40%),
    radial-gradient(circle at 50% 80%,rgba(201,182,255,.2),transparent 50%),
    linear-gradient(165deg,#1a1030 0%,#120820 50%,#080510 100%) !important;
  overflow:hidden;
  position:relative;
}
.bd-title-screen::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:
    repeating-linear-gradient(45deg,transparent 0 40px,rgba(255,211,77,.03) 40px 41px),
    repeating-linear-gradient(-45deg,transparent 0 40px,rgba(122,214,255,.03) 40px 41px);
  animation:bd-grid-shift 20s linear infinite;
}
.bd-title-art{
  position:relative;
  width:min(80vw,300px);
  height:min(60vw,220px);
  margin:10vh auto 16px;
  z-index:2;
}
.bd-loop-demo{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:6px;
  padding:16px;
  border-radius:20px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,211,77,.25);
  box-shadow:0 20px 50px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter:blur(12px);
}
.bd-demo-cell{
  aspect-ratio:1;
  border-radius:8px;
  background:rgba(255,255,255,.08);
  position:relative;
}
.bd-demo-cell.bindu{
  box-shadow:0 0 12px currentColor,inset 0 0 8px rgba(255,255,255,.4);
  animation:bd-bindu-pulse 2s ease-in-out infinite;
}
.bd-demo-cell.bindu.c1{background:#ff8a3c;color:#ff8a3c}
.bd-demo-cell.bindu.c2{background:#ff7eb3;color:#ff7eb3}
.bd-demo-cell.bindu.c3{background:#7ad6ff;color:#7ad6ff}
.bd-demo-cell.path.c1{background:rgba(255,138,60,.45)}
.bd-demo-cell.path.c2{background:rgba(255,126,179,.45)}
.bd-demo-thread{
  position:absolute;
  inset:-20%;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(90deg,transparent 48%,rgba(255,211,77,.6) 49%,rgba(255,211,77,.6) 51%,transparent 52%),
    linear-gradient(0deg,transparent 48%,rgba(255,211,77,.4) 49%,rgba(255,211,77,.4) 51%,transparent 52%);
  animation:bd-thread-glow 3s ease-in-out infinite;
}
.bd-title-screen .game-title{
  position:relative;z-index:2;
  font-family:"Cinzel Decorative","Cinzel",serif !important;
  font-size:clamp(40px,11vw,68px) !important;
  line-height:.9 !important;
  text-align:left !important;
  background:linear-gradient(180deg,#fff8e0,#ffd34d 45%,#ff8a3c) !important;
  -webkit-background-clip:text !important;background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  filter:drop-shadow(0 4px 0 #3a2010) drop-shadow(0 8px 20px rgba(0,0,0,.5)) !important;
}
.bd-title-screen .tagline{
  position:relative;z-index:2;
  color:#d8c8ff !important;
  font:800 16px/1.35 "Baloo 2",system-ui !important;
  text-align:left !important;
  max-width:480px;
}
.bd-title-screen .bd-story-snippet{
  position:relative;z-index:2;
  margin:8px 0 14px;
  padding:10px 14px;
  border-radius:12px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(201,182,255,.2);
  color:#e8e0ff;
  font:700 13px/1.4 "Baloo 2",system-ui;
  max-width:480px;
}
.bd-title-screen .btn-big{width:100%;max-width:480px;position:relative;z-index:2}
.bd-title-screen .btn-start{
  background:linear-gradient(180deg,#ffd34d,#c8962a) !important;
  color:#2a1808 !important;
  box-shadow:0 6px 0 #6b4a10,0 10px 24px rgba(255,211,77,.25) !important;
}

#screen-bindu-game.active{
  padding:8px 10px !important;
  gap:7px !important;
  height:100dvh;
  min-height:100dvh;
  overflow:hidden;
  justify-content:flex-start;
  align-items:stretch;
}
#bd-floor-lore{
  width:100%;
  padding:6px 12px;
  border-radius:12px;
  background:rgba(45,33,55,.75);
  border:1px solid rgba(201,182,255,.18);
  color:#e8dff8;
  font:800 11px/1.3 "Baloo 2",system-ui;
  text-align:center;
}
#bd-hud{
  display:grid;
  grid-template-columns:38px 1fr auto auto auto 38px;
  gap:6px;
  align-items:center;
  width:100%;
  padding:6px 8px;
  border-radius:14px;
  background:linear-gradient(180deg,rgba(45,33,55,.92),rgba(30,22,40,.95));
  border:1px solid rgba(255,180,120,.22);
  box-shadow:0 5px 0 rgba(0,0,0,.2);
}
#bd-hud .hud-floor{font-family:"Cinzel",serif;font-size:13px;font-weight:900;color:#ffe9a8}
#bd-hud .hud-floor span{color:#ffd34d}
.bd-hud-hearts{display:flex;gap:3px;font-size:16px}
.bd-hud-hearts span.break{animation:bd-heart-break .5s ease-out forwards}
#bd-hud-mana,#bd-hud-score{font:900 13px "Baloo 2",system-ui;color:#c9b6ff}
#bd-hud-score{color:#ffe08a}

#bd-monster-strip{
  display:grid;
  grid-template-columns:72px 1fr auto;
  gap:8px;
  align-items:center;
  width:100%;
  padding:8px 10px;
  border-radius:16px;
  background:linear-gradient(180deg,rgba(45,33,55,.88),rgba(25,18,35,.92));
  border:1px solid rgba(255,180,120,.18);
  position:relative;
  overflow:hidden;
}
#bd-monster-art{
  width:64px;height:64px;
  display:grid;place-items:center;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.35));
  transition:transform .3s;
}
#bd-monster-art svg{width:64px;height:64px}
#bd-monster-art.hit{animation:bd-mon-hit .45s ease-out}
#bd-monster-art.crit{animation:bd-mon-crit .5s ease-out}
#bd-monster-art.attack{animation:bd-mon-attack .4s ease-out}
#bd-monster-art.spawn{animation:bd-mon-spawn .6s ease-out}
#bd-monster-art.dead{animation:bd-mon-dead .8s ease-out forwards;opacity:.4}
#bd-monster-emote{
  position:absolute;left:52px;top:2px;
  font-size:22px;opacity:0;transform:scale(.5);
  transition:opacity .15s,transform .2s;
  pointer-events:none;
}
#bd-monster-emote.show{opacity:1;transform:scale(1)}
#bd-monster-name{font-family:"Cinzel",serif;font-size:14px;font-weight:900;color:#ffe9a8;line-height:1.1}
#bd-monster-name .mtitle{display:block;font-size:10px;color:#c9b6ff;font-weight:800}
.bd-hp-bar{height:10px;background:rgba(0,0,0,.35);border-radius:6px;overflow:hidden;margin-top:4px}
.bd-hp-bar div{height:100%;background:linear-gradient(90deg,#ff4d6d,#ff7eb3);border-radius:6px;transition:width .3s}
#bd-hp-txt{font-size:10px;color:#cdbcd6;font-weight:800;margin-top:2px}
#bd-hud-combo{
  font:900 12px "Baloo 2",system-ui;
  color:#ffd34d;
  padding:4px 8px;
  border-radius:10px;
  background:rgba(255,211,77,.15);
  opacity:0;
  transform:scale(.8);
  transition:opacity .2s,transform .2s;
}
#bd-hud-combo.show{opacity:1;transform:scale(1)}

#bd-board-wrap{
  position:relative;
  width:100%;
  flex:1;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
#bd-board{
  --bsize:min(94vw,420px,calc(100dvh - 320px));
  width:var(--bsize);
  height:var(--bsize);
  display:grid;
  gap:3px;
  padding:8px;
  border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04));
  border:2px solid rgba(255,211,77,.25);
  box-shadow:0 12px 32px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.15);
  position:relative;
  touch-action:none;
}
.bd-cell{
  position:relative;
  border-radius:7px;
  background:rgba(255,253,254,.92);
  border:1px solid rgba(58,42,63,.12);
  cursor:pointer;
  transition:background .15s,box-shadow .15s,transform .1s;
  min-width:0;min-height:0;
}
.bd-cell.blocked{
  background:repeating-linear-gradient(45deg,#2a2030,#2a2030 4px,#1a1420 4px 8px);
  border-color:rgba(255,77,109,.3);
  cursor:not-allowed;
  opacity:.85;
}
.bd-cell.blocked::after{content:"✕";position:absolute;inset:0;display:grid;place-items:center;color:rgba(255,77,109,.4);font-size:14px;font-weight:900}
.bd-cell.bindu{
  z-index:2;
  box-shadow:0 3px 0 rgba(0,0,0,.2),0 0 16px var(--bd-glow, rgba(255,211,77,.5));
  animation:bd-bindu-pulse 2.5s ease-in-out infinite;
}
.bd-cell.bindu::before{
  content:attr(data-sym);
  position:absolute;inset:0;
  display:grid;place-items:center;
  font:900 clamp(10px,3vw,16px) "Cinzel",serif;
  color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.4);
}
.bd-cell.path{
  background:var(--bd-color,rgba(255,138,60,.55)) !important;
  border-color:var(--bd-glow,rgba(255,138,60,.8));
  box-shadow:inset 0 0 8px rgba(255,255,255,.25);
}
.bd-cell.path.preview{
  background:var(--bd-preview,rgba(255,138,60,.35)) !important;
  animation:bd-path-pulse .6s ease-in-out infinite alternate;
}
.bd-cell.path.locked{box-shadow:inset 0 0 12px rgba(255,255,255,.35),0 0 8px var(--bd-glow)}
.bd-cell.path.weak-hit{animation:bd-weak-flash .5s ease-out}
.bd-cell.active-ring{box-shadow:0 0 0 3px #ffd34d,0 0 20px rgba(255,211,77,.6)}
.bd-cell.glimpse{box-shadow:inset 0 0 10px rgba(255,255,255,.6)}

#bd-board-fx{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.bd-thread-spark{
  position:absolute;
  width:8px;height:8px;
  border-radius:50%;
  background:var(--spark-color,#ffd34d);
  box-shadow:0 0 10px var(--spark-color,#ffd34d);
  animation:bd-spark-fly .6s ease-out forwards;
}
.bd-float{
  position:absolute;
  font:900 14px "Baloo 2",system-ui;
  color:#ffd34d;
  text-shadow:0 2px 4px rgba(0,0,0,.5);
  animation:bd-float-up 1s ease-out forwards;
  pointer-events:none;
  z-index:20;
}

#bd-monster-bubble{
  position:absolute;top:-4px;left:50%;translate:-50% -100%;
  max-width:90%;
  padding:8px 14px;
  border-radius:14px;
  background:rgba(45,33,55,.95);
  border:1px solid rgba(201,182,255,.35);
  color:#f3e8df;
  font:800 12px/1.3 "Baloo 2",system-ui;
  text-align:center;
  opacity:0;
  transform:translate(-50%,-90%) scale(.9);
  transition:opacity .25s,transform .25s;
  pointer-events:none;
  z-index:10;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}
#bd-monster-bubble.show{opacity:1;transform:translate(-50%,-100%) scale(1)}
#bd-monster-bubble::after{
  content:"";
  position:absolute;bottom:-6px;left:50%;translate:-50%;
  border:6px solid transparent;border-top-color:rgba(45,33,55,.95);
}

#bd-descend{
  display:none;
  width:100%;
  padding:12px;
  border:0;
  border-radius:14px;
  background:linear-gradient(180deg,#9ee7c9,#3ecf8e);
  color:#1a3828;
  font:900 15px "Baloo 2",system-ui;
  box-shadow:0 5px 0 #2a8050;
  cursor:pointer;
  animation:bd-descend-pulse 1.5s ease-in-out infinite;
}
#bd-descend.show{display:block}

#bd-relic-strip{
  display:flex;
  gap:6px;
  width:100%;
  overflow-x:auto;
  padding:4px 0;
  min-height:44px;
}
.bd-relic{
  flex:0 0 auto;
  display:flex;align-items:center;gap:5px;
  padding:6px 10px;
  border-radius:12px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(201,182,255,.25);
  color:#f3e8df;
  font:800 11px "Baloo 2",system-ui;
  cursor:pointer;
  transition:transform .1s,background .15s;
}
.bd-relic:active{transform:translateY(2px)}
.bd-relic.passive{opacity:.85;cursor:default}
.bd-relic .ico{font-size:18px}

#bd-tools{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  width:100%;
}
#bd-tools .btn{padding:10px;font-size:12px;border-radius:12px}

.bd-burst{
  position:absolute;
  font:900 16px "Baloo 2",system-ui;
  animation:bd-burst-up .55s ease-out forwards;
  pointer-events:none;
  z-index:15;
}

#screen-bindu-howto .howto-body p{margin-bottom:10px;line-height:1.4}
#screen-bindu-howto .bd-color-legend{
  display:flex;flex-wrap:wrap;gap:6px;
  margin:10px 0;
}
.bd-legend-chip{
  padding:4px 10px;
  border-radius:20px;
  font:800 11px "Baloo 2",system-ui;
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.3);
}

#screen-home .game-card-bindu::before{
  background:
    linear-gradient(100deg,rgba(255,138,60,.95),rgba(107,79,160,.45)),
    repeating-linear-gradient(90deg,rgba(255,255,255,.1) 0 1px,transparent 1px 24px) !important;
}
.bindu-live i:nth-child(2),.bindu-live i:nth-child(6){animation:rb-cell 1.8s ease-in-out infinite}

body.bd-boss #bd-monster-strip{border-color:rgba(255,77,109,.45);box-shadow:0 0 20px rgba(255,77,109,.15)}
#bd-board-wrap.shake{animation:bd-shake .4s ease-out}
#bd-board-wrap.shake-big{animation:bd-shake-big .45s ease-out}

@keyframes bd-grid-shift{to{background-position:80px 80px,80px 80px}}
@keyframes bd-bindu-pulse{50%{transform:scale(1.06);filter:brightness(1.1)}}
@keyframes bd-thread-glow{50%{opacity:.6}}
@keyframes bd-mon-hit{30%{transform:translateX(-6px) scale(.95)}60%{transform:translateX(4px)}}
@keyframes bd-mon-crit{0%{transform:scale(1)}30%{transform:scale(1.15) rotate(-5deg);filter:brightness(1.5)}100%{transform:scale(1)}}
@keyframes bd-mon-attack{50%{transform:scale(1.1) translateY(-4px)}}
@keyframes bd-mon-spawn{0%{transform:scale(0) rotate(-20deg);opacity:0}70%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}
@keyframes bd-mon-dead{to{transform:scale(.6) translateY(20px);opacity:0}}
@keyframes bd-path-pulse{from{opacity:.7}to{opacity:1}}
@keyframes bd-weak-flash{50%{box-shadow:0 0 24px #ff4d6d,inset 0 0 12px #fff}}
@keyframes bd-spark-fly{to{opacity:0;transform:translate(var(--tx,0),var(--ty,-40px)) scale(0)}}
@keyframes bd-float-up{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-36px)}}
@keyframes bd-burst-up{0%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-30px) scale(1.2)}}
@keyframes bd-descend-pulse{50%{box-shadow:0 5px 0 #2a8050,0 0 20px rgba(62,207,142,.4)}}
@keyframes bd-heart-break{50%{transform:scale(1.4);opacity:.3}100%{transform:scale(0);opacity:0}}
@keyframes bd-shake{20%,60%{translate:-5px 0}40%,80%{translate:5px 0}}
@keyframes bd-shake-big{15%,55%{translate:-8px 0}35%,75%{translate:8px 0}}

@media (max-height:680px){
  #bd-board{--bsize:min(92vw,360px,calc(100dvh - 280px))}
  #bd-monster-strip{padding:6px 8px}
  #bd-monster-art{width:52px;height:52px}
}