/* Shuffleboard — ice lane look */

.sb-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.sb-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  width: 100%;
  max-width: 520px;
}

.sb-player {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-size: 14px;
}
.sb-player.on { border-color: var(--accent, #66c0f4); background: rgba(102,192,244,.08); }

.sb-score {
  min-width: 38px;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 8px;
  border: 2px solid;
}
.sb-score.p1 { border-color: #f2b035; color: #f2b035; }
.sb-score.p2 { border-color: #5ade7a; color: #5ade7a; }

.sb-pucks-left { display: flex; gap: 3px; }
.sb-pucks-left .pip {
  width: 9px; height: 9px; border-radius: 50%;
  background: currentColor; opacity: .9;
}
.sb-pucks-left .pip.used { opacity: .18; }
.sb-p1c { color: #f2b035; }
.sb-p2c { color: #5ade7a; }

.sb-round { color: var(--muted, #8a93a6); font-size: 13px; }
.sb-hint { color: var(--muted, #8a93a6); font-size: 13px; min-height: 18px; text-align: center; }

.sb-canvas-holder { position: relative; line-height: 0; }
.sb-canvas-holder canvas {
  border-radius: 12px;
  box-shadow: 0 8px 40px rgba(0, 40, 90, .45);
}

.sb-msg {
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(8, 14, 26, .85);
  border: 1px solid rgba(140, 190, 255, .35);
  border-radius: 12px;
  padding: 12px 22px;
  text-align: center;
  line-height: 1.4;
  pointer-events: none;
  white-space: nowrap;
}
.sb-msg .t { color: #eaf2ff; font-weight: 700; font-size: 16px; }
.sb-msg .s { color: #9db2d0; font-size: 13px; }

.sb-meter {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
  height: 10px;
  border-radius: 6px;
  background: rgba(10, 20, 40, .6);
  border: 1px solid rgba(140, 190, 255, .3);
  overflow: hidden;
  pointer-events: none;
}
.sb-meter .fill { height: 100%; width: 0; border-radius: 6px; }

.sb-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.sb-overlay .card {
  background: rgba(10, 18, 32, .92);
  border: 1px solid rgba(120, 180, 255, .25);
  border-radius: 14px;
  padding: 18px 26px;
  text-align: center;
  color: #e8eefc;
  pointer-events: auto;
}
.sb-overlay .card h3 { margin: 0 0 6px; font-size: 22px; }
.sb-overlay .card .sub { color: var(--muted, #8a93a6); font-size: 14px; margin-bottom: 10px; }
.sb-overlay .card .actions { display: flex; gap: 10px; justify-content: center; margin-top: 8px; }

.sb-actions { margin-top: 4px; }