/* 翻台 — a round table drawn as an instrument dial, thin line on paper. */
:root {
  --paper: #F4F1E8;
  --ink: #17191E;
  --hair: #B9B4A6;
  --cobalt: #2457F5;
  --cobalt-wash: #DCE4FB;
  --soft: #5E6170;
  --zh: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --disp: "ZCOOL KuaiLe", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --num: "Azeret Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
* { box-sizing: border-box; }
html { background: var(--paper); }
body {
  margin: 0; background: var(--paper); color: var(--ink); font: 400 15px/1.62 var(--zh);
  padding-bottom: calc(118px + env(safe-area-inset-bottom)); overflow-x: hidden;
}
a { color: var(--cobalt); text-decoration: none; border-bottom: 1px solid currentColor; }
code { font-family: var(--num); }
[hidden] { display: none !important; }

/* ---- masthead: the name, written in type, never the header image ---- */
.mast { max-width: 1160px; margin: 0 auto; padding: 14px 18px 4px; }
.mast-row { display: flex; align-items: center; gap: 10px; }
.mast-mark { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--ink); }
.mast-tag { font: 400 12px/1 var(--num); letter-spacing: .08em; color: var(--soft); }
.me-btn {
  margin-left: auto; font: 500 13px/1 var(--zh); color: var(--ink); background: transparent;
  border: 1px solid var(--ink); border-radius: 999px; padding: 8px 14px; cursor: pointer;
}
.me-btn.on { border-color: var(--cobalt); color: var(--cobalt); font-family: var(--num); }
.mast-name {
  margin: 6px 0 0; font: 400 clamp(76px, 22vw, 168px)/1 var(--disp); letter-spacing: .04em;
  -webkit-text-stroke: 1.2px var(--ink); color: transparent;
}
.mast-sub { margin: 4px 0 0; font-size: 15px; color: var(--soft); }

/* ---- the room ---- */
.room { max-width: 1160px; margin: 0 auto; padding: 8px 18px 0; display: grid; gap: 22px; }
.plate { min-width: 0; }
.plate-face { position: relative; width: min(100%, 440px); margin: 0 auto; }
.dial { display: block; width: 100%; height: auto; overflow: visible; }
.d-table { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.d-inner { fill: none; stroke: var(--ink); stroke-width: .8; }
.d-track { fill: none; stroke: var(--hair); stroke-width: .8; stroke-dasharray: 2 4; }
.d-arc { fill: none; stroke: var(--cobalt); stroke-width: 3; stroke-linecap: round; transition: stroke-dashoffset .9s linear; }
.d-tick { stroke: var(--ink); stroke-width: .8; }
.d-tick.maj { stroke-width: 1.4; }
.d-tickn { font: 300 9px var(--num); fill: var(--soft); text-anchor: middle; dominant-baseline: middle; }
.d-hand { stroke: var(--cobalt); stroke-width: 2; stroke-linecap: round; }
#dHand { transition: transform .9s linear; }
.d-pin { fill: var(--paper); stroke: var(--cobalt); stroke-width: 2; }
.d-clock { font: 300 40px var(--num); fill: var(--ink); text-anchor: middle; letter-spacing: .02em; }
.d-clockk { font: 400 12px var(--zh); fill: var(--soft); text-anchor: middle; }
.d-pot { font: 500 13px var(--zh); fill: var(--ink); text-anchor: middle; }
.seat circle.chair { fill: var(--paper); stroke: var(--ink); stroke-width: 1.3; }
.seat text.no { font: 400 13px var(--num); fill: var(--ink); text-anchor: middle; dominant-baseline: central; }
.seat text.who { font: 300 9px var(--num); fill: var(--soft); text-anchor: middle; dominant-baseline: central; }
.seat.taken circle.chair { fill: var(--cobalt); stroke: var(--cobalt); }
.seat.taken text.no { fill: #fff; }
.seat.taken text.who { fill: var(--cobalt); }
.seat.mine circle.ring { fill: none; stroke: var(--cobalt); stroke-width: 1; }
.seat.next circle.chair { fill: var(--cobalt-wash); stroke: var(--cobalt); stroke-dasharray: 4 3; animation: crawl 1.4s linear infinite; }
.seat.next text.no { fill: var(--cobalt); }
.seat.next { cursor: pointer; }
.seat.seated circle.chair { fill: var(--ink); stroke: var(--ink); }
.seat.seated text.no { fill: var(--paper); }
.seat.seated circle.ring { fill: none; stroke: var(--cobalt); stroke-width: 2.4; }
.seat.landed circle.chair { animation: land .7s ease-out; }
@keyframes crawl { to { stroke-dashoffset: -14; } }
@keyframes land { 0% { transform: scale(1.6); } 100% { transform: scale(1); } }
.seat circle.chair { transform-box: fill-box; transform-origin: center; }

.say { max-width: 560px; margin: 10px auto 0; font-size: 16px; line-height: 1.7; text-align: center; }
.say b { font-family: var(--num); font-weight: 600; color: var(--cobalt); }
.order { max-width: 440px; margin: 16px auto 0; text-align: center; }
.order-go {
  width: 100%; font: 500 17px/1 var(--zh); color: var(--paper); background: var(--ink); border: 1px solid var(--ink);
  border-radius: 999px; padding: 16px 20px; cursor: pointer;
}
.order-go:not(:disabled):hover { background: var(--cobalt); border-color: var(--cobalt); }
.order-go:disabled { background: transparent; color: var(--soft); border-style: dashed; cursor: default; }
.order-note { margin: 8px 0 0; font-size: 12px; color: var(--soft); }

.alt { max-width: 640px; margin: 18px auto 0; border-top: 1px solid var(--ink); padding-top: 12px; }
.alt h2 { font: 400 28px/1.2 var(--disp); margin: 4px 0 10px; }
.alt .row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--hair); font-size: 14px; }
.alt .row b { font-family: var(--num); }

