.buraco-area{
  min-height:620px;
  padding-bottom:130px;
}

.buraco-table{
  min-height:570px;
  display:grid;
  grid-template-rows:auto 1fr auto;
  gap:12px;
  padding:14px;
}

.buraco-row,
.buraco-center,
.buraco-melds{
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  padding:12px;
  background:rgba(0,0,0,.14);
}

.buraco-row h2,
.buraco-center h2,
.buraco-melds h3{
  color:#ffe08a;
  margin-bottom:8px;
}

.buraco-players{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:10px;
}

.buraco-hand,
.buraco-meld-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  min-height:90px;
  align-items:flex-start;
}

.buraco-center{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:14px;
  align-items:start;
}

.buraco-piles{
  display:flex;
  gap:14px;
  justify-content:center;
  align-items:flex-start;
}

.buraco-pile{
  text-align:center;
}

.buraco-card{
  width:74px;
  height:108px;
  border-radius:10px;
  background:white;
  color:#111;
  position:relative;
  padding:5px;
  box-shadow:0 5px 12px rgba(0,0,0,.35);
  cursor:pointer;
  flex-shrink:0;
}

.buraco-card.red{color:#c11}
.buraco-card.black{color:#111}

.buraco-card.selected{
  outline:4px solid #ffe08a;
  transform:translateY(-10px);
}

.buraco-card.back{
  background:linear-gradient(135deg,#0057d8,#0d6efd);
  border:2px solid rgba(255,255,255,.35);
}

.buraco-card .rank{
  font-size:14px;
  font-weight:bold;
}

.buraco-card .suit{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  font-size:28px;
}

.buraco-card .bottom{
  position:absolute;
  right:5px;
  bottom:5px;
  transform:rotate(180deg);
}

.buraco-meld{
  display:flex;
  gap:4px;
  padding:6px;
  border-radius:12px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.1);
  cursor:pointer;
}

.buraco-meld.canasta{
  box-shadow:0 0 18px rgba(255,224,138,.6);
  border-color:#ffe08a;
}

.buraco-mini-card{
  width:40px;
  height:58px;
  border-radius:7px;
  background:white;
  color:#111;
  padding:3px;
  font-size:12px;
  font-weight:bold;
  display:flex;
  align-items:center;
  justify-content:center;
}

.buraco-mini-card.red{color:#c11}

.buraco-mode-panel{
  max-width:760px;
  margin:30px auto;
  padding:24px;
  border-radius:22px;
  background:linear-gradient(145deg,rgba(3,20,12,.88),rgba(12,90,53,.86));
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 15px 35px rgba(0,0,0,.45);
}

.buraco-mode-panel h2{
  color:#ffe08a;
  margin-bottom:12px;
}

.buraco-mode-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  margin-top:14px;
}

.buraco-mode-btn{
  border:none;
  border-radius:16px;
  padding:16px;
  background:#198754;
  color:white;
  font-weight:bold;
  cursor:pointer;
  text-align:left;
}

.buraco-mode-btn small{
  display:block;
  opacity:.8;
  margin-top:6px;
}

.buraco-hud{
  width:330px;
}

@media(max-height:500px){
  .buraco-table{
    min-height:410px;
    padding:8px;
    gap:7px;
  }

  .buraco-row,
  .buraco-center,
  .buraco-melds{
    padding:7px;
  }

  .buraco-card{
    width:48px;
    height:70px;
    border-radius:7px;
  }

  .buraco-card .rank{
    font-size:10px;
  }

  .buraco-card .suit{
    font-size:18px;
  }

  .buraco-mini-card{
    width:28px;
    height:40px;
    font-size:9px;
  }

  .buraco-hand,
  .buraco-meld-list{
    gap:5px;
    min-height:55px;
  }

  .buraco-mode-grid{
    grid-template-columns:1fr;
  }

  .buraco-hud{
    width:250px;
  }
}