/* 清仓 — a clearance notice on bone paper, the nine-slot rack under it, the tape beside. Blue ink, one pink. */
:root {
  --paper: #F3EEE4; --paper-2: #EAE3D4; --paper-3: #E0D7C4;
  --ink: #1E2F9E; --ink-soft: #5763A9; --text: #24233B; --mute: #7C7867;
  --pink: #EE3A82; --pink-wash: #FBDCE7; --plank: #2A3C9C;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --sans: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --serif: "Noto Serif SC", "Songti SC", "STSong", serif;
}
* { box-sizing: border-box; }
html { background: var(--paper); }
body {
  margin: 0 auto; max-width: 1160px; min-height: 100vh; background: var(--paper); color: var(--text);
  font: 400 15px/1.7 var(--serif); padding: 14px 16px 132px; -webkit-font-smoothing: antialiased;
}
a { color: var(--ink); }
code { font-family: var(--mono); }
b, strong { font-weight: 600; color: var(--ink); }
em { font-style: normal; color: var(--pink); font-weight: 600; }

/* ---------- the notice (the first thing on the page) ---------- */
.notice { border-top: 3px double var(--ink); border-bottom: 1px solid var(--ink); padding: 10px 2px 12px; font-size: 17px; }
.notice-stamp { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font: 500 12px/1.3 var(--sans); color: var(--ink-soft); letter-spacing: .04em; }
.seal { font: 900 15px/1 var(--sans); color: var(--pink); border: 2px solid var(--pink); padding: 4px 6px 3px; transform: rotate(-4deg); letter-spacing: .12em; }
.notice-body { margin: 0; font: 400 17px/1.75 var(--serif); color: var(--text); text-align: justify; }
.notice-body b { font-family: var(--mono); font-weight: 600; }
.notice-body .clk { font-family: var(--mono); color: var(--pink); font-weight: 600; }

