/* Whiteout Twenty-One — table styles */
.table{
  background:var(--drift);
  border:1px solid var(--sleet);
  border-top:4px solid var(--cyan);
  border-radius:var(--r);
  padding:clamp(18px,2.6vw,28px);
  position:relative;overflow:hidden;
}
.table::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:repeating-linear-gradient(112deg,
    rgba(169,184,196,.16) 0 1px, transparent 1px 26px);
}
.table > *{position:relative}

.meters{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:18px}
.meter{
  flex:1 1 130px;border:1px solid var(--sleet);border-radius:var(--r);
  background:var(--whiteout);padding:11px 14px;
}
.meter b{
  display:block;font-family:var(--display);text-transform:uppercase;
  letter-spacing:.17em;font-size:.7rem;color:var(--slate-mid);font-weight:600;
}
.meter span{font-family:var(--display);font-size:1.75rem;font-weight:700;line-height:1.15}
.meter--accent span{color:var(--cyan-deep)}

.seat{margin:16px 0}
.seat__head{
  display:flex;align-items:baseline;gap:10px;margin-bottom:9px;
  font-family:var(--display);text-transform:uppercase;letter-spacing:.16em;
  font-size:.82rem;font-weight:600;color:var(--slate-mid);
}
.seat__score{
  color:var(--slate);background:var(--whiteout);border:1px solid var(--sleet);
  padding:1px 9px;border-radius:2px;font-size:.95rem;
}
.hand{display:flex;flex-wrap:wrap;gap:9px;min-height:104px;align-items:flex-start}

.card{
  width:70px;height:100px;border-radius:5px;flex:none;
  background:#fff;border:1px solid var(--gale);
  box-shadow:0 6px 14px -10px rgba(27,42,58,.7);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:6px 7px;font-weight:700;font-size:1.02rem;line-height:1;
  animation:gust-in .34s cubic-bezier(.2,.9,.3,1) both;
}
.card__r{font-family:var(--display);font-size:1.3rem;letter-spacing:.02em}
.card__s{font-size:1.45rem;text-align:right;line-height:1}
.card--red{color:#B3382A}
.card--black{color:var(--slate)}
.card--down{
  background:var(--slate);
  background-image:repeating-linear-gradient(112deg,
    rgba(0,194,220,.85) 0 2px, transparent 2px 9px);
  border-color:var(--slate);
}
@keyframes gust-in{
  from{opacity:0;transform:translate(26px,-14px) rotate(7deg) scale(.9)}
  to{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){.card{animation:none}}

.betbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:6px}
.chip{
  font-family:var(--display);font-weight:700;letter-spacing:.09em;font-size:.95rem;
  padding:10px 16px;border-radius:var(--r);cursor:pointer;
  background:var(--whiteout);border:2px solid var(--gale);color:var(--slate);
}
.chip:hover:not(:disabled){border-color:var(--cyan);color:var(--cyan-deep)}
.chip.is-on{background:var(--slate);border-color:var(--slate);color:#fff}
.chip:disabled{opacity:.4;cursor:not-allowed}

.controls{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.callout{
  margin-top:18px;padding:15px 18px;border-radius:var(--r);
  border:1px solid var(--sleet);border-left:4px solid var(--gale);
  background:var(--whiteout);font-size:1rem;min-height:56px;
}
.callout b{
  font-family:var(--display);text-transform:uppercase;letter-spacing:.1em;
  display:block;font-size:1.15rem;margin-bottom:.15em;
}
.callout.is-win{border-left-color:var(--good)}
.callout.is-win b{color:var(--good)}
.callout.is-lose{border-left-color:var(--warn)}
.callout.is-lose b{color:var(--warn)}
.callout.is-push{border-left-color:var(--cyan)}
.callout.is-push b{color:var(--cyan-deep)}
.callout.is-bj{border-left-color:var(--cyan);background:#EAFAFC}
.callout.is-bj b{color:var(--cyan-deep)}

.ruleslist{list-style:none;margin:0;padding:0}
.ruleslist li{
  padding:11px 0;border-bottom:1px solid var(--sleet);
  display:flex;gap:14px;align-items:baseline;
}
.ruleslist li:last-child{border-bottom:0}
.ruleslist b{
  flex:none;min-width:92px;font-family:var(--display);text-transform:uppercase;
  letter-spacing:.1em;font-size:.8rem;color:var(--cyan-deep);
}