:root{
    --gap:12px;
    --card-radius:14px;
    --card-pad:12px;
    --btn-size:40px;
    --font:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  }
  
  *{ box-sizing:border-box; }
  html,body{
    height:100%;
    margin:0;
/* Stack header above board, centered */
body {
  margin: 0;
  background: #0f1115;
  color: #e8eaed;
  font-family: var(--font);
  min-height: 100dvh;

  display: flex;            /* flex, not grid */
  flex-direction: column;   /* <-- vertical stack */
  align-items: center;      /* center children horizontally */
  padding: var(--gap);
}
  
/* Header spans full width and centers its contents */
.logo-header {
  width: 100%;
  text-align: center;
  margin-bottom: 8px;       /* tighten space under header */
}

.logo {
  width: 300px;
  max-width: 90%;
}

.discord-btn-wrap {
  margin-top: 10px;
  text-align: center;
}

.discord-btn {
  display: inline-block;
  background-color: #5865F2; /* Discord blurple */
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 16px;
  transition: background-color 0.2s ease;
}

.discord-btn:hover {
  background-color: #4752c4; /* darker hover */
}


/* Board also spans full width but keeps its own max */
.board {
  width: 100%;
  max-width: 1400px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  /* remove any margins you previously added here */
}
  
  .card{
    flex:1 1 calc(33.333% - var(--gap));
    min-width:260px;
    background:#1a1f2b;
    border-radius:var(--card-radius);
    padding:var(--card-pad);
    display:grid;
    grid-template-rows:auto 1fr auto;
    gap:10px;
    box-shadow:0 6px 20px rgba(0,0,0,.25);
    outline:1px solid rgba(255,255,255,.06);
    transition:transform .08s ease;
  }
  .card:active{ transform:scale(.995); }
  
  .row{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
  }
  
  .name{
    flex:1 1 auto;
    min-width:120px;
    padding:8px 10px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.06);
    color:inherit;
    font-weight:600;
    outline:none;
  }
  .name::placeholder{ color:#b9c0cf; }
  
  .color{
    width:44px;
    height:36px;
    padding:0;
    border:none;
    border-radius:8px;
    background:transparent;
    overflow:hidden;
    cursor:pointer;
  }
  
  .total-wrap{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:10px;
  }
  
  .btn{
    width:var(--btn-size);
    height:var(--btn-size);
    border-radius:12px;
    border:1px solid rgba(255,255,255,.15);
    background:rgba(255,255,255,.06);
    color:inherit;
    font-size:22px;
    font-weight:700;
    cursor:pointer;
    user-select:none;
    line-height:1;
  }
  .btn:active{ transform:scale(.97); }
  
  .total{
    text-align:center;
    font-size:40px;
    font-weight:800;
    width:100%;
    max-width:180px;
    margin:0 auto;
    padding:8px 10px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.15);
    background:rgba(0,0,0,.2);
    color:inherit;
    appearance:textfield;
  }
  
/* Remove number input spinners consistently */
input.total::-webkit-outer-spin-button,
input.total::-webkit-inner-spin-button {
  -webkit-appearance: none; /* Chrome, Safari, Edge */
  appearance: none;         /* Standard */
  margin: 0;
}

input.total[type=number] {
  -moz-appearance: textfield; /* Firefox */
  appearance: textfield;      /* Standard */
}
  
  .footer{
    display:flex;
    justify-content:space-between;
    gap:10px;
    flex-wrap:wrap;
    opacity:.9;
    font-size:12px;
  }
  
  @media (max-width:900px){
    .card{ flex:1 1 calc(50% - var(--gap)); }
    .total{ font-size:36px; }
  }
  @media (max-width:580px){
    .card{ flex:1 1 100%; }
    .total{ font-size:34px; }
  }