/* 夜市 Yeshi — a stall row fanned like a night market, a lacquer notice pinned above it, a dock at the thumb. */
:root{
  --bg:#2F6B5E; --bg2:#276056; --panel:#245A50; --ink:#F4EEE6; --ink-dim:#CFE4DC;
  --lacquer:#A8352A; --lacquer-ink:#FCEBD8; --accent:#FF7A1A; --gold:#FFC24B;
  --line:rgba(244,238,230,.16); --shadow:0 18px 40px rgba(0,0,0,.35);
  --mono:'IBM Plex Mono',ui-monospace,monospace; --disp:'Noto Sans SC',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink); font-family:var(--disp);
  padding-bottom:96px; min-height:100vh;
  background-image:radial-gradient(circle at 15% 0%, rgba(255,194,75,.10), transparent 45%),
                    radial-gradient(circle at 85% 10%, rgba(255,122,26,.08), transparent 40%);
}
a{color:inherit; text-decoration:none}
code,.num{font-family:var(--mono)}
button{font-family:inherit; cursor:pointer}
#view{display:block; max-width:1180px; margin:0 auto; padding:22px 16px 40px}

/* ---------- hero: the posted notice (lacquer paper) ---------- */
.notice{
  background:linear-gradient(180deg,var(--lacquer),#8E2B21);
  color:var(--lacquer-ink); border-radius:14px; padding:22px 20px 20px;
  box-shadow:var(--shadow); position:relative; overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
}
.notice::before{content:"";position:absolute; inset:8px; border:1px dashed rgba(252,235,216,.28); border-radius:8px; pointer-events:none}
.notice .tag{display:inline-block; font-family:var(--mono); font-size:11px; letter-spacing:.14em; padding:3px 8px; background:rgba(252,235,216,.14); border-radius:999px; margin-bottom:10px}
.notice .lead{font-weight:900; font-size:26px; line-height:1.25; margin:0 0 6px; letter-spacing:.01em}
.notice .sub{margin:0 0 14px; font-size:14.5px; line-height:1.6; color:var(--lacquer-ink); opacity:.92}
.notice .rules{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
.notice .rules li{display:flex; align-items:flex-start; gap:10px; font-size:13.5px; line-height:1.55; padding:9px 10px; background:rgba(0,0,0,.12); border-radius:8px}
.notice .rules .rn{flex:0 0 26px; width:26px; height:26px; font-family:var(--mono); font-weight:700; color:var(--gold); background:rgba(0,0,0,.25); border-radius:6px; display:flex; align-items:center; justify-content:center}
.notice .rules .rt{flex:1 1 auto; min-width:0}
.notice .rules b{color:var(--gold); margin-right:4px}

/* ---------- layout: recomposes past ~1000px ---------- */
.layout{display:grid; gap:18px; margin-top:18px}
@media (min-width:1000px){ .layout{grid-template-columns:1.55fr 1fr; align-items:start} }

/* ---------- card-stack: 12 stalls, live round on top, settled rounds receding behind ---------- */
.stackWrap{position:relative}
.roundCard{
  background:var(--panel); border-radius:16px; padding:16px; box-shadow:var(--shadow);
  border:1px solid var(--line); position:relative;
}
.roundCard.behind{position:absolute; top:0; left:0; right:0; z-index:-1; opacity:.55; filter:saturate(.7)}
.roundCard.behind.b1{transform:translateY(10px) rotate(-1.2deg) scale(.985)}
.roundCard.behind.b2{transform:translateY(20px) rotate(1.4deg) scale(.97); opacity:.35}
.roundHead{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:12px}
.roundHead .t{font-weight:900; font-size:15px; letter-spacing:.02em}
.roundHead .t small{display:block; font-size:11px; font-weight:500; color:var(--ink-dim); letter-spacing:.06em; margin-top:2px}
.roundHead .clock{font-family:var(--mono); font-size:12.5px; color:var(--gold); background:rgba(255,194,75,.12); padding:4px 9px; border-radius:999px; white-space:nowrap}
.roundHead .clock.settled{color:var(--ink-dim); background:rgba(244,238,230,.08)}
.potLine{font-family:var(--mono); font-size:13px; color:var(--ink-dim); margin-bottom:12px}
.potLine b{color:var(--gold); font-size:15px}

.stalls{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
@media (min-width:560px){ .stalls{grid-template-columns:repeat(6,1fr)} }
.stall{
  background:rgba(0,0,0,.18); border:1px solid var(--line); border-radius:10px; padding:9px 6px;
  text-align:center; display:flex; flex-direction:column; gap:4px; min-height:70px; justify-content:center;
  position:relative; transition:transform .15s ease, box-shadow .15s ease;
}
.stall.tappable{cursor:pointer}
.stall.tappable:active{transform:scale(.95)}
.stall .n{font-family:var(--mono); font-size:11px; color:var(--ink-dim)}
.stall .v{font-family:var(--mono); font-weight:700; font-size:13px}
.stall.mine{outline:2px solid var(--accent)}
.stall.won{background:linear-gradient(180deg, rgba(255,194,75,.28), rgba(255,122,26,.14)); border-color:var(--gold); animation:lift .5s ease}
.stall.lost{opacity:.4}
.stall.empty .v{color:var(--ink-dim); font-weight:500}
@keyframes lift{ from{transform:translateY(6px) scale(.92)} to{transform:translateY(0) scale(1)} }

.actions{display:flex; gap:10px; margin-top:14px}
.btn{border:none; border-radius:10px; padding:12px 16px; font-weight:700; font-size:14px; flex:1}
.btn.pri{background:var(--accent); color:#1A0E00}
.btn.pri:disabled{opacity:.4; cursor:default}
.btn.ghost{background:transparent; border:1px solid var(--line); color:var(--ink)}
.hint{font-size:12px; color:var(--ink-dim); margin-top:10px; line-height:1.5}

/* ---------- side rail: stats + tape (desktop second column) ---------- */
.rail{display:grid; gap:14px}
.card{background:var(--panel); border-radius:14px; padding:16px; border:1px solid var(--line)}
.card h3{margin:0 0 10px; font-size:13px; letter-spacing:.06em; color:var(--ink-dim); font-weight:700}
.statRow{display:flex; justify-content:space-between; padding:6px 0; font-size:13.5px; border-bottom:1px solid var(--line)}
.statRow:last-child{border-bottom:none}
.statRow b{font-family:var(--mono)}
.tapeRow{display:grid; grid-template-columns:auto 1fr auto; gap:8px; align-items:center; padding:7px 0; border-bottom:1px solid var(--line); font-size:12.5px}
.tapeRow:last-child{border-bottom:none}
.tapeRow .pill{font-family:var(--mono); font-size:10.5px; background:rgba(255,122,26,.18); color:var(--accent); padding:2px 6px; border-radius:6px}
.tapeRow .who{color:var(--ink-dim)}
.tapeRow .amt{font-family:var(--mono); text-align:right}
.empty{color:var(--ink-dim); font-size:13px; padding:10px 0}

/* ---------- ledger / wallet / how (secondary views) ---------- */
.pageHead{margin:4px 0 16px}
.pageHead h1{font-size:22px; margin:0 0 6px}
.pageHead p{margin:0; color:var(--ink-dim); font-size:13.5px}
.prose h3{font-size:15px; margin:18px 0 6px; color:var(--gold)}
.prose p{font-size:13.5px; line-height:1.7; color:var(--ink-dim); margin:0 0 10px}

/* ---------- CA dock: fixed bottom, on screen at every width ---------- */
.ca-dock{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  background:rgba(15,30,27,.92); backdrop-filter:blur(10px);
  border-top:1px solid var(--line); box-shadow:0 -12px 30px rgba(0,0,0,.3);
}
.dockMark{display:flex; align-items:center; gap:7px; flex:0 0 auto}
.dockMark img{width:26px; height:26px; border-radius:6px; display:block}
.dockMark b{font-size:13px; font-weight:900; display:none}
.dockCa{display:flex; align-items:center; gap:8px; flex:1 1 auto; min-width:0; background:rgba(0,0,0,.22); border-radius:10px; padding:7px 10px}
.dockK{font-size:10.5px; color:var(--ink-dim); flex:0 0 auto}
#caText{font-size:11.5px; flex:1 1 auto; min-width:0; overflow-x:auto; white-space:nowrap; color:var(--ink)}
.dockCa button{background:var(--accent); color:#1A0E00; border:none; border-radius:7px; padding:6px 9px; font-size:11.5px; font-weight:700; flex:0 0 auto}
.dockBuy{font-size:11.5px; color:var(--gold); flex:0 0 auto; white-space:nowrap; text-decoration:underline}
.dockWallet{background:transparent; border:1px solid var(--line); color:var(--ink); border-radius:9px; padding:7px 11px; font-size:12px; flex:0 0 auto; white-space:nowrap}
.dockWallet.on{border-color:var(--accent); color:var(--accent)}
@media (min-width:560px){ .dockMark b{display:inline} }

/* ---------- stake sheet / toast ---------- */
#modal[hidden]{display:none}
#modal{position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.55); display:flex; align-items:flex-end; justify-content:center}
@media (min-width:640px){ #modal{align-items:center} }
.chit{background:var(--panel); border:1px solid var(--line); border-radius:16px 16px 0 0; width:100%; max-width:440px; padding:16px; box-shadow:var(--shadow)}
@media (min-width:640px){ .chit{border-radius:16px} }
.chitHead{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px}
.chitHead button{background:none; border:none; color:var(--ink); font-size:22px; line-height:1}
.stakeBox .fine{font-size:12.5px; color:var(--ink-dim); line-height:1.6; margin-bottom:10px}
.presets{display:flex; gap:8px; margin-bottom:8px}
.presets button{flex:1; background:rgba(0,0,0,.2); border:1px solid var(--line); color:var(--ink); border-radius:8px; padding:8px; font-size:12.5px}
.presets button.on{border-color:var(--accent); color:var(--accent)}
#amt{width:100%; background:rgba(0,0,0,.25); border:1px solid var(--line); color:var(--ink); border-radius:8px; padding:11px; font-size:16px; font-family:var(--mono); margin-bottom:8px}
.warn{color:#FFB4A0; font-size:12px; margin-bottom:8px}
.bubble{position:fixed; left:50%; bottom:110px; transform:translateX(-50%); background:#111; color:#fff; padding:10px 16px; border-radius:999px; font-size:13px; z-index:80; box-shadow:0 8px 20px rgba(0,0,0,.4)}

/* ---------- no-overflow guardrails ---------- */
img{max-width:100%}