/* Brasta Private Match — branded unranked play surface.
   Visual-only layer: no room or matchmaking behavior changes. */
.online-card{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border:1px solid #d4af378f!important;
  border-radius:22px!important;
  background:
    radial-gradient(circle at 92% 8%,#d4af3711 0 9%,transparent 31%),
    radial-gradient(circle at -5% 105%,#2f7a551b 0 24%,transparent 48%),
    linear-gradient(145deg,#0b2b20 0%,#071d16 58%,#0d251a 100%)!important;
  box-shadow:
    0 20px 46px #0005,
    inset 0 1px 0 #fff2,
    inset 0 0 0 1px #d4af370e!important;
}

.online-card::before{
  content:"♠  ♦  ♣  ♥";
  position:absolute;
  right:18px;
  bottom:16px;
  z-index:0;
  color:#d4af3707;
  font-family:Georgia,"Times New Roman",serif;
  font-size:56px;
  line-height:1;
  letter-spacing:.04em;
  white-space:nowrap;
  pointer-events:none;
}

.online-card > *{
  position:relative;
  z-index:1;
}

.online-card > h2{
  margin-bottom:7px!important;
  font-family:Georgia,"Times New Roman",serif;
  font-weight:700;
  letter-spacing:.015em;
  color:#f5f1e6;
  text-shadow:0 2px 10px #0008;
}

.online-card > h2::after{
  color:#f5f1e6;
  font-family:Georgia,"Times New Roman",serif;
  font-size:28px!important;
  font-weight:700;
  letter-spacing:.015em;
}

.online-card > p{
  max-width:660px;
  color:#c5d0ca!important;
  line-height:1.5;
}

.online-card label{
  margin-top:14px;
  color:#b9a15f!important;
  font-size:10px!important;
  font-weight:850;
  letter-spacing:.11em;
  text-transform:uppercase;
}

.online-card input,
.online-card select{
  min-height:44px;
  border:1px solid #d4af3733!important;
  border-radius:10px!important;
  background:linear-gradient(180deg,#031711dd,#04130fee)!important;
  color:#f5f1e6!important;
  box-shadow:inset 0 1px 0 #ffffff09;
  transition:border-color .14s ease,box-shadow .14s ease,background .14s ease;
}

.online-card input:hover,
.online-card select:hover{
  border-color:#d4af375c!important;
  background:#061b14!important;
}

.online-card input:focus,
.online-card select:focus{
  border-color:#d4af37b8!important;
  box-shadow:0 0 0 3px #d4af3718,inset 0 1px 0 #ffffff0d!important;
}

.online-card input::placeholder{
  color:#71867b;
}

.online-card .button-row{
  gap:9px;
  margin-top:5px;
}

.online-card .button-row button{
  min-height:42px;
  padding:10px 16px!important;
  border:1px solid #d4af3740!important;
  border-radius:10px!important;
  background:#0d2c21c7!important;
  color:#f3ead0!important;
  font-weight:800;
  box-shadow:inset 0 1px 0 #ffffff0d;
  transition:transform .12s ease,background .12s ease,border-color .12s ease,box-shadow .12s ease;
}

.online-card .button-row button:hover{
  transform:translateY(-1px);
  border-color:#d4af3785!important;
  background:#17392c!important;
}

.online-card .button-row button.primary{
  border-color:#f3da7e!important;
  background:linear-gradient(180deg,#efd475,#d2aa45)!important;
  color:#241b07!important;
  box-shadow:0 7px 17px #0004,inset 0 1px 0 #fff8!important;
}

.online-card .button-row button.primary:hover{
  background:linear-gradient(180deg,#f5dc82,#d9b34d)!important;
  box-shadow:0 9px 21px #0005,inset 0 1px 0 #fff9!important;
}

.online-card .divider{
  margin:20px 0 11px;
  color:#b59c59;
  font-size:9px;
  font-weight:800;
  letter-spacing:.17em;
}

.online-card .divider::before,
.online-card .divider::after{
  background:linear-gradient(90deg,transparent,#d4af3738)!important;
}

.online-card .divider::after{
  background:linear-gradient(90deg,#d4af3738,transparent)!important;
}

.online-card .server-note{
  margin-top:15px;
  padding-top:12px;
  border-top:1px solid #d4af371c;
  color:#82988d;
  font-size:10px;
  line-height:1.5;
}

@media(max-width:800px){
  .online-card{
    border-radius:18px!important;
  }

  .online-card::before{
    right:-30px;
    bottom:22px;
    font-size:42px;
  }

  .online-card > h2::after{
    font-size:25px!important;
  }

  .online-card .button-row{
    display:grid;
    grid-template-columns:1fr;
  }

  .online-card .button-row button{
    width:100%;
  }
}