/* 金銭感覚 — 昭和のおもちゃのレジ。
   黄(本体) / 赤(合計・引き出し) / 青(消す) / クリーム(背景・水玉) / 液晶の灰緑。線は真っ黒でなく焦げた赤茶。 */
:root {
  --yel: #F6C943;
  --red: #EE5846;
  --blue: #4D8FD8;
  --cream: #FFF4DE;
  --dot: #F7DFB4;
  --white: #FFFDF6;
  --lcd: #B9C49A;
  --lcd-ink: #2E3525;
  --ink: #3A2626;
  --muted: #8A7462;
  --hl: #FCE38A;

  --ib-bg: var(--cream);
  --ib-bg-image: radial-gradient(circle, var(--dot) 3px, transparent 3.5px);
  --ib-bg-size: 22px 22px;
  --ib-ink: var(--ink);
  --ib-paper: var(--white);
  --ib-light: var(--white);
  --ib-primary: var(--red);
  --ib-primary-ink: var(--white);
  --ib-text: var(--ink);
  --ib-muted: var(--muted);
  --ib-accent: var(--red);
  --ib-btn-r: 999px;

  --key: clamp(40px, 7.4dvh, 56px);
}
.dot { font-family: "DotGothic16", monospace; font-weight: 400; }

/* ===== タイトル ===== */
#screen-title { padding: 0 24px; }
.back { align-self: flex-start; margin: 12px 0 0 -6px; padding: 6px; color: var(--ink); font-size: 13px; text-decoration: none; }
.title-top { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 0; }
.title-reg { position: relative; width: 170px; margin-top: 30px; }
.title-receipt { position: absolute; left: 50%; top: -34px; margin-left: -26px; width: 52px; height: 58px; background: #fff; border: 2.5px solid var(--ink); border-bottom: 0; padding: 8px 7px; display: flex; flex-direction: column; gap: 6px; transform: rotate(-4deg); animation: tr-print 2.4s ease-in-out infinite alternate; }
.title-receipt i { height: 3px; background: var(--ink); }
.title-receipt i:nth-child(2) { width: 70%; } .title-receipt i:nth-child(4) { width: 55%; }
@keyframes tr-print { from { transform: translateY(8px) rotate(-4deg); } to { transform: translateY(-4px) rotate(-4deg); } }
.title-reg-body { position: relative; background: var(--yel); border: 3px solid var(--ink); border-radius: 26px 26px 12px 12px; padding: 12px 14px 14px; box-shadow: 0 5px 0 var(--ink); }
.title-lcd { background: var(--lcd); border: 2.5px solid var(--ink); border-radius: 6px; font-family: "DotGothic16", monospace; font-size: 26px; text-align: right; padding: 0 8px; color: var(--lcd-ink); line-height: 1.3; }
.title-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-top: 10px; }
.title-keys i { aspect-ratio: 1; border-radius: 50%; background: var(--white); border: 2.5px solid var(--ink); }
.title-keys i.r { background: var(--red); }
.title-drawer { margin: 0 12px; height: 18px; background: var(--red); border: 3px solid var(--ink); border-top: 0; border-radius: 0 0 10px 10px; display: flex; align-items: center; justify-content: center; }
.title-drawer span { width: 34px; height: 5px; border-radius: 3px; background: var(--ink); }
.logo { font-size: 44px; font-weight: 900; letter-spacing: .12em; margin-right: -.12em; margin-top: 12px; line-height: 1.1; }
.catch { font-size: 16px; }
.title-bottom { display: flex; flex-direction: column; gap: 12px; padding: 16px 0 22px; }
.title-meta { text-align: center; font-size: 12px; color: var(--muted); margin-top: -6px; }

/* ===== 共通: 上の帯 ===== */
.bar { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; background: var(--ink); color: var(--white); }
.bar-q { font-size: 13px; }
.bar-q b { background: var(--yel); color: var(--ink); border-radius: 999px; padding: 1px 9px; margin-left: 4px; }
.bar-timer { font-family: "DotGothic16", monospace; font-size: 22px; line-height: 1; color: var(--hl); min-width: 70px; text-align: center; }
.bar-timer small { font-family: "Zen Maru Gothic", sans-serif; font-weight: 700; font-size: 11px; margin-right: 4px; color: var(--white); }
.bar-timer.hurry { color: var(--red); }
.bar-pause { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--white); background: none; color: var(--white); font-size: 12px; font-weight: 900; letter-spacing: -1px; }

