/* Breppe UX clarity v1 */
.breppe-how {
  max-width: 960px;
  margin: 0 auto 1.5rem;
  padding: 1.25rem 1.25rem 1.35rem;
  border-radius: 16px;
  border: 1px solid rgba(34,197,94,.35);
  background: linear-gradient(145deg, rgba(12,20,16,.95), rgba(8,12,14,.98));
  box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 12px 40px rgba(0,0,0,.35);
}
.breppe-how h2 {
  margin: 0 0 .35rem;
  font-size: 1.15rem;
  color: #7cff4a;
  letter-spacing: .02em;
}
.breppe-how .sub {
  margin: 0 0 1rem;
  color: #94a3b8;
  font-size: .9rem;
  line-height: 1.45;
}
.breppe-how-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 800px) {
  .breppe-how-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .breppe-how-steps { grid-template-columns: 1fr; }
}
.breppe-how-steps li {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: .85rem .9rem;
  color: #e2e8f0;
  font-size: .88rem;
  line-height: 1.4;
}
.breppe-how-steps li strong {
  display: block;
  color: #7cff4a;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .35rem;
}
.breppe-how-steps a {
  color: #86efac;
  font-weight: 600;
  text-decoration: none;
}
.breppe-how-steps a:hover { text-decoration: underline; }
.breppe-note {
  margin: 1rem 0 0;
  padding: .75rem .9rem;
  border-radius: 10px;
  background: rgba(234,179,8,.08);
  border: 1px solid rgba(234,179,8,.25);
  color: #fde68a;
  font-size: .85rem;
  line-height: 1.45;
}
.breppe-note strong { color: #fbbf24; }

/* Header wallet chip */
.nav-wallet {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(34,197,94,.45);
  background: rgba(34,197,94,.12);
  color: #bbf7d0;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
}
.nav-wallet:hover { background: rgba(34,197,94,.22); color: #fff; }
.nav-wallet.connected {
  border-color: rgba(34,197,94,.7);
  background: rgba(34,197,94,.2);
  color: #7cff4a;
}
.nav-wallet .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #64748b;
}
.nav-wallet.connected .dot { background: #22c55e; box-shadow: 0 0 6px #22c55e; }
@media (max-width: 900px) {
  .nav-wallet { font-size: .72rem; padding: 5px 10px; }
}

/* Raid steps */
.raid-steps {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin: 0 0 1rem; padding: 0; list-style: none;
}
.raid-steps li {
  flex: 1; min-width: 140px;
  background: rgba(34,197,94,.08);
  border: 1px solid rgba(34,197,94,.25);
  border-radius: 10px;
  padding: .65rem .75rem;
  font-size: .82rem;
  color: #cbd5e1;
}
.raid-steps li b { color: #7cff4a; display: block; margin-bottom: 2px; }


/* hide leftover info chips */
.breppe-i, .breppe-tip, [data-help], button.breppe-i { display: none !important; }

/* slimmer, cleaner pages */
html { background: #07070f; }
body {
  color: #e8e8f0;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: #7cff4a; }
h1, h2 { letter-spacing: -0.02em; }
.wrap, .container, main, .page, .content, #app, .site-main {
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}
.wrap > h1, .container > h1, main > h1,
.wrap > h2, .container > h2, main > h2,
.section-title, .page-title {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}
.games-grid, .grid, .grid2, .cards, .shop-grid {
  margin-left: auto;
  margin-right: auto;
}
body.has-breppe-nav .wrap,
body.has-breppe-nav .container {
  width: 100%;
}
.card, .game-card {
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
}
.btn, .play-btn, button.btn {
  border-radius: 999px;
  font-weight: 800;
}
.msg { color: #94a3b8; line-height: 1.5; }
input, select, textarea {
  border-radius: 10px;
}
@media (max-width: 720px) {
  h1 { font-size: 1.25rem !important; }
  .grid, .grid2 { grid-template-columns: 1fr !important; }
}


/* site-wide motion v4 */
@keyframes breppeGlow{
  0%,100%{box-shadow:0 0 0 1px rgba(124,255,74,.1),0 12px 32px rgba(0,0,0,.28)}
  50%{box-shadow:0 0 0 2px rgba(124,255,74,.26),0 16px 40px rgba(124,255,74,.1)}
}
@keyframes breppeTitle{
  0%,100%{filter:drop-shadow(0 0 0 transparent)}
  50%{filter:drop-shadow(0 0 8px rgba(124,255,74,.45))}
}
@keyframes breppeFade{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}
@keyframes breppePulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.04)}
}
@keyframes breppeSpin{to{transform:rotate(360deg)}}
@keyframes breppeShine{
  0%{background-position:0% 50%}
  100%{background-position:100% 50%}
}

.game-card, .card, .shop-card, #wrap, .lb-box {
  animation: breppeGlow 3.2s ease-in-out infinite;
}
h1, .logo-text, .page-title {
  animation: breppeTitle 3s ease-in-out infinite;
}
.wrap, main, .container, .games-grid {
  animation: breppeFade .4s ease both;
}
.play-btn {
  animation: breppePulse 1.8s ease-in-out infinite;
}
.btn, .play-btn, .nav-cta, button.btn {
  transition: transform .15s ease, filter .15s ease;
}
.btn:hover, .play-btn:hover, .nav-cta:hover, button.btn:hover {
  filter: brightness(1.08);
}
.loader, .spinner {
  width: 28px; height: 28px;
  border: 3px solid #2a2a45;
  border-top-color: #7cff4a;
  border-radius: 50%;
  animation: breppeSpin .7s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
}

/* page size cap — keep previews modest */
.canvas-wrap, .preview, .pfp-preview, #preview {
  max-width: 280px;
  max-height: 280px;
  margin-left: auto;
  margin-right: auto;
}
.wrap, .container, main {
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}

/* breppe-green-btns — kill yellow CTAs */
.btn, .play-btn, button.btn, .nav-cta, .btn-g,
.btn[class*="gold"], .btn-gold {
  background: #7cff4a !important;
  color: #000 !important;
  border-color: #7cff4a !important;
}
.btn-m { background: #1e293b !important; color: #e8e8f0 !important; }

/* share-x-visible — game over overlays */
#wrap { max-height: none; }
#wrap .overlay, .overlay {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  max-height: 100%;
  box-sizing: border-box;
}
.btn-share, #share-x-btn, #btnShare, button.share, a.btn-share {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: #1d9bf0 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  padding: 12px 18px !important;
  margin-top: 8px !important;
  text-decoration: none !important;
}
.overlay .btn, .overlay button.btn {
  background: #7cff4a !important;
  color: #000 !important;
  border-radius: 999px !important;
}