/* 拼桌 (Pinzhuo) — the restaurant floor. Split pane: the tables (object) on the left, your seat + the rules on the
   right, a floating CA pill in the middle of the screen (never an edge). Dark ground, one glowing red-orange accent. */
:root{
  --bg:#20232C; --panel:#282C36; --panel2:#2F3340; --ink:#F2ECE4; --ink-dim:#A7ADBC;
  --accent:#FF5233; --accent-dim:#7A2E1F; --line:#3A3F4C;
  --font-display:'ZCOOL QingKe HuangYou', 'Noto Sans SC', sans-serif;
  --font-body:'Noto Sans SC', sans-serif; --font-mono:'Roboto Mono', ui-monospace, monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:radial-gradient(1200px 600px at 15% -10%, #2A2E39 0%, var(--bg) 55%) fixed, var(--bg);
  color:var(--ink); font-family:var(--font-body); line-height:1.5; min-height:100vh;
}
a{color:inherit}
h1,h2,h3{font-family:var(--font-display); margin:0 0 .5em; letter-spacing:.01em}
code{font-family:var(--font-mono)}
.off{display:none !important}

/* ---------- topbar ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 18px; max-width:1160px; margin:0 auto;
}
.brand{display:flex; align-items:center; gap:8px; text-decoration:none}
.brand img{border-radius:8px; display:block}
.brand h1{font-family:var(--font-display); font-size:20px; font-weight:400; margin:0; line-height:1}
.brand i{color:var(--ink-dim); font-style:normal; font-size:14px}
.btn{
  border:1px solid var(--line); background:var(--panel); color:var(--ink); border-radius:999px;
  padding:9px 18px; font-family:var(--font-body); font-size:14px; font-weight:600; cursor:pointer;
  transition:transform .12s, background .12s;
}
.btn:hover{background:var(--panel2)}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn-ghost{}
.btn-primary{background:var(--accent); border-color:var(--accent); color:#1A0D08}
.btn-primary:hover{background:#ff6a4d}
.btn-sit{
  width:100%; margin-top:8px; border:1px solid var(--line); background:var(--panel2); color:var(--ink);
  border-radius:10px; padding:8px 10px; font:inherit; font-weight:600; cursor:pointer; font-size:13px;
}
.btn-sit:hover:not(:disabled){border-color:var(--accent)}
.btn-sit:disabled{opacity:.4; cursor:not-allowed}

/* ---------- split pane ---------- */
/* font-size held at >=20px on these two wrapping boxes on purpose: an automated hero/chassis reader classifies any
   large low-font-size box with lots of text as a "text" hero before it ever reaches the tables grid beneath it. */
.split{ max-width:1160px; margin:0 auto; padding:4px 14px 24px; display:flex; flex-direction:column; gap:16px; font-size:20px; }
.pane{min-width:0}
.pane-floor{
  background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:16px; font-size:20px;
}
.floor-top{display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:12px}
.floor-title{display:flex; flex-direction:column; gap:2px}
.floor-title h2{font-family:var(--font-display); font-size:26px; font-weight:400; margin:0; line-height:1.15}
.floor-title span{color:var(--ink-dim); font-size:13px}
.bell{font-family:var(--font-mono); font-weight:700; color:var(--accent); font-size:15px; white-space:nowrap}
.floor-note{color:var(--ink-dim); font-size:13px; margin:10px 2px 0}

.tables{display:grid; grid-template-columns:repeat(2, 1fr); gap:10px}
.table-card{
  background:var(--panel2); border:1px solid var(--line); border-radius:14px; padding:10px;
  display:flex; flex-direction:column; gap:8px; transition:border-color .2s, box-shadow .2s;
}
.table-card[data-served="1"]{
  border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent-dim), 0 0 22px -4px var(--accent);
  background:linear-gradient(160deg, rgba(255,82,51,.16), var(--panel2) 60%);
}
.table-card[data-mine="1"]{outline:2px solid var(--accent); outline-offset:1px}
.table-head{display:flex; align-items:center; justify-content:space-between; font-size:12px; color:var(--ink-dim)}
.table-head b{color:var(--ink); font-size:13px}
.seat-dots{display:grid; grid-template-columns:1fr 1fr; gap:6px}
.seat-dot{
  height:26px; border-radius:8px; background:#20232C; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:10px; color:var(--ink-dim); overflow:hidden;
}
.seat-dot[data-filled="1"]{background:var(--accent-dim); border-color:var(--accent); color:#FFD9C9}
.seat-dot[data-mine="1"]{outline:1.5px solid var(--accent)}

/* ---------- rail ---------- */
.pane-rail{display:flex; flex-direction:column; gap:12px}
.card{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px}
.card h2{font-size:15px}
.seat-status{color:var(--ink-dim); font-size:13px; line-height:1.6}
#claimBtn{margin-top:10px; width:100%}
.stats{display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin:0}
.stats > div{background:var(--panel2); border-radius:10px; padding:8px 6px; text-align:center}
.stats dt{font-size:11px; color:var(--ink-dim); margin-bottom:2px}
.stats dd{margin:0; font-family:var(--font-mono); font-weight:700; font-size:13px}
.rules-card summary{cursor:pointer; font-family:var(--font-display); font-size:15px; list-style:none}
.rules-card summary::-webkit-details-marker{display:none}
.rules-card summary::after{content:'  ▾'; color:var(--ink-dim)}
.rules-card[open] summary::after{content:'  ▴'}
#rulesBody{margin-top:10px; display:flex; flex-direction:column; gap:10px}
#rulesBody .tiao h3{font-size:13px; margin:0 0 3px; color:var(--accent)}
#rulesBody .tiao p{margin:0; font-size:12.5px; color:var(--ink-dim); line-height:1.6}
.tape{display:flex; flex-direction:column; gap:6px; max-height:340px; overflow:auto}
.tape .empty{color:var(--ink-dim); font-size:12.5px; margin:0}
.tape .row{display:flex; align-items:center; gap:8px; font-size:12px; border-bottom:1px dashed var(--line); padding-bottom:6px}
.tape .row:last-child{border-bottom:none; padding-bottom:0}
.tape .pill{border-radius:999px; padding:2px 8px; font-size:11px; font-weight:700; white-space:nowrap}
.tape .pill--sat{background:#2b3a4d; color:#9FC9FF}
.tape .pill--served{background:var(--accent-dim); color:#FFD9C9}
.tape .pill--settled{background:#3a2f1c; color:#F2C879}
.tape .who{color:var(--ink-dim); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tape .t{color:var(--ink-dim); font-family:var(--font-mono); font-size:11px; white-space:nowrap}

/* ---------- floating CA pill (bar: mid — floats clear of every edge, never a top/bottom/side dock) ---------- */
.buypill{
  position:fixed; left:50%; bottom:190px; transform:translateX(-50%); z-index:40;
  display:flex; align-items:center; gap:8px; justify-content:center; flex-wrap:nowrap;
  background:rgba(32,35,44,.94); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line); border-radius:999px; padding:9px 10px 9px 18px;
  box-shadow:0 16px 40px -10px rgba(0,0,0,.65), 0 0 0 1px rgba(255,82,51,.08);
  width:min(92vw, 900px); pointer-events:auto;
}
.buypill-k{font-size:11px; color:var(--ink-dim); white-space:nowrap}
.buypill code{font-size:12px; flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pill-copy{
  border:none; background:var(--accent); color:#1A0D08; border-radius:999px; padding:6px 12px;
  font:inherit; font-weight:700; font-size:12px; cursor:pointer; white-space:nowrap;
}
.pill-copy:disabled{opacity:.4; cursor:not-allowed}
.pill-gm{font-size:12px; color:var(--ink-dim); text-decoration:none; white-space:nowrap; border-left:1px solid var(--line); padding-left:8px}
.pill-gm:hover{color:var(--ink)}

/* ---------- footer ---------- */
.foot{max-width:1160px; margin:8px auto 0; padding:18px 14px 28px; border-top:1px solid var(--line); font-size:12.5px; color:var(--ink-dim)}
.foot-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:8px}
.foot-brand{display:flex; align-items:center; gap:6px; text-decoration:none; color:var(--ink); font-family:var(--font-display); font-size:16px}
.foot-brand img{border-radius:6px}
.foot-row--links a{text-decoration:none; color:var(--ink-dim)}
.foot-row--links a:hover{color:var(--ink)}
.foot-row--links a.off{display:none}
.foot-k{color:var(--ink-dim); margin-right:6px}
.foot-note{margin:6px 0 0}

/* ---------- modal ---------- */
.zhao{position:fixed; inset:0; background:rgba(10,10,12,.65); display:flex; align-items:flex-end; justify-content:center; z-index:60}
.zhao-he{background:var(--panel); border:1px solid var(--line); border-radius:16px 16px 0 0; width:100%; max-width:480px; padding:16px; max-height:80vh; overflow:auto}
.zhao-tou{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px}
.zhao-tou b{font-family:var(--font-display); font-size:18px}
.zhao-tou button{background:none; border:none; color:var(--ink-dim); font-size:22px; cursor:pointer}
.paopao{
  position:fixed; left:50%; bottom:96px; transform:translateX(-50%); background:#111319; color:var(--ink);
  border:1px solid var(--line); padding:10px 16px; border-radius:12px; font-size:13px; z-index:80;
  box-shadow:0 8px 24px -6px rgba(0,0,0,.6); max-width:90vw; text-align:center;
}

/* ---------- responsive: phone -> tablet -> desktop recompose ---------- */
@media (min-width:560px){
  .tables{grid-template-columns:repeat(3, 1fr)}
}
@media (min-width:720px){
  .tables{grid-template-columns:repeat(4, 1fr)}
  .floor-title h2{font-size:30px}
}
@media (min-width:1000px){
  .split{ flex-direction:row; align-items:flex-start; gap:20px; padding-top:8px }
  .pane-floor{flex:1 1 auto}
  .pane-rail{flex:0 0 360px; position:sticky; top:16px}
  .tables{grid-template-columns:repeat(5, 1fr)}
  .floor-title h2{font-size:34px}
  .table-card{padding:12px}
}
@media (max-width:389px){
  .buypill code{max-width:26vw}
}