/* ---- the side: the kitchen printer, turned tables, the menu ---- */
.side { min-width: 0; display: grid; gap: 18px; align-content: start; }
.slip { border: 1px solid var(--ink); border-radius: 4px; padding: 12px 14px; background: #FBFAF5; }
.slip-h { margin: 0 0 8px; font: 500 15px/1.3 var(--zh); display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.slip-h small { font-weight: 400; font-size: 11px; color: var(--soft); }
.roll { list-style: none; margin: 0; padding: 0; font: 400 12.5px/1.55 var(--num); max-height: 300px; overflow-y: auto; }
.roll li { padding: 6px 0; border-bottom: 1px dashed var(--hair); font-family: var(--zh); font-size: 13px; overflow-wrap: anywhere; }
.roll li .tm { font: 400 11px var(--num); color: var(--soft); margin-right: 8px; }
.roll li.won { color: var(--cobalt); }
.roll li.fresh { animation: printline .9s steps(12) both; }
@keyframes printline { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.roll-quiet { color: var(--soft); font-size: 13px; margin: 0; }
.turned .trow { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--hair); font-size: 13px; }
.turned .trow b { font-family: var(--num); font-weight: 600; }
.menu { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; margin: 0; font-size: 13px; }
.menu dt { color: var(--soft); }
.menu dd { margin: 0; text-align: right; font-family: var(--num); border-bottom: 1px dotted var(--hair); }

/* ---- rules ---- */
.how { max-width: 1160px; margin: 34px auto 0; padding: 0 18px; }
.how h2 { font: 400 34px/1.1 var(--disp); margin: 0 0 12px; }
.how-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; counter-reset: s; }
.how-steps li { border-top: 1px solid var(--ink); padding-top: 8px; counter-increment: s; }
.how-steps li b { display: block; font-size: 16px; }
.how-steps li b::before { content: "0" counter(s) "  "; font: 400 12px var(--num); color: var(--cobalt); }
.how-eg { margin-top: 18px; border: 1px dashed var(--ink); border-radius: 4px; padding: 12px 14px; }
.how-eg h3 { margin: 0 0 4px; font-size: 15px; }
.how-eg p { margin: 4px 0; font-size: 14px; }
.how-eg b { font-family: var(--num); color: var(--cobalt); }

.bill { max-width: 1160px; margin: 34px auto 0; padding: 14px 18px 20px; border-top: 1px solid var(--ink); font-size: 12px; color: var(--soft); }
.bill p { margin: 4px 0; overflow-wrap: anywhere; }
.bill code { color: var(--ink); }
.bill-links { display: flex; gap: 14px; flex-wrap: wrap; }
.bill-links a { margin-right: 0; }
#socials { display: inline-flex; gap: 14px; }
.bill-sign { font-family: var(--disp); font-size: 15px; color: var(--ink); }

/* ---- the CA dock, fixed above the thumb ---- */
.dock {
  position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 30;
  display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "k addr copy" "k gm gm"; align-items: center; gap: 2px 10px;
  background: var(--paper); border: 1.5px solid var(--ink); border-radius: 14px; padding: 9px 10px 8px 14px;
  box-shadow: 0 6px 0 -3px var(--ink);
}
.dock-k { grid-area: k; font: 600 12px var(--num); letter-spacing: .1em; color: var(--cobalt); }
.dock-addr { grid-area: addr; font: 400 11.5px/1.35 var(--num); word-break: break-all; user-select: all; color: var(--ink); }
.dock-copy {
  grid-area: copy; font: 500 13px/1 var(--zh); background: var(--cobalt); color: #fff; border: 0; border-radius: 10px; padding: 11px 14px; cursor: pointer;
}
.dock-copy:disabled { background: var(--hair); color: var(--paper); cursor: default; }
.dock-copy.ok { background: var(--ink); }
.dock-gm { grid-area: gm; justify-self: start; font: 400 11px var(--num); border: 0; color: var(--soft); }

/* ---- sheet + pop ---- */
.tray { position: fixed; inset: 0; z-index: 40; background: rgba(23, 25, 30, .35); display: grid; place-items: end center; padding: 12px; }
.tray-card { width: min(100%, 440px); background: var(--paper); border: 1.5px solid var(--ink); border-radius: 16px; padding: 14px 16px 18px; }
.tray-top { display: flex; justify-content: space-between; align-items: center; }
.tray-top h3 { margin: 0; font-size: 17px; }
.tray-x { background: none; border: 0; font-size: 26px; line-height: 1; cursor: pointer; color: var(--ink); }
.facts { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; margin: 12px 0; font-size: 14px; }
.facts b { font-family: var(--num); text-align: right; }
.warn { color: #B4361C; font-size: 13px; }
.picks { display: grid; gap: 8px; margin-top: 10px; }
.picks button { display: flex; gap: 10px; align-items: center; padding: 10px; border: 1px solid var(--ink); border-radius: 10px; background: transparent; font: 500 14px var(--zh); cursor: pointer; }
.picks img { width: 24px; height: 24px; }
.pop { position: fixed; left: 50%; transform: translateX(-50%); top: 14px; z-index: 50; background: var(--ink); color: var(--paper); padding: 9px 14px; border-radius: 999px; font-size: 13px; max-width: 90vw; }

/* ---- tablet: one column, a bigger table ---- */
@media (min-width: 700px) {
  .mast, .room, .how, .bill { padding-left: 32px; padding-right: 32px; }
  .plate-face { width: min(100%, 540px); }
  .say { font-size: 18px; }
  .side { grid-template-columns: 1fr 1fr; }
  .slip:first-child { grid-column: 1 / -1; }
  .how-steps { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .dock { left: 50%; right: auto; transform: translateX(-50%); width: min(680px, calc(100% - 40px)); grid-template-areas: "k addr copy gm"; grid-template-columns: auto 1fr auto auto; }
  .dock-addr { font-size: 13px; }
  .dock-gm { justify-self: end; }
  body { padding-bottom: 110px; }
}
/* ---- desktop: the table left, the kitchen printer beside it ---- */
@media (min-width: 1000px) {
  .mast { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "row row" "name sub"; align-items: end; column-gap: 28px; }
  .mast-row { grid-area: row; }
  .mast-name { grid-area: name; font-size: 150px; }
  .mast-sub { grid-area: sub; font-size: 18px; padding-bottom: 22px; }
  .room { grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr); gap: 40px; align-items: start; }
  .plate-face { width: min(100%, 600px); }
  .side { grid-template-columns: 1fr; position: sticky; top: 16px; }
  .roll { max-height: 360px; }
}