/* 打刻画面（店のタブレット）。名前のボタンは大きく、押し間違えにくく */
body.punch { background: #f4f1ec; min-height: 100vh; }
.p-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; background: var(--admin-accent); color: #fff; }
.p-shop { font-size: 20px; font-weight: 700; white-space: nowrap; }
.p-clock { font-size: 20px; font-weight: 700; text-align: right; }
.p-main { display: flex; flex-direction: column; align-items: center; min-height: calc(100vh - 56px); padding: 14px 20px 20px; }
.p-hint { flex: none; margin: 0 0 14px; font-size: var(--fs-lg); color: var(--ink-2); text-align: center; }
.p-grid { display: flex; flex-direction: column; gap: 18px; width: 100%; flex: 1; }
/* 1段の人数（--n）で横幅を等分する。段は途中で折れない */
.p-row { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 16px; }
.p-row + .p-row { padding-top: 18px; border-top: 2px dashed #d8d0c5; }
.p-name { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; min-height: 104px; padding: 12px 8px; border: 3px solid #cfc8bf; border-radius: 18px; background: #fff; text-align: center; }
.p-name .nick { font-size: clamp(28px, 2.4vw + 1.6vh, 60px); font-weight: 700; line-height: 1.2; white-space: nowrap; }
.p-name .full { font-size: clamp(14px, 0.8vw + 0.8vh, 22px); color: var(--ink-2); white-space: nowrap; }
.p-name .state { font-size: clamp(16px, 0.9vw + 0.9vh, 24px); font-weight: 700; color: var(--ink-2); }
.p-name .state:empty { display: none; }
.p-name.working { border-color: var(--ok); background: var(--ok-soft); }
.p-name.working .state { color: var(--ok); }
.p-name:active { transform: scale(.98); }

/* タブレット・PC：画面の高さいっぱいに広げる（段の中のボタンが縦にも伸びる） */
@media (min-width: 600px) and (min-height: 480px) {
  .p-main { height: calc(100vh - 56px); min-height: 0; }
  .p-grid { min-height: 0; }
  .p-row { flex: 1 1 0; min-height: 0; }
  .p-name { min-height: 0; height: 100%; }
}
.p-error { margin-top: 16px; padding: 12px 16px; border-radius: 8px; background: var(--danger-soft); }
.p-unregistered { max-width: 640px; margin: 40px auto; padding: 24px; background: #fff; border-radius: 12px; font-size: var(--fs-lg); }

/* 確認：名前をいちばん大きく */
.p-dialog, .p-done { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0,0,0,.55); }
.p-dialog[hidden], .p-done[hidden] { display: none; }
.p-dialog-box, .p-done-box { width: 100%; max-width: 640px; padding: 32px 24px 24px; border-radius: 18px; background: #fff; text-align: center; }
.p-d-name { font-size: 56px; font-weight: 700; line-height: 1.2; word-break: keep-all; overflow-wrap: anywhere; }
.p-d-full { margin-top: 6px; font-size: 24px; font-weight: 700; color: var(--ink-2); }
.p-d-question { margin: 20px 0; font-size: 26px; }
.p-d-go { display: block; width: 100%; min-height: 88px; border: 0; border-radius: 14px; font-size: 32px; font-weight: 700; color: #fff; background: var(--ok); }
.p-d-go.out { background: var(--accent); }
.p-d-go:disabled { opacity: .6; }
.p-d-back { display: block; width: 100%; min-height: 64px; margin-top: 14px; border: 2px solid #999; border-radius: 14px; background: #fff; font-size: 22px; font-weight: 700; }
.p-done-name { font-size: 48px; font-weight: 700; line-height: 1.2; }
.p-done-thanks { margin-top: 16px; font-size: 40px; font-weight: 700; color: var(--ok); }
.p-done-thanks.out { color: var(--accent); }
.p-done-msg { margin-top: 12px; font-size: 28px; font-weight: 700; color: var(--ink-2); }

@media (max-width: 480px) {
  .p-row { grid-template-columns: 1fr; }
  .p-top { flex-wrap: wrap; gap: 2px 12px; }
  .p-shop, .p-clock { font-size: 18px; }
  .p-d-name { font-size: 40px; }
  .p-d-full { font-size: 20px; }
  .p-d-question { font-size: 22px; }
  .p-d-go { font-size: 28px; }
  .p-done-name { font-size: 36px; }
  .p-done-msg { font-size: 26px; }
  .p-done-thanks { font-size: 28px; }
}