.wild-layout{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:20px;
}

.card{
  background:var(--dark-gray);
  border:1px solid var(--light-gray);
  border-radius:16px;
  padding:24px;
}

.card h3{
  font-family:'Fredoka',sans-serif;
  color:var(--gold);
  font-size:1.4em;
  margin-bottom:16px;
}

.result-display{
  background:#1b1b1b;
  border:1px solid var(--light-gray);
  border-radius:12px;
  padding:20px;
  text-align:center;
  min-height:140px;
}

.result-display .roll{
  font-size:2.6em;
  font-family:'Fredoka',sans-serif;
  color:var(--gold);
}

.table-card{
  display:flex;
  flex-direction:column;
}

.table-wrapper{
  margin-top:12px;
  max-height:420px;
  overflow:auto;
  border:1px solid var(--light-gray);
  border-radius:12px;
}

#surgeTable{
  width:100%;
  border-collapse:collapse;
}

#surgeTable th,#surgeTable td{
  padding:10px;
  border-bottom:1px solid var(--light-gray);
}

#surgeTable tbody tr:nth-child(even){background:#1a1a1a;}

.history{
  margin-top:28px;
  border:1px solid var(--light-gray);
  border-radius:16px;
  padding:24px;
  background:var(--dark-gray);
}

.history-list{
  margin-top:16px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.history-entry{
  border:1px solid var(--light-gray);
  border-radius:12px;
  padding:12px;
  background:#1b1b1b;
}

.history-entry h4{
  margin-bottom:6px;
  color:var(--gold);
}

.history-entry p{margin:0;}

@media(max-width:560px){
  .button-row{flex-direction:column}
}