:root {
  --ui-bg: #1b2838;
  --ui-panel: #2a475e;
  --card: #fff;
  --accent: #66c0f4;
}
body { margin: 0; font-family: system-ui, sans-serif; background: var(--ui-bg); color: #c7d5e0; padding: 12px; }
.bar h1 { font-size: 1.1rem; }
.hint { font-size: 11px; opacity: 0.9; }
#trick { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; min-height: 80px; }
#hand { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.card {
  width: 48px; height: 70px; background: var(--card); color: #222; border-radius: 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; cursor: pointer; border: 2px solid transparent;
}
.card.red { color: #b00; }
.card.sel { border-color: var(--accent); }
.btn { margin-top: 10px; padding: 8px 16px; border: none; border-radius: 8px; background: var(--accent); color: #1b2838; font-weight: 700; cursor: pointer; }