/* Bean Wars - small custom polish on top of Tailwind */
:root{
  --bw-bg0:#020617;
  --bw-bg1:#0b1220;
  --bw-card: rgba(15, 23, 42, 0.72);
  --bw-stroke: rgba(148, 163, 184, 0.18);
  --bw-glow: rgba(56, 189, 248, 0.18);
}

*{ box-sizing:border-box; }

::selection{ background: rgba(56,189,248,.25); }

.bw-noise{
  background-image:
    radial-gradient(1200px 600px at 20% 0%, rgba(56,189,248,.14), transparent 60%),
    radial-gradient(900px 500px at 90% 10%, rgba(168,85,247,.12), transparent 55%),
    radial-gradient(800px 500px at 50% 100%, rgba(34,197,94,.10), transparent 55%),
    linear-gradient(180deg, rgba(2,6,23,1), rgba(2,6,23,1));
}

.bw-card{
  background: var(--bw-card);
  border: 1px solid var(--bw-stroke);
  backdrop-filter: blur(10px);
}

.bw-focus:focus-visible{
  outline: 2px solid rgba(56,189,248,.8);
  outline-offset: 2px;
}

.bw-scroll{
  scrollbar-width: thin;
  scrollbar-color: rgba(148,163,184,.35) transparent;
}
.bw-scroll::-webkit-scrollbar{ height: 10px; width: 10px; }
.bw-scroll::-webkit-scrollbar-thumb{ background: rgba(148,163,184,.25); border-radius: 999px; }
.bw-scroll::-webkit-scrollbar-track{ background: transparent; }

@keyframes bw-float{
  0%{ transform: translateY(0px); }
  50%{ transform: translateY(-2px); }
  100%{ transform: translateY(0px); }
}

@keyframes bw-pulse{
  0%{ box-shadow: 0 0 0 0 rgba(56,189,248,.25); }
  70%{ box-shadow: 0 0 0 10px rgba(56,189,248,0); }
  100%{ box-shadow: 0 0 0 0 rgba(56,189,248,0); }
}

.bw-float{ animation: bw-float 2.8s ease-in-out infinite; }

.bw-selected{
  animation: bw-pulse 1.6s ease-out infinite;
}

.bw-map-grid{
  background-image:
    linear-gradient(to right, rgba(148,163,184,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(148,163,184,.07) 1px, transparent 1px);
  background-size: 28px 28px;
}

.bw-badge{
  border: 1px solid rgba(148,163,184,.22);
  background: rgba(2,6,23,.35);
}

.bw-btn{
  border: 1px solid rgba(148,163,184,.22);
  background: rgba(15,23,42,.55);
}
.bw-btn:hover{ background: rgba(15,23,42,.75); }
.bw-btn:active{ transform: translateY(1px); }

.bw-btn-primary{
  border: 1px solid rgba(56,189,248,.35);
  background: linear-gradient(180deg, rgba(56,189,248,.22), rgba(56,189,248,.10));
}
.bw-btn-primary:hover{ background: linear-gradient(180deg, rgba(56,189,248,.28), rgba(56,189,248,.12)); }

.bw-btn-danger{
  border: 1px solid rgba(244,63,94,.35);
  background: linear-gradient(180deg, rgba(244,63,94,.18), rgba(244,63,94,.08));
}
.bw-btn-danger:hover{ background: linear-gradient(180deg, rgba(244,63,94,.24), rgba(244,63,94,.10)); }