/* お客さまの画面はスマホの大きさ。白い券に黒い太枠、番号は大きく */
.phone { max-width: 420px; margin: 0 auto; display: grid; gap: 16px; }
.now { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; background: #161412; color: #fff; border-radius: 6px; box-shadow: 4px 4px 0 #9e1b1b; }
.now span { font-size: 12.5px; }
.now b { font-size: 34px; font-weight: 900; color: #ffd27a; }
.take, .ticket-card { background: #fff; border: 2px solid #161412; box-shadow: 6px 6px 0 #161412; padding: 22px 20px; text-align: center; display: grid; gap: 10px; justify-items: center; }
.wait-now { margin: 0; font-size: 15px; }
.wait-now b { font-size: 26px; font-weight: 900; color: #9e1b1b; margin: 0 2px; }
.people { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; }
.pp { padding: 16px 0; font-size: 18px; font-weight: 900; background: #fff; border: 2px solid #161412; box-shadow: 3px 3px 0 #161412; border-radius: 4px; cursor: pointer; }
.pp:hover { background: #9e1b1b; color: #fff; }
.closed { color: var(--danger); font-weight: 700; }
.ticket-card { position: relative; border-top: 12px solid #9e1b1b; }
.ticket-card > span { font-size: 13px; color: var(--muted); }
.ticket-card > b { font-family: "Yuji Syuku", serif; font-size: 96px; line-height: 1; font-weight: 400; }
.ticket-card > small { font-size: 13px; color: var(--muted); }
.meter { width: 100%; height: 12px; border: 2px solid #161412; border-radius: 99px; overflow: hidden; }
.meter i { display: block; height: 100%; background: repeating-linear-gradient(45deg, #9e1b1b 0 8px, #c0281e 8px 16px); transition: width .5s; }
.ahead { margin: 0; font-size: 16px; }
.ahead b { font-size: 26px; font-weight: 900; color: #9e1b1b; margin: 0 2px; }
.ticket-card.called { background: #9e1b1b; color: #fff; border-color: #161412; animation: ring 1.2s ease-in-out 3; }
.ticket-card.called > span { color: #fbe1de; }
.go { font-size: 18px; font-weight: 900; margin: 0; }
@keyframes ring { 50% { transform: translateY(-4px) rotate(-1deg); } }
.rules { margin: 0; padding: 14px 18px 14px 34px; font-size: 13px; background: #fbf1ef; border-left: 6px solid #9e1b1b; }
.rules li + li { margin-top: 4px; }
.input.mini { width: 70px; padding: 5px 8px; }
.no { font-size: 20px; font-weight: 900; }
.tbl tr.called td { background: #fff7e8; }