/* ===== 値段を打つ ===== */
.play { flex: 1; display: flex; flex-direction: column; padding: 12px 14px 14px; gap: 10px; }
.odai { background: var(--white); border: 3px solid var(--ink); border-radius: 14px; padding: 6px 10px 9px; text-align: center; }
.odai-lb { display: inline-block; font-size: 10px; background: var(--blue); color: var(--white); border-radius: 999px; padding: 0 10px; letter-spacing: .2em; }
.odai-txt { font-size: clamp(18px, 5.4vw, 22px); font-weight: 900; margin-top: 2px; line-height: 1.35; text-wrap: balance; }
.odai-note { font-size: 12px; color: var(--muted); }
.odai-note:empty { display: none; }
.notice { font-size: 12px; text-align: center; background: var(--hl); border: 2px solid var(--ink); border-radius: 8px; padding: 4px 8px; }
.reg { background: var(--yel); border: 3px solid var(--ink); border-radius: 26px 26px 14px 14px; padding: 12px 12px 14px; box-shadow: 0 5px 0 var(--ink); }
.lcd { background: var(--lcd); border: 3px solid var(--ink); border-radius: 10px; padding: 2px 12px 4px; color: var(--lcd-ink); display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; }
.lcd-lb { font-size: 11px; padding-bottom: 6px; }
.lcd-val { font-family: "DotGothic16", monospace; font-size: clamp(30px, 5.4dvh, 40px); line-height: 1.1; white-space: nowrap; }
.keys { display: grid; grid-template-columns: repeat(3, var(--key)) calc(var(--key) + 8px); gap: 8px 12px; justify-content: center; margin-top: 12px; }
.keys button { height: var(--key); border-radius: 50%; background: var(--white); border: 2.5px solid var(--ink); font-family: "DotGothic16", monospace; font-size: 21px; box-shadow: 0 3px 0 var(--ink); transition: transform .05s, box-shadow .05s; }
.keys button:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 0 0 var(--ink); }
.keys button:disabled { opacity: .5; cursor: default; }
.keys .k-s { font-size: 15px; }
.keys .k-del { background: var(--blue); color: var(--white); font-family: "Zen Maru Gothic", sans-serif; font-weight: 900; font-size: 12px; }
.keys .k-ok { grid-column: 4; grid-row: 2 / span 3; height: auto; border-radius: 999px; background: var(--red); color: var(--white); font-family: "Zen Maru Gothic", sans-serif; font-weight: 900; font-size: 16px; writing-mode: vertical-rl; letter-spacing: .4em; }
.keys .k-ok:disabled { opacity: 1; background: #D9C9AE; color: var(--muted); }
.reg.done .keys .k-ok { background: var(--ink); color: var(--hl); letter-spacing: .2em; }
.drawer { margin: -10px 22px 0; height: 24px; background: var(--red); border: 3px solid var(--ink); border-top: 0; border-radius: 0 0 12px 12px; display: flex; align-items: center; justify-content: center; }
.drawer span { width: 50px; height: 7px; border-radius: 4px; background: var(--ink); }
.who { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; font-size: 12px; }
.who .lb { width: 100%; text-align: center; color: var(--muted); font-size: 11px; }
.who span.p { padding: 2px 10px; border: 2px solid var(--ink); border-radius: 999px; background: var(--white); max-width: 8em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who span.p.on { background: var(--ink); color: var(--white); }

/* ===== レシート ===== */
.rv-body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px 10px; }
.slot { margin: 0 6px; height: 30px; background: var(--yel); border: 3px solid var(--ink); border-bottom: 0; border-radius: 22px 22px 0 0; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 7px; position: relative; z-index: 1; }
.slot span { width: 80%; height: 9px; border-radius: 5px; background: var(--ink); }
/* 紙は差し込み口の裏から下へ送り出される(feed の外は見えない) */
.feed { position: relative; margin: -6px 22px 0; overflow: hidden; }
.receipt { position: relative; background: #fff; color: var(--ink); font-family: "DotGothic16", monospace; font-size: 13px; padding: 14px 14px 24px;
  -webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - 9px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 9px repeat-x;
          mask: linear-gradient(#000, #000) top / 100% calc(100% - 9px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 9px repeat-x; }
.rc-shop { text-align: center; font-size: 16px; letter-spacing: .15em; }
.rc-small { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); }
.rc-hr { border-top: 1.5px dashed var(--ink); margin: 7px 0; }
.rc-odai { font-family: "Zen Maru Gothic", sans-serif; font-weight: 900; font-size: 16px; text-align: center; line-height: 1.35; }
.rc-odai small { display: block; font-size: 11px; color: var(--muted); font-weight: 700; }
/* 1行 = 上の段「名前・値段・点数」+ 下の段「まんなかとの差額」 */
.rc-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 2.4em; column-gap: 8px; align-items: baseline; padding: 4px 5px; margin: 0 -5px; border-radius: 4px; }
.rc-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: "Zen Maru Gothic", sans-serif; font-weight: 700; font-size: 14px; }
.rc-yen { white-space: nowrap; text-align: right; }
.rc-pt { text-align: right; color: var(--red); }
.rc-sub { grid-column: 1 / span 3; font-size: 11px; color: var(--muted); line-height: 1.4; }
/* 点数表(この回のまんなかから決まる、円での範囲) */
.rc-bands { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 12px; font-size: 11px; color: var(--muted); margin-top: 4px; }
.rc-bands b { font-weight: 400; color: var(--red); }
/* チームの点 */
.rc-team { display: flex; align-items: baseline; gap: 8px; }
.rc-team span { flex: 1; font-family: "Zen Maru Gothic", sans-serif; font-weight: 900; font-size: 15px; }
.rc-team b { font-size: 28px; font-weight: 400; color: var(--red); }
.rc-team small { font-size: 11px; color: var(--muted); }
.rc-row.me { background: var(--hl); }
.rc-row.top .rc-sub { color: var(--red); }
.rc-total { display: flex; justify-content: space-between; align-items: baseline; }
.rc-total b { font-size: 26px; font-weight: 400; }
.rc-thanks { text-align: center; font-size: 10px; color: var(--muted); }
.stamp { margin: 12px auto 0; width: 76px; height: 76px; border: 3px solid var(--red); color: var(--red); border-radius: 50%; display: flex; align-items: center; justify-content: center; text-align: center; font-family: "Zen Maru Gothic", sans-serif; font-weight: 900; font-size: 12px; line-height: 1.2; transform: rotate(-12deg); background: rgba(255, 255, 255, .85); }

/* 印字の演出: レシートが差し込み口からカタカタ(steps)と下へ出てくる。時間と段数は JS が紙の長さから決める */
.receipt.printing { transform: translateY(-100%); animation: rc-feed var(--feed-time, 3s) steps(var(--feed-steps, 20), end) forwards; }
.receipt.printing .stamp { opacity: 0; animation: rc-stamp .35s ease forwards; animation-delay: calc(var(--feed-time, 3s) + .2s); }
@keyframes rc-feed { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@keyframes rc-stamp { from { opacity: 0; transform: rotate(-12deg) scale(1.6); } to { opacity: 1; transform: rotate(-12deg) scale(1); } }

.rv-bottom { flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; padding: 10px 16px 16px; }
.wait { text-align: center; font-size: 12px; color: var(--muted); }
.promo { text-align: center; font-size: 12px; color: var(--muted); }
.promo b { color: var(--red); }

/* 最終結果 */
.rc-winner { display: flex; align-items: center; justify-content: center; gap: 12px; }
.rc-winner .stamp { margin: 0; flex-shrink: 0; }
.rc-hist { display: flex; gap: 6px; font-size: 11px; line-height: 1.8; }
.rc-hist .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: "Zen Maru Gothic", sans-serif; font-weight: 700; }