*
{
  box-sizing:border-box
}

body
{
  margin:0;
  font-family:"Roboto",sans-serif;
  background:#0b0b0f;
  color:#f5f5f5
}

.page-wrapper
{
  max-width:900px;
  margin:0 auto;
  padding:20px
}

.header
{
  text-align:center;
  margin-bottom:20px
}

.logo
{
  font-family:"Press Start 2P",monospace;
  font-size:20px;
  color:#d72626;
  text-shadow:2px 2px 0px black
}

.subtitle
{
  font-size:14px;
  color:#f5f5f5;
  margin-top:8px
}

.card
{
  width:100%;
  max-width:500px;
  background:white;
  border:2px solid #d72626;
  margin:40px auto;
  border-radius:12px;
  padding:20px;
  box-shadow:4px 4px 0px black
}

.section-title
{
  text-align:center;
  margin-bottom:16px;
  font-size:14px;
  color:#000000
}

.section-title img.token-icon
{
  width:18px;
  height:18px;
  vertical-align:middle;
  margin-right:6px
}

.btn-group
{
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:16px
}

.btn
{
  padding:6px 12px;
  border:2px dashed #d72626;
  border-radius:8px;
  background:white;
  color:#d72626;
  cursor:pointer;
  white-space:nowrap;
  transition:background 0.2s,color 0.2s
}

.btn.active
{
  background:#d72626;
  color:white
}

.btn-main
{
  font-size:16px;
  font-weight:700;
  line-height:1.2
}

.btn-sub
{
  font-size:12px;
  opacity:0.85;
  margin-top:2px
}

.cost
{
  font-size:18px;
  font-weight:bold;
  text-align:center;
  margin:20px 0;
  color:#000000
}

.buy-btn
{
  font-family:"Press Start 2P",monospace;
  background:#d72626;
  color:white;
  border:2px solid black;
  box-shadow:3px 3px 0px black;
  padding:12px 16px;
  width:100%;
  border-radius:8px;
  cursor:pointer;
  text-transform:uppercase;
  font-size:14px
}

.buy-btn:hover
{
  background:#f83030
}

.description-block
{
  margin-top:20px;
  padding:12px;
  border-radius:8px;
  background:#f1f1f1;
  color:#222;
  font-size:14px
}

.description-block h3
{
  margin-top:0;
  margin-bottom:10px;
  font-size:14px
}

.description-block ul
{
  margin:0;
  padding-left:18px
}

.description-block li
{
  margin-bottom:6px
}

.footer
{
  text-align:center;
  margin-top:30px;
  font-size:12px;
  color:#aaa
}

.notification
{
  position:fixed;
  top:20px;
  left:50%;
  transform:translateX(-50%);
  background:#d72626;
  color:white;
  padding:12px 24px;
  border-radius:8px;
  box-shadow:0 4px 12px rgba(0,0,0,0.3);
  z-index:10000;
  font-size:14px;
  font-weight:bold;
  display:none;
  animation:slideDown 0.3s ease-out
}

.notification.show
{
  display:block
}

@keyframes slideDown
{
  from
  {
    opacity:0;
    transform:translateX(-50%) translateY(-20px)
  }

  to
  {
    opacity:1;
    transform:translateX(-50%) translateY(0)
  }

}

.thin-bar
{
  height:2px;
  background-color:#d72626;
  width:100%;
  margin:0;
  padding:0;
  position:relative;
  left:0
}

.marquee-wrapper
{
  background:#d72626;
  padding:6px 0;
  color:#fff;
  font-size:12px;
  overflow:hidden;
  width:100%
}

.marquee
{
  display:flex;
  white-space:nowrap
}

.marquee span
{
  display:inline-block;
  padding-right:4rem;
  will-change:transform;
  animation:marquee 18s linear infinite
}

@keyframes marquee
{
  0%
  {
    transform:translateX(0)
  }

  100%
  {
    transform:translateX(-100%)
  }

}

input[type="text"]
{
  width:100%;
  padding:10px;
  border-radius:8px;
  border:2px solid #d72626;
  margin-bottom:16px;
  font-size:14px
}

@media (max-width:600px)
{
  .card
  {
    margin:20px auto
  }

  .logo
  {
    font-size:16px
  }

  .subtitle
  {
    font-size:12px
  }

  .cost
  {
    font-size:16px
  }

  .buy-btn
  {
    font-size:12px
  }

  .marquee-wrapper
  {
    font-size:11px;
    padding:4px 0
  }

  .marquee span
  {
    animation:marquee 24s linear infinite
  }

}