/* Reaction board — base.css covers type, buttons and cards; this only adds the pad and the board. */

main { max-width: 620px; }
.lede { color: var(--soft); margin-bottom: 20px; }


.pad {
  height: 210px;
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  transition: background .06s linear;
  box-shadow: var(--shadow);
}
.padText { font-size: 25px; font-weight: 800; letter-spacing: .02em }
.padSub { font-size: 13px; margin-top: 8px; opacity: .75 }

.pad.idle { background: #e7ddd0; color: #4a423b }
.pad.wait { background: #c96a4e; color: #fff }   
.pad.go   { background: #3ea06b; color: #fff }   
.pad.bad  { background: #8a8177; color: #fff }
.pad.done { background: #2c2622; color: #f6f1ea }

.stats { display: flex; gap: 22px; margin: 16px 2px; font-size: 14px; color: var(--soft) }
.stats b { color: var(--ink); font-variant-numeric: tabular-nums; margin-left: 4px }

.nameRow { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center }
.nameRow label { grid-column: 1 / -1; font-size: 13px; color: var(--soft) }

.sec { font-size: 17px; margin: 28px 0 10px }
.sec .muted { font-size: 13px; font-weight: 400 }

.board { list-style: none; padding: 0; margin: 0 }
.board li {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}
.board li:last-child { border-bottom: none }
.board li.mine { background: rgba(201, 138, 94, .1); border-radius: 8px }
.board li.mine .nm::after { content: " · you"; color: var(--accent); font-size: 12px }
.board .rk { text-align: center; color: var(--soft) }
.board .ms { font-variant-numeric: tabular-nums; font-weight: 600 }
.board .empty { display: block; color: var(--soft); font-size: 14px; padding: 14px 2px; border: none }

.note { font-size: 13px; margin-top: 20px }