* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; background: #120d0a; overflow: hidden; touch-action: none; -webkit-user-select: none; user-select: none;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif; color: #2a1d14; -webkit-tap-highlight-color: transparent; }
#wrap { position: fixed; inset: 0; overflow: hidden; }
#view { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
button { font: inherit; border: 0; cursor: pointer; }

#hud { position: absolute; inset: 0; pointer-events: none; }
#hud.off { display: none; }
.h-clock { position: absolute; left: 16px; top: 12px; background: rgba(20,14,10,.78); color: #fff; font-size: clamp(22px, 4.2vmin, 40px); font-weight: 800;
  padding: 4px 16px; border-radius: 12px; font-variant-numeric: tabular-nums; }
.h-sales { position: absolute; right: 16px; top: 12px; background: rgba(20,14,10,.78); color: #fff; padding: 4px 16px; border-radius: 12px;
  font-size: clamp(22px, 4.2vmin, 40px); font-weight: 800; font-variant-numeric: tabular-nums; }
.h-sales small { font-size: .55em; color: #d8c8b2; margin-right: 8px; font-weight: 600; }
.h-hint { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); background: rgba(255,248,224,.94); padding: 8px 20px; border-radius: 14px;
  font-size: clamp(16px, 3.4vmin, 28px); font-weight: 700; white-space: nowrap; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.h-hint:empty { display: none; }
#floats { position: absolute; inset: 0; }
.float { position: absolute; transform: translate(-50%, -100%); font-weight: 900; font-size: clamp(16px, 3.4vmin, 28px); white-space: nowrap;
  text-shadow: 0 2px 0 #fff, 0 -2px 0 #fff, 2px 0 0 #fff, -2px 0 0 #fff; animation: up 1.4s ease-out forwards; }
@keyframes up { from { opacity: 1; margin-top: 0; } to { opacity: 0; margin-top: -50px; } }

.card-screen { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(92%, 760px); max-height: 92%; overflow-y: auto;
  background: rgba(250,244,232,.97); border-radius: 22px; padding: 26px 32px; display: none; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.card-screen.on { display: block; }
.card-screen h1 { font-size: clamp(26px, 5.4vmin, 48px); font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; }
.card-screen h1 span { color: #b8322a; }
.card-screen h2 { font-size: clamp(24px, 5vmin, 40px); margin-bottom: 10px; }
.lead { font-size: clamp(16px, 3.3vmin, 26px); line-height: 1.7; margin: 12px 0; text-align: left; display: inline-block; }
.load { font-size: clamp(15px, 3vmin, 22px); color: #7a6a5a; margin: 6px 0 12px; }
.btn { background: #b8322a; color: #fff; font-size: clamp(20px, 4vmin, 32px); font-weight: 800; padding: 12px 40px; border-radius: 14px; box-shadow: 0 4px 0 #6d1a14; }
.btn:disabled { opacity: .45; }
.note { font-size: clamp(13px, 2.4vmin, 17px); color: #7a6a5a; margin-top: 14px; }
.res { font-size: clamp(17px, 3.4vmin, 26px); line-height: 1.8; margin: 8px 0 18px; }
.res b { font-size: 1.2em; }
.res .bad { color: #b8322a; } .res .good { color: #2f7d4f; }
.btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 6px; }
.btn.sub { background: #fff; color: #2a1d14; border: 3px solid #2a1d14; box-shadow: 0 4px 0 #2a1d14; }
#introBody { text-align: left; display: block; }
.ftab { margin: 6px auto 16px; border-collapse: collapse; font-size: clamp(14px, 2.8vmin, 21px); }
.ftab td { padding: 4px 10px; border-top: 1px solid #e3d6c2; text-align: right; }
.ftab td:first-child { text-align: left; }
.fz { font-size: clamp(14px, 2.8vmin, 20px); color: #5a4a3a; margin-top: 12px; }
.fz button { margin-left: 6px; padding: 4px 14px; border: 2px solid #2a1d14; border-radius: 10px; background: #fff; font-size: inherit; }
.fz button.on { background: #2a1d14; color: #fff; }
body.fz1 .card-screen, body.fz1 .h-hint, body.fz1 .h-clock, body.fz1 .h-sales, body.fz1 .float { zoom: 1.15; }
body.fz2 .card-screen, body.fz2 .h-hint, body.fz2 .h-clock, body.fz2 .h-sales, body.fz2 .float { zoom: 1.3; }
.hint { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); width: min(92%, 700px); background: #fff8d8; border-radius: 12px;
  padding: 10px 52px 10px 16px; font-size: clamp(15px, 3vmin, 20px); line-height: 1.5; display: none; z-index: 20; box-shadow: 0 6px 20px rgba(0,0,0,.45); }
.hint.on { display: block; }
.hint .x { position: absolute; right: 6px; top: 4px; width: 40px; height: 40px; font-size: 26px; background: none; }
.h-views { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 8px; pointer-events: auto; }
.h-views button { background: rgba(20,14,10,.72); color: #fff; font-size: clamp(14px, 2.8vmin, 20px); font-weight: 700; padding: 8px 12px; border-radius: 10px; min-width: 76px; }
.h-views button:active { background: #b8322a; }
body.fz1 .h-views, body.fz2 .h-views { zoom: 1.15; }
.card-screen.side { left: auto; right: 12px; top: 12px; transform: none; width: min(46%, 520px); max-height: calc(100% - 24px); text-align: left; padding: 16px 18px; background: rgba(250,244,232,.95); }
.side h2 { font-size: clamp(18px, 3.6vmin, 28px); margin-bottom: 4px; }
.side .intro { font-size: clamp(13px, 2.6vmin, 18px); line-height: 1.55; margin: 4px 0 8px; }
.side .money { font-size: clamp(15px, 3vmin, 22px); } .side .money b { font-size: 1.25em; color: #2f7d4f; }
.side .state { font-size: clamp(12px, 2.4vmin, 16px); color: #7a6a5a; margin: 2px 0 8px; }
.shop { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 10px; }
.item { text-align: left; background: #fff; border: 2px solid #2a1d14; border-radius: 10px; padding: 6px 8px; display: grid; grid-template-columns: 1fr auto; gap: 2px 6px;
  font-size: clamp(12px, 2.4vmin, 16px); box-shadow: 0 3px 0 #2a1d14; }
.item .nm { font-weight: 800; } .item .pr { font-weight: 800; color: #b8322a; } .item small { grid-column: 1 / 3; color: #7a6a5a; font-size: .85em; }
.item:disabled { opacity: .4; box-shadow: none; }
.item:not(:disabled):active { transform: translateY(2px); box-shadow: 0 1px 0 #2a1d14; }
.side .btn { font-size: clamp(16px, 3.2vmin, 24px); padding: 10px 26px; }
.ftab.money { margin-top: 2px; } .ftab.money td { font-size: clamp(14px, 2.8vmin, 20px); }
.ftab.money .bad { color: #b8322a; } .ftab.money .good { color: #2f7d4f; } .ftab.money tr.sum td { font-weight: 800; border-top: 2px solid #2a1d14; }
.side .btns { position: sticky; bottom: -16px; background: rgba(250,244,232,.97); padding: 8px 0 4px; margin: 0; }

/* 最初の説明 */
.tagline { font-size: clamp(17px, 3.6vmin, 26px); font-weight: 700; margin: 8px 0 6px; }
.steps { list-style: none; counter-reset: st; text-align: left; display: inline-block; margin: 2px 0 6px; }
.steps li { counter-increment: st; font-size: clamp(16px, 3.2vmin, 24px); line-height: 1.45; padding: 4px 0 4px 40px; position: relative; }
.steps li::before { content: counter(st); position: absolute; left: 0; top: 4px; width: 30px; height: 30px; border-radius: 50%; background: #b8322a; color: #fff;
  font-weight: 800; font-size: 18px; display: flex; align-items: center; justify-content: center; }
.tip { font-size: clamp(14px, 2.6vmin, 18px); color: #5a4a3a; margin-bottom: 6px; }

/* 購入の画面：1列で、字を大きく */
.shop { grid-template-columns: 1fr; gap: 6px; }
.item { grid-template-columns: 1fr auto; padding: 7px 10px; }
.item .nm { font-size: 17px; line-height: 1.3; }
.item .pr { font-size: 17px; white-space: nowrap; align-self: center; }
.item small { font-size: 14px; line-height: 1.35; }
.side .intro { font-size: 15px; }
.side .money { font-size: 17px; } .side .state { font-size: 14px; }
.side h2 { font-size: 20px; }

/* 小さい画面（スマホ） */
body.small .card-screen { padding: 12px 16px; }
body.small .card-screen h1 { font-size: 26px; }
body.small .tagline { font-size: 17px; margin: 4px 0; }
body.small .steps li { font-size: 16px; line-height: 1.35; padding: 3px 0 3px 36px; }
body.small .steps li::before { width: 26px; height: 26px; font-size: 15px; top: 3px; }
body.small .tip, body.small .note { font-size: 13px; margin: 2px 0; }
body.small .load { margin: 2px 0 6px; font-size: 14px; }
body.small .btn { font-size: 18px; padding: 9px 22px; }
body.small .fz { margin-top: 6px; font-size: 14px; }
body.small .card-screen.side { width: 60%; top: 6px; right: 6px; max-height: calc(100% - 12px); padding: 10px 12px; }
body.small .side .btns { bottom: -10px; }
/* 「ホーム画面に追加」などの案内は、題名に重ならないよう下に */
.hint { top: auto; bottom: 8px; }
body.small .hint { font-size: 14px; padding: 6px 44px 6px 12px; }

/* やることの押しボタン */
#acts { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.act { position: absolute; left: 0; top: 0; pointer-events: auto; min-width: 64px; min-height: 40px; padding: 6px 12px; border-radius: 22px;
  font-size: 17px; font-weight: 800; color: #fff; border: 3px solid #fff; box-shadow: 0 3px 10px rgba(0,0,0,.45); white-space: nowrap;
  display: flex; align-items: center; gap: 6px; animation: actpulse 1.1s ease-in-out infinite; }
.act::after { content: ''; position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); border: 7px solid transparent; border-top-color: #fff; border-bottom: 0; }
.act.guide { background: #2c6fd1; } .act.clean { background: #e08a1e; } .act.plate { background: #c43a2c; } .act.pickup { background: #2f8a4f; }
.act b { background: #fff; color: #2a1d14; border-radius: 50%; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; }
.act small { font-size: 14px; }
.act.queued { animation: none; opacity: .82; }
@keyframes actpulse { 0%, 100% { box-shadow: 0 3px 10px rgba(0,0,0,.45), 0 0 0 0 rgba(255,255,255,.7); } 50% { box-shadow: 0 3px 10px rgba(0,0,0,.45), 0 0 0 8px rgba(255,255,255,0); } }
body.fz1 .act { zoom: 1.12; } body.fz2 .act { zoom: 1.25; }

/* お客さんの不満の理由（顔の印の横） */
#moods { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.moodtag { position: absolute; left: 0; top: 0; background: #fff6e0; color: #8a4a00; border: 2px solid #e2b13c; border-radius: 10px;
  padding: 2px 8px; font-size: 14px; font-weight: 800; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.moodtag.angry { background: #fff0ee; color: #b8322a; border-color: #d64040; }
body.fz1 .moodtag { zoom: 1.12; } body.fz2 .moodtag { zoom: 1.25; }
.res .why { font-size: .85em; line-height: 1.6; margin-top: 6px; color: #8a3a2a; }
.res .why.good { color: #2f7d4f; }

/* メニューと値段 */
.side .crowd { display: inline-block; margin-top: 4px; font-weight: 700; color: #2c5d93; }
.menu { margin: 4px 0 10px; }
.menu .mh { font-weight: 800; font-size: 17px; margin-bottom: 4px; }
.menu .mh small { font-weight: 400; font-size: 13px; color: #7a6a5a; margin-left: 4px; }
.menu .chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 5px; }
.chip { background: #fff; border: 2px solid #2a1d14; border-radius: 9px; padding: 5px 6px; display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 0 5px;
  font-size: 15px; text-align: left; box-shadow: 0 2px 0 #2a1d14; }
.chip i { width: 16px; height: 16px; border-radius: 50%; border: 1px solid #0003; }
.chip b { font-size: 15px; white-space: nowrap; } .chip span { font-weight: 800; color: #b8322a; font-size: 14px; }
.chip small { grid-column: 2 / 4; font-size: 13px; color: #7a6a5a; }
.chip.lv0 { background: #e9f6ec; } .chip.lv0 small { color: #2f7d4f; font-weight: 700; }
.chip.lv2 { background: #fbecea; } .chip.lv2 small { color: #b8322a; font-weight: 700; }
.chip.lv3 { opacity: .5; background: #eee; } .chip.lv3 i { visibility: hidden; } .chip.lv3 span { color: #7a6a5a; }
.chip:active { transform: translateY(2px); box-shadow: none; }
#resBody .neta { margin-top: 8px; font-size: clamp(14px, 2.6vmin, 19px); } #resBody .neta .ftab { margin: 2px auto 8px; } #resBody .neta .ftab td { padding: 2px 8px; font-size: clamp(14px, 2.4vmin, 18px); } #resBody .neta small { color: #7a6a5a; }
/* 結果が長くなっても、ボタンは常に見えるように */
#result .btns { position: sticky; bottom: -26px; background: rgba(250,244,232,.97); padding: 8px 0 6px; margin-bottom: 0; }

/* 食事中のお客さんの札（タップで開く） */
.ginfo { display: none; position: absolute; left: 10px; top: 64px; width: min(330px, 46%); max-height: calc(100% - 130px); overflow-y: auto;
  pointer-events: auto; background: rgba(255,250,240,.97); color: #2a1d14; border-radius: 12px; padding: 10px 12px 10px; font-size: 15px; line-height: 1.45;
  box-shadow: 0 4px 16px rgba(0,0,0,.45); border: 2px solid #2f8a4f; }
.ginfo.on { display: block; }
.ginfo .x { position: absolute; right: 4px; top: 2px; width: 40px; height: 40px; border: 0; background: none; font-size: 26px; color: #6a5a4a; }
.ginfo .tt { font-weight: 800; font-size: 16px; padding-right: 36px; }
.ginfo .gone { font-size: 13px; color: #b8322a; }
.ginfo .ln { margin-top: 3px; }
.ginfo small { font-size: 13px; color: #b06a10; }
.ginfo table { width: 100%; border-collapse: collapse; margin-top: 6px; }
.ginfo td { padding: 2px 3px; border-top: 1px solid #e6dccb; white-space: nowrap; }
.ginfo td:nth-child(n+2) { text-align: right; }
.ginfo i { font-style: normal; font-size: 13px; border-radius: 6px; padding: 0 4px; }
.ginfo i.lo { background: #dff1e4; color: #2f7d4f; } .ginfo i.hi { background: #fbe1dd; color: #b8322a; } .ginfo i.fv { color: #d99a00; padding: 0 2px 0 0; }
.ginfo .sum { margin-top: 2px; font-weight: 800; color: #2f6a3f; }
body.small .ginfo { font-size: 14px; padding: 6px 10px; top: 56px; line-height: 1.35; }
body.small .ginfo .tt { font-size: 15px; }
body.fz1 .ginfo { zoom: 1.12; } body.fz2 .ginfo { zoom: 1.25; }
/* ボタンから、指している人・席・皿への線 */
#aims { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }