/* 加钟 — a karaoke room drawn as an isometric floor plan on bone paper: plum ink, one rose for the price on top. */
:root{
  --paper:#F4EFE6; --paper2:#EBE4D7; --paper3:#E0D7C6; --ink:#1E1B24; --ink2:#4A4453; --ink3:#837B8C;
  --rose:#E0336B; --rose-soft:#F7D3DF; --rose-ink:#FFF5F8;
  --line:rgba(30,27,36,.14); --line2:rgba(30,27,36,.28);
  --sans:"Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC","WenQuanYi Micro Hei",sans-serif;
  --show:"ZCOOL XiaoWei","Noto Serif SC","Songti SC","STSong",serif;
  --code:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{background:var(--paper)}
body{
  margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:14.5px; line-height:1.62;
  padding:12px 102px 36px 12px; min-height:100vh; -webkit-text-size-adjust:100%;
}
a{color:var(--ink)}
button{font:inherit; cursor:pointer}
code{font-family:var(--code)}
[hidden]{display:none !important}

/* ---------- the keycard: the room's key hung on the right edge, mid-height, carrying the CA ---------- */
.keycard{
  position:fixed; right:8px; top:50%; transform:translateY(-50%); z-index:60;
  width:86px; padding:20px 7px 10px; border-radius:12px;
  background:var(--ink); color:var(--paper); box-shadow:0 14px 34px rgba(30,27,36,.28);
  display:flex; flex-direction:column; align-items:stretch; gap:6px; text-align:center;
}
.keycard-slot{position:absolute; top:7px; left:50%; width:26px; height:5px; margin-left:-13px; border-radius:3px; background:var(--paper); opacity:.35}
.keycard-home{display:flex; flex-direction:column; align-items:center; gap:3px; text-decoration:none; color:var(--paper)}
.keycard-home img{border-radius:8px; display:block; background:var(--paper)}
.keycard-home b{font-family:var(--show); font-size:21px; font-weight:400; line-height:1}
.keycard-tick{font-family:var(--code); font-size:8.4px; letter-spacing:.02em; opacity:.65}
.keycard-k{font-size:9px; font-weight:700; letter-spacing:.1em; color:var(--rose-soft); border-top:1px solid rgba(244,239,230,.2); padding-top:6px}
.keycard-addr{display:block; font-size:8.5px; line-height:1.42; word-break:break-all; user-select:all; color:var(--paper)}
.keycard-copy{background:var(--rose); color:var(--rose-ink); border:0; border-radius:8px; padding:6px 2px; font-size:11.5px; font-weight:700}
.keycard-copy:disabled{opacity:.4; cursor:default}
.keycard-copy.done{background:var(--paper); color:var(--ink)}
.keycard-gmgn{font-size:9px; color:var(--paper); opacity:.7; text-decoration:none}
.keycard-purse{background:transparent; border:1px solid rgba(244,239,230,.45); color:var(--paper); border-radius:8px; padding:5px 2px; font-size:10px; font-weight:700}
.keycard-purse.on{background:var(--paper); color:var(--ink); font-family:var(--code); font-size:8.4px}
.keycard-nav{display:flex; flex-direction:column; gap:2px; border-top:1px solid rgba(244,239,230,.2); padding-top:6px}
.keycard-nav a{font-size:11px; color:var(--paper); text-decoration:none; padding:2px 0; border-radius:6px; opacity:.8}
.keycard-nav a.here{background:var(--rose); color:var(--rose-ink); opacity:1}

/* ---------- the floor: everything else ---------- */
.floor{display:grid; grid-template-columns:minmax(0,1fr); gap:14px; align-content:start; max-width:1180px; margin:0 auto}

.plan-card{background:var(--paper2); border:1px solid var(--line); border-radius:18px; padding:10px 10px 12px; overflow:hidden}
.topped{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px; padding:8px 10px; border-radius:12px; background:var(--paper); border:1px solid var(--line)}
.topped-k{font-size:11px; font-weight:900; letter-spacing:.06em; color:var(--rose); white-space:nowrap}
.topped-v{font-size:12.5px; line-height:1.5; color:var(--ink2)}
.topped-v b{color:var(--ink)}
.topped-v s{color:var(--ink3)}
.topped.flash{animation:flash 1.4s ease-out}
@keyframes flash{0%{background:var(--rose-soft)}100%{background:var(--paper)}}

.plan-wrap{position:relative}
.plan{display:block; width:100%; height:auto; margin:4px 0 0}
.plan text{font-family:var(--sans)}
.plan .digits{font-family:var(--code); font-weight:600}
.plan .slab-lit{animation:breathe 1.8s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.55}}
.plan-legend{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:4px 12px; font-size:11px; color:var(--ink2)}
.plan-legend i, .zone-h i{display:inline-grid; place-items:center; width:17px; height:17px; border-radius:50%; background:var(--ink); color:var(--paper); font-style:normal; font-size:10px; font-weight:700; margin-right:4px; font-family:var(--code)}
.live-line{margin:10px 2px 0; font-size:13.5px; line-height:1.7; color:var(--ink)}
.live-line em{font-style:normal; font-weight:700; color:var(--rose)}
.live-line a{color:var(--ink)}

.zone{min-width:0; background:var(--paper); border:1px solid var(--line2); border-radius:16px; padding:12px 12px 14px}
.zone-h{margin:0 0 8px; font-family:var(--show); font-weight:400; font-size:21px; line-height:1.2; display:flex; align-items:center; flex-wrap:wrap}
.zone-h span{font-family:var(--sans); font-size:12.5px; color:var(--ink2); margin-left:.3em}
.zone-h b{font-weight:400; color:var(--rose); margin:0 .15em}

.rungs{list-style:none; margin:0 0 10px; padding:0; display:flex; flex-direction:column; gap:5px}
.rung{display:grid; grid-template-columns:auto 1fr; gap:2px 10px; align-items:baseline; padding:7px 10px; border-radius:10px; background:var(--paper2); border:1px solid transparent}
.rung-amt{font-family:var(--code); font-weight:600; font-size:15px; white-space:nowrap}
.rung-who{font-size:12px; color:var(--ink2); min-width:0; overflow-wrap:anywhere}
.rung.top{background:var(--rose); color:var(--rose-ink)}
.rung.top .rung-who, .rung.top a{color:var(--rose-ink)}
.rung.out{opacity:.78}
.rung.out .rung-amt{text-decoration:line-through; text-decoration-color:var(--rose); text-decoration-thickness:2px}
.rung.ghost{background:transparent; border:1.5px dashed var(--line2)}
.rung.ghost.lit{border-color:var(--rose); color:var(--rose); animation:breathe 1.8s ease-in-out infinite}
.rung.more{display:block; font-size:12px; color:var(--ink3); background:transparent; padding:2px 10px}
.rung.fresh{animation:drop .6s ease-out}
@keyframes drop{0%{transform:translateY(-8px); opacity:0}100%{transform:none; opacity:1}}

.bidbox{display:grid; grid-template-columns:minmax(0,1fr); gap:8px; min-width:0}
.bidbox-k{font-size:12px; font-weight:700; color:var(--ink2)}
.bidbox-row{display:flex; align-items:center; gap:8px; border:1.5px solid var(--ink); border-radius:12px; padding:4px 12px; background:#fff}
.bidbox-row input{flex:1; min-width:0; width:100%; border:0; outline:0; background:transparent; font-family:var(--code); font-size:22px; font-weight:600; color:var(--ink); padding:6px 0}
.bidbox-row span{font-family:var(--code); font-size:11px; color:var(--ink3)}
.bidbox-chips{display:flex; gap:6px}
.bidbox-chips button{flex:1; border:1px solid var(--line2); background:var(--paper2); color:var(--ink); border-radius:9px; padding:6px 0; font-size:12.5px}
.bidbox-math{margin:0; font-size:12.5px; line-height:1.6; color:var(--ink2)}
.bidbox-math b{color:var(--ink)}
.bidbox-go{border:0; border-radius:12px; padding:13px 10px; background:var(--ink); color:var(--paper); font-size:16px; font-weight:900; letter-spacing:.04em}
.bidbox-go:disabled{opacity:.5}
.bidbox-roll{border:1.5px solid var(--rose); background:var(--rose-soft); color:var(--ink); border-radius:12px; padding:10px; font-weight:700}

.seats{list-style:none; margin:0; padding:0; display:grid; gap:6px}
.seat{display:grid; grid-template-columns:28px 1fr auto; gap:2px 10px; align-items:center; padding:8px 10px; border-radius:10px; background:var(--paper2)}
.seat-n{display:grid; place-items:center; width:28px; height:28px; border-radius:8px; background:var(--ink); color:var(--paper); font-family:var(--code); font-size:12px; font-weight:600}
.seat-who{font-size:12.5px; min-width:0; overflow-wrap:anywhere}
.seat-who small{display:block; color:var(--ink3); font-size:11px}
.seat-got{text-align:right; font-family:var(--code); font-size:13px; font-weight:600; color:var(--rose); white-space:nowrap}
.seat-got small{display:block; color:var(--ink3); font-weight:400; font-size:10.5px}
.seat.me{outline:2px solid var(--rose)}
.seat.empty{display:block; color:var(--ink3); font-size:12.5px; background:transparent; border:1.5px dashed var(--line2)}
.seat button{grid-column:1 / -1; border:0; border-radius:9px; padding:8px; background:var(--rose); color:var(--rose-ink); font-weight:700}

.tape{background:var(--ink); color:var(--paper); border-radius:16px; padding:12px 12px 6px; min-width:0}
.tape-h{margin:0 0 6px; font-family:var(--show); font-weight:400; font-size:19px}
.tape-h small{font-family:var(--sans); font-size:11px; opacity:.6; margin-left:6px}
.tape-list{list-style:none; margin:0; padding:0; max-height:420px; overflow:auto}
.tape-list li{display:grid; grid-template-columns:52px 1fr; gap:8px; padding:7px 0; border-top:1px solid rgba(244,239,230,.12); font-size:12.5px; line-height:1.55}
.tape-list li:first-child{border-top:0}
.tape-list .when{font-family:var(--code); font-size:10.5px; opacity:.55; padding-top:2px}
.tape-list a{color:var(--paper)}
.tape-list b{color:var(--rose-soft)}
.tape-list li.hush{display:block; opacity:.6}
.tape-list li.new{animation:print .9s ease-out}
.tape-list li.add b{color:#fff}
@keyframes print{0%{background:rgba(224,51,107,.35)}100%{background:transparent}}

.house-rules{padding:4px 4px 0}
.house-rules h3, .elsewhere h3{font-family:var(--show); font-weight:400; font-size:21px; margin:0 0 6px}
.house-rules ol{margin:0; padding:0 0 0 20px; display:grid; gap:6px; font-size:13.5px}
.house-rules ol b{margin-right:6px}
.worked{margin-top:12px; background:var(--paper2); border-radius:14px; padding:10px 12px}
.worked-k{display:inline-block; font-size:11px; font-weight:900; color:var(--rose); letter-spacing:.08em; margin-bottom:4px}
.worked table{width:100%; border-collapse:collapse; font-size:12.5px}
.worked td{padding:4px 4px; border-top:1px solid var(--line)}
.worked td:nth-child(2){font-family:var(--code); text-align:right; white-space:nowrap}
.worked tr.won td{color:var(--rose); font-weight:700}
.worked p{margin:8px 0 0; font-size:12.5px; color:var(--ink2)}

.elsewhere{background:var(--paper); border:1px solid var(--line2); border-radius:16px; padding:12px; min-width:0; overflow-x:auto}
.elsewhere table{width:100%; border-collapse:collapse; font-size:12.5px}
.elsewhere th{text-align:left; font-size:11px; color:var(--ink3); font-weight:500; padding:4px}
.elsewhere td{padding:6px 4px; border-top:1px solid var(--line)}
.elsewhere .r{text-align:right; font-family:var(--code)}
.elsewhere button{border:0; border-radius:8px; background:var(--rose); color:var(--rose-ink); padding:4px 10px; font-weight:700}
.hush{color:var(--ink3)}

.credits{font-size:11.5px; color:var(--ink3); padding:6px 4px 0; border-top:1px solid var(--line)}
.credits p{margin:4px 0}
.credits code{font-size:10.5px; word-break:break-all; color:var(--ink2)}
.credits-links{display:flex; gap:14px}
.credits-links a{color:var(--ink2)}

body.v-other .plan-card .live-line{display:none}
body.v-other .zone, body.v-other .tape, body.v-other .house-rules{display:none}

.drawer{position:fixed; inset:0; background:rgba(30,27,36,.45); display:grid; place-items:end center; z-index:80; padding:12px}
.drawer-card{background:var(--paper); border-radius:16px; padding:16px; width:min(420px,100%); display:grid; gap:10px}
.drawer-card #drawerB{display:grid; gap:6px}
.drawer-card button{border:1px solid var(--line2); background:var(--paper2); border-radius:10px; padding:10px; font-weight:700}
.toast{position:fixed; left:50%; bottom:22px; transform:translateX(-50%); background:var(--ink); color:var(--paper); padding:9px 14px; border-radius:10px; font-size:13px; z-index:90; max-width:80vw}

/* ---------- 720–1000: one column, a wider measure, a bigger plan ---------- */
@media (min-width:720px){
  body{padding:22px 150px 44px 28px; font-size:15.5px}
  .keycard{right:16px; width:118px; padding:24px 10px 12px; gap:8px}
  .keycard-addr{font-size:10.6px}
  .keycard-tick{font-size:9.8px}
  .keycard-home b{font-size:25px}
  .keycard-copy{font-size:13px; padding:8px 4px}
  .keycard-nav a{font-size:12.5px}
  .plan-card{padding:14px 16px 16px}
  .topped-v{font-size:14px}
  .live-line{font-size:15px}
  .zone-h{font-size:25px}
  .rung-amt{font-size:17px}
}

/* ---------- ≥1000: the plan on the left, the door and the sofa beside it, the tape and the rules below ---------- */
@media (min-width:1000px){
  body{padding:28px 190px 48px 32px}
  .keycard{right:max(24px, calc(50vw - 760px)); width:148px; padding:28px 12px 14px}
  .keycard-addr{font-size:11.6px; line-height:1.5}
  .keycard-home b{font-size:30px}
  .floor{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:18px 22px;
    grid-template-areas:"plan door" "plan sofa" "tape rules" "else else" "foot foot"}
  .plan-card{grid-area:plan; align-self:start}
  .zone-door{grid-area:door; align-self:start}
  .zone-sofa{grid-area:sofa; align-self:start}
  .tape{grid-area:tape; align-self:start}
  .house-rules{grid-area:rules}
  .elsewhere{grid-area:else}
  .credits{grid-area:foot}
  .topped-v{font-size:15px}
  .live-line{font-size:16px}
  body.v-other .floor{grid-template-areas:"plan else" "foot foot"}
}