/* ---------- the rack ---------- */
.floor { display: block; }
.rack { margin-top: 16px; }
.rack-cap { display: flex; align-items: center; gap: 8px; font: 700 13px/1.2 var(--sans); color: var(--ink); }
.rack-mark { border-radius: 7px; }
.rack-name { font: 900 20px/1 var(--sans); letter-spacing: .06em; }
.rack-meta { color: var(--ink-soft); font-weight: 500; }
.rack-clock { margin-left: auto; font: 600 14px/1 var(--mono); color: var(--pink); background: var(--pink-wash); padding: 5px 8px; border-radius: 3px; }
.rack-grid {
  list-style: none; margin: 10px 0 0; padding: 10px 8px 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 8px;
  background: var(--paper-2); border-left: 6px solid var(--plank); border-right: 6px solid var(--plank); border-top: 6px solid var(--plank);
}
.slot { position: relative; height: 122px; padding: 8px 2px 0; border-bottom: 6px solid var(--plank); display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.crate {
  position: relative; width: 82%; height: 50px; background: var(--ink); border-radius: 3px 3px 1px 1px;
  box-shadow: inset 0 -8px 0 rgba(0,0,0,.14); transition: transform .4s ease;
}
.crate::before { content: ""; position: absolute; left: 50%; top: 0; width: 18%; height: 100%; transform: translateX(-50%); background: rgba(255,255,255,.16); }
.tag {
  position: absolute; top: -26px; left: 50%; transform: translateX(-50%); white-space: nowrap; background: var(--paper);
  border: 1.5px solid var(--ink); border-radius: 2px; padding: 1px 6px 0; font: 600 13px/1.4 var(--mono); color: var(--ink);
}
.tag::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 1.5px; height: 6px; background: var(--ink); }
.slot-who { font: 400 10.5px/1.3 var(--mono); color: var(--mute); margin: 4px 0 3px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot-gain { position: absolute; left: 0; right: 0; bottom: 7px; text-align: center; font: 600 11px/1 var(--mono); color: #fff; z-index: 1; }
.slot-rank { position: absolute; top: 4px; left: 4px; font: 700 10px/1 var(--sans); color: var(--ink-soft); }
.slot.is-low .crate { background: var(--pink); transform: rotate(-7deg) translateX(6px); animation: teeter 2.4s ease-in-out infinite; }
.slot.is-low .tag { border-color: var(--pink); color: var(--pink); }
.slot.is-low .tag::after { background: var(--pink); }
.slot.is-low .slot-who { color: var(--pink); font-weight: 600; }
.slot.is-me .slot-who { color: var(--ink); font-weight: 600; }
.slot.is-new .crate { animation: land .6s ease-out; }
.slot.is-gap .crate { background: transparent; border: 1.5px dashed #C7BBA2; box-shadow: none; }
.slot.is-gap .crate::before { display: none; }
.slot.is-gap .slot-who { color: #A89F8A; }
.slot.is-swept .crate { background: transparent; border: 1.5px dashed var(--pink); box-shadow: none; opacity: .55; }
.slot.is-swept .crate::before { display: none; }
.slot.is-swept .slot-who { color: var(--pink); }
.slot.is-next-gap { cursor: pointer; }
.slot.is-next-gap .crate { border-color: var(--pink); background: var(--pink-wash); animation: beckon 1.6s ease-in-out infinite; }
.slot.is-next-gap .slot-who { color: var(--pink); font-weight: 600; }
.lowflag { position: absolute; top: 0; left: 50%; transform: translateX(-50%); font: 700 10.5px/1 var(--sans); color: #fff; background: var(--pink); padding: 3px 5px; border-radius: 2px; white-space: nowrap; z-index: 2; }
.rack-legend { display: flex; gap: 14px; margin: 8px 2px 0; font: 500 11.5px/1.3 var(--sans); color: var(--mute); }
.key::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 5px; vertical-align: -1px; border-radius: 2px; }
.key-low::before { background: var(--pink); }
.key-up::before { background: var(--ink); }
.key-gap::before { border: 1.5px dashed var(--mute); }

.dropzone { margin-top: 12px; border-top: 1px dashed var(--ink-soft); padding-top: 8px; }
.dropzone-k { margin: 0 0 6px; font: 700 12px/1.2 var(--sans); color: var(--ink-soft); letter-spacing: .1em; }
.fallen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.fallen li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; font: 400 13px/1.45 var(--serif); }
.fallen .box { width: 26px; height: 18px; background: var(--pink); border-radius: 2px; transform: rotate(14deg); }
.fallen .amt { font: 600 13px/1.2 var(--mono); color: var(--pink); }
.fallen li.is-drop .box { animation: tumble .9s ease-in; }
.fallen li.is-hush { display: block; color: var(--mute); font-size: 13px; }

/* ---------- the till (shelve / mark up) ---------- */
.till { margin-top: 18px; background: #FFFDF8; border: 1.5px solid var(--ink); border-radius: 4px; padding: 12px; }
.till-k { display: flex; justify-content: space-between; gap: 10px; font: 700 14px/1.3 var(--sans); color: var(--ink); }
.till-bal { font: 400 11.5px/1.3 var(--mono); color: var(--mute); }
.till-row { display: flex; align-items: stretch; gap: 8px; margin-top: 8px; }
.till-in { flex: 1 1 auto; min-width: 0; font: 600 20px/1 var(--mono); color: var(--ink); border: 0; border-bottom: 2px solid var(--ink); background: transparent; padding: 8px 2px; outline: none; }
.till-in:focus { border-bottom-color: var(--pink); }
.till-tk { align-self: center; font: 600 11px/1 var(--mono); color: var(--mute); }
.till-go { flex: 0 0 auto; font: 700 15px/1 var(--sans); color: #fff; background: var(--ink); border: 0; border-radius: 3px; padding: 0 16px; min-height: 44px; cursor: pointer; }
.till-go:disabled { background: var(--paper-3); color: var(--mute); cursor: default; }
.till-hint { margin: 8px 0 0; font-size: 13.5px; color: var(--text); }
.till-owed { margin-top: 10px; display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--pink-wash); padding: 8px 10px; border-radius: 3px; font-size: 13.5px; }
.till-owed button { font: 700 13px/1 var(--sans); background: var(--pink); color: #fff; border: 0; border-radius: 3px; padding: 9px 12px; cursor: pointer; }

/* ---------- rules ---------- */
.howto { margin-top: 22px; }
.howto-t, .worked-t, .ledger-t { margin: 0 0 6px; font: 900 15px/1.3 var(--sans); color: var(--ink); letter-spacing: .08em; }
.howto-ls { margin: 0; padding-left: 20px; font-size: 14.5px; }
.howto-ls li { margin-bottom: 4px; }
.worked { margin-top: 12px; border-left: 3px solid var(--pink); padding: 2px 0 2px 12px; font-size: 14px; }
.worked p { margin: 0 0 6px; }

/* ---------- the tape ---------- */
.roll { margin-top: 22px; background: #FFFDF8; border: 1px solid var(--paper-3); border-radius: 3px; padding: 10px 12px 12px; }
.roll-head { display: flex; align-items: center; gap: 8px; font: 900 15px/1.3 var(--sans); color: var(--ink); letter-spacing: .08em; border-bottom: 2px solid var(--ink); padding-bottom: 6px; }
.roll-led { width: 8px; height: 8px; border-radius: 50%; background: var(--pink); animation: blink 1.4s steps(2) infinite; }
.roll-sub { margin-left: auto; font: 500 11px/1 var(--sans); color: var(--mute); letter-spacing: 0; }
.roll-ls { list-style: none; margin: 0; padding: 0; font: 400 12.5px/1.5 var(--mono); max-height: 460px; overflow-y: auto; }
.roll-ls li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; padding: 6px 0; border-bottom: 1px dotted var(--paper-3); overflow-wrap: anywhere; }
.roll-ls time { color: var(--mute); }
.roll-ls li.is-clear span { color: var(--pink); font-weight: 600; }
.roll-ls li.is-feed { animation: feed .5s ease-out; }
.roll-ls li.is-hush { display: block; font-family: var(--serif); color: var(--mute); font-size: 13px; }
.roll-ls li.is-primer span { color: var(--ink-soft); }
.ledger { margin-top: 14px; }
.ledger-ls { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.ledger-ls li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px dotted var(--paper-3); }
.ledger-ls li.is-hush { display: block; color: var(--mute); }

/* ---------- colophon ---------- */
.colophon { margin-top: 26px; padding-top: 12px; border-top: 3px double var(--ink); font: 400 12px/1.7 var(--sans); color: var(--mute); overflow-wrap: anywhere; }
.colophon code { color: var(--text); font-size: 11.5px; }
.colophon nav { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; }

/* ---------- the CA dock: fixed above the thumb ---------- */
.cadock {
  position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 30;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "k addr copy" "k gm copy"; align-items: center; gap: 2px 10px;
  background: var(--ink); color: #fff; border-radius: 6px; padding: 9px 10px; box-shadow: 0 6px 24px rgba(30, 47, 158, .28);
}
.cadock-k { grid-area: k; font: 700 12px/1 var(--mono); background: var(--pink); color: #fff; padding: 6px 6px; border-radius: 3px; }
.cadock-addr { grid-area: addr; font: 500 11.5px/1.35 var(--mono); word-break: break-all; user-select: all; color: #fff; }
.cadock-addr.is-pending { color: #C9CEF0; user-select: text; }
.cadock-copy { grid-area: copy; font: 700 13px/1 var(--sans); background: #fff; color: var(--ink); border: 0; border-radius: 4px; padding: 0 12px; min-height: 40px; cursor: pointer; }
.cadock-copy:disabled { opacity: .5; cursor: default; }
.cadock-copy.is-done { background: var(--pink); color: #fff; }
.cadock-gm { grid-area: gm; font: 500 10.5px/1.2 var(--mono); color: #C9CEF0; }

/* ---------- modal + slip ---------- */
.modal { position: fixed; inset: 0; z-index: 40; background: rgba(36, 35, 59, .35); display: flex; align-items: flex-end; justify-content: center; }
.modal[hidden] { display: none; }
.modal-card { width: 100%; max-width: 560px; max-height: 80vh; overflow: auto; background: var(--paper); border-top: 3px double var(--ink); padding: 14px 16px 24px; }
.modal-hd { display: flex; justify-content: space-between; align-items: center; font: 900 16px/1.3 var(--sans); color: var(--ink); margin-bottom: 8px; }
.modal-hd button { font: 500 13px/1 var(--sans); background: none; border: 1px solid var(--ink); color: var(--ink); padding: 6px 10px; border-radius: 3px; cursor: pointer; }
.purses { display: flex; flex-direction: column; gap: 8px; }
.purses button { display: flex; align-items: center; gap: 10px; font: 600 14px/1 var(--sans); background: #FFFDF8; border: 1px solid var(--paper-3); padding: 10px; border-radius: 3px; cursor: pointer; }
.purses img { width: 24px; height: 24px; }
.slip { position: fixed; left: 50%; bottom: 100px; transform: translateX(-50%); z-index: 50; background: var(--text); color: #fff; font: 500 13px/1.3 var(--sans); padding: 9px 14px; border-radius: 3px; }

@keyframes teeter { 0%, 100% { transform: rotate(-7deg) translateX(6px); } 50% { transform: rotate(-11deg) translateX(9px); } }
@keyframes land { from { transform: translateY(-24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes beckon { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes tumble { from { transform: translate(40px, -40px) rotate(-30deg); opacity: 0; } to { transform: rotate(14deg); opacity: 1; } }
@keyframes feed { from { transform: translateY(-10px); opacity: 0; background: var(--pink-wash); } to { transform: none; opacity: 1; } }
@keyframes blink { 50% { opacity: .2; } }

/* ---------- mid widths: one column, a wider measure, a bigger rack ---------- */
@media (min-width: 640px) {
  body { padding: 22px 32px 120px; }
  .notice-body { font-size: 18px; }
  .slot { height: 140px; }
  .crate { height: 64px; width: 72%; }
  .tag { font-size: 15px; top: -30px; }
  .slot-who { font-size: 11.5px; }
  .cadock { left: 50%; right: auto; transform: translateX(-50%); width: min(720px, calc(100% - 32px)); grid-template-areas: "k addr gm copy"; grid-template-columns: auto minmax(0, 1fr) auto auto; }
  .cadock-addr { font-size: 13px; }
}

/* ---------- desktop: notice + rack + till on the left, the tape as a sticky column on the right ---------- */
@media (min-width: 1000px) {
  body { display: grid; grid-template-columns: minmax(0, 1fr) 370px; grid-template-areas: "notice roll" "floor roll" "colophon colophon"; column-gap: 40px; align-items: start; padding: 30px 40px 120px; }
  .notice { grid-area: notice; }
  .notice-body { font-size: 19px; }
  .floor { grid-area: floor; }
  .roll { grid-area: roll; position: sticky; top: 24px; margin-top: 0; max-height: calc(100vh - 140px); overflow: auto; }
  .roll-ls { max-height: none; }
  .colophon { grid-area: colophon; }
  .slot { height: 164px; }
  .crate { height: 76px; width: 66%; }
  .tag { font-size: 16px; top: -34px; }
  .rack-name { font-size: 24px; }
  .till { display: grid; grid-template-columns: minmax(0, 1fr); }
  .howto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 28px; }
  .howto-t { grid-column: 1 / -1; }
  .worked { margin-top: 0; }
}

.till-owed[hidden], .cadock-gm[hidden], .modal[hidden] { display: none; }