:root {
    --ink: #f4efe4;
    --dim: #9aa3ad;
    --gold: #ffc857;
    --red: #ff4b3a;
    --panel: rgba(7, 11, 16, 0.9);
    --line: rgba(255, 255, 255, 0.16);
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; height: 100%; overflow: hidden; background: #8ebfe0; }
  body {
    font-family: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", sans-serif;
    color: var(--ink);
  }
  button, .pick { font: inherit; cursor: pointer; appearance: none; }
  #c { display: block; width: 100%; height: 100%; }
  #flash { position: absolute; inset: 0; background: #ffd7b0; opacity: 0; pointer-events: none; }
  #dim {
    position: absolute; inset: 0; z-index: 2; display: none; pointer-events: none;
    background: rgba(4, 8, 12, 0.45);
  }
  #dim.night {
    z-index: 8; display: flex; align-items: center; justify-content: center;
    background: #05070c; color: #efe6d6; font-size: 28px; letter-spacing: 0.24em;
    pointer-events: auto;
  }
  #hud { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
  #vignette {
    position: absolute; inset: 0; pointer-events: none;
    box-shadow: inset 0 0 90px rgba(0, 0, 0, 0.38);
  }
  h1 { font-size: 28px; line-height: 1.1; margin: 0 0 8px; letter-spacing: 0.04em; }
  h2 { font-size: 13px; margin: 0 0 8px; letter-spacing: 0.16em; color: var(--gold); font-weight: 700; }
  .brand { color: var(--red); letter-spacing: 0.22em; font-size: 12px; font-weight: 800; margin-bottom: 6px; }
  p { margin: 0 0 8px; line-height: 1.45; }
  .muted { color: var(--dim); font-size: 13px; }
  kbd {
    display: inline-block; min-width: 1.4em; text-align: center;
    font-family: inherit; font-size: 12px; font-weight: 800; line-height: 1.5;
    color: #1a120c; background: var(--gold); padding: 0 6px;
  }
  .screen { display: none; position: absolute; z-index: 4; color: var(--ink); }
  .screen.open { display: block; }
  .actions { display: flex; gap: 10px; margin-top: 16px; }
  button, .pick {
    color: var(--ink); background: #182028; border: 1px solid #3a4654; padding: 10px 12px;
  }
  button:hover, .pick:hover { border-color: var(--gold); }
  button:disabled { opacity: 0.38; cursor: default; }
  button.primary, #btn-work, #go, #resume, #back, button.pick.on {
    background: var(--red); color: #1a0907; border-color: #ffb0a6; font-weight: 800;
  }
  button.ghost { background: transparent; color: var(--dim); border-color: transparent; }
  .row { display: flex; gap: 8px; flex-wrap: wrap; }

  #title.open {
    display: flex; flex-direction: column; justify-content: flex-end;
    inset: 0; padding: 0 0 28px; pointer-events: none;
    background: linear-gradient(to top, rgba(4, 8, 12, 0.88) 0%, rgba(4, 8, 12, 0.2) 46%, transparent 68%);
  }
  #title .title-block { pointer-events: auto; width: min(680px, calc(100% - 64px)); margin: 0 0 18px 36px; }
  #title .brand { color: var(--red); letter-spacing: 0.28em; font-size: 13px; font-weight: 800; margin-bottom: 8px; }
  #title h1 { font-size: 58px; font-weight: 900; color: #fff8ee; text-shadow: 0 3px 0 #7a1c12; }
  #title p { font-size: 16px; max-width: 460px; color: #efe6d6; }
  #title .actions { margin-top: 14px; align-items: center; }
  #btn-work { padding: 14px 28px; font-size: 22px; letter-spacing: 0.12em; }
  #btn-help { padding: 14px 18px; font-size: 18px; letter-spacing: 0.08em; }
  #howto.open {
    left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5;
    width: min(640px, calc(100% - 32px)); max-height: calc(100% - 36px); overflow: auto;
    padding: 22px 22px 18px; background: var(--panel); border: 1px solid rgba(255, 200, 87, 0.45);
    pointer-events: auto;
  }
  #howto p { font-size: 15px; line-height: 1.55; color: #efe6d6; }
  #howto #keys { margin: 12px 0 0; }
  #title button.ghost {
    color: #efe6d6; border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(7, 11, 16, 0.45); padding: 14px 18px; font-size: 16px;
  }
  #keys, #pause-help { display: flex; flex-wrap: wrap; gap: 8px 14px; pointer-events: auto; }
  #keys { margin: 0 36px; }
  .kh { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #efe6d6; }

  #van.open {
    display: flex; flex-direction: column;
    left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(960px, calc(100% - 40px)); max-height: calc(100% - 36px);
    overflow: hidden; padding: 18px 18px 14px;
    background: var(--panel); border: 1px solid rgba(255, 200, 87, 0.45);
  }
  #vanhead { display: flex; justify-content: space-between; gap: 12px; align-items: flex-end; }
  #money { font-size: 34px; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; }
  #vangrid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 16px; margin-top: 14px; overflow: auto; min-height: 0; }
  @media (max-width: 800px) { #vangrid { grid-template-columns: 1fr; } #title h1 { font-size: 40px; } }
  .card {
    border: 1px solid var(--line); padding: 10px 12px; margin-bottom: 8px;
    background: rgba(255, 255, 255, 0.04); cursor: pointer;
  }
  .card.on { border-color: var(--gold); background: rgba(255, 200, 87, 0.12); }
  .card.locked { opacity: 0.48; cursor: default; }
  #roles { display: flex; gap: 8px; margin: 0 0 8px; }
  #roles button { flex: 1; text-align: left; min-width: 0; }
  #roles button small { display: block; color: var(--dim); font-size: 11px; font-weight: 500; margin-top: 4px; }
  .ocard { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
  .ocard em { font-style: normal; color: var(--gold); font-weight: 800; }
  .shop button {
    display: grid; grid-template-columns: 1fr auto; gap: 2px 12px;
    width: 100%; text-align: left; margin-bottom: 8px;
  }
  .shop button small { grid-column: 1 / -1; color: var(--dim); font-size: 12px; }
  .shop button .sprice { color: var(--gold); font-weight: 800; }
  .shop button.owned { border-color: rgba(255, 200, 87, 0.35); }
  #van .actions { align-items: center; justify-content: space-between; }
  #go { min-width: 140px; padding: 12px 28px; font-size: 18px; letter-spacing: 0.18em; }

  #pause.open, #result.open {
    left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(520px, calc(100% - 32px)); padding: 22px 22px 18px;
    background: var(--panel); border: 1px solid rgba(255, 200, 87, 0.45);
  }
  #pause-help { margin-top: 8px; }
  .stamp {
    display: inline-block; margin-left: 8px; padding: 3px 8px;
    background: var(--red); color: #1a0907; font-weight: 800; letter-spacing: 0.14em; font-size: 14px;
    vertical-align: middle;
  }
  table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 15px; }
  td { padding: 4px 0; }
  td.r { text-align: right; font-weight: 700; }
  tr.line td { border-top: 1px solid var(--line); padding-top: 8px; }
  tr.neg td { color: #ff9b8c; }

  #obj, #dogbox, #knocks {
    background: var(--panel); border: 1px solid var(--line);
  }
  #obj { position: absolute; left: 104px; top: 16px; padding: 10px 14px; min-width: 220px; max-width: 420px; border-left: 3px solid var(--red); }
  #obj.broken { background: rgba(90, 16, 10, 0.94); border-color: #ff4b3a; }
  #obj.broken b { color: #ff6a58; font-size: 28px; letter-spacing: 0.16em; }
  #bag-btn {
    display: none; position: absolute; left: 18px; top: 16px; z-index: 5; pointer-events: auto;
    width: 72px; height: 40px; padding: 0; font-weight: 800; letter-spacing: 0.08em;
  }
  #bag-btn.open { border-color: var(--gold); color: var(--gold); }
  #bag {
    display: none; position: absolute; left: 18px; top: 64px; z-index: 6; pointer-events: auto;
    width: 308px; max-height: min(520px, calc(100% - 88px)); overflow: hidden;
    background: #12181f; border: 1px solid rgba(255, 200, 87, 0.55); padding: 12px 14px;
    flex-direction: column;
  }
  #bag.open { display: flex; }
  #bag .bag-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
  #bag .bag-head b { color: var(--gold); letter-spacing: 0.16em; font-size: 14px; }
  #bag-close { padding: 4px 10px; color: var(--dim); background: transparent; border-color: transparent; }
  #bag-list {
    display: grid; grid-template-columns: repeat(4, 64px); gap: 8px; align-content: start;
    position: relative; overflow-x: hidden; overflow-y: auto;
    max-height: min(288px, calc(100vh - 280px));
  }
  #bag-list .slot {
    position: relative;
    width: 64px; height: 64px; padding: 4px 4px 14px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 4px;
    background: #1c2630; border: 1px solid #3a4654; color: var(--ink);
  }
  #bag-list .slot i { width: 34px; height: 28px; display: block; background: none; }
  #bag-list .slot i svg { width: 34px; height: 28px; display: block; }
  #bag-list .slot b { font-size: 10px; font-weight: 800; line-height: 1.05; letter-spacing: 0; }
  #bag-list .slot em {
    position: absolute; right: 3px; top: 2px;
    font-style: normal; font-size: 11px; font-weight: 800; color: #fff8ee;
    text-shadow: 0 1px 0 #000;
  }
  #bag-list .slot.on { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); background: #2a2416; }
  #bag-list .slot.empty { background: #10161c; }
  #bag-detail { margin-top: 10px; min-height: 34px; color: #efe6d6; font-size: 13px; line-height: 1.4; }
  #bag-hint { margin-top: 4px; color: var(--gold); font-size: 12px; letter-spacing: 0.12em; flex: none; }
  #bag-detail { flex: none; }
  #recycle-list { display: none; margin-top: 8px; max-height: 220px; overflow: auto; }
  #recycle-list div {
    display: flex; justify-content: space-between; gap: 12px;
    padding: 5px 8px; border-left: 3px solid transparent; font-size: 14px;
  }
  #recycle-list div.on { border-left-color: var(--gold); color: var(--gold); }
  #recycle-list b { font-weight: 800; }
  #sea {
    display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
    background: linear-gradient(to bottom, rgba(12, 70, 120, 0.15), rgba(8, 48, 90, 0.72));
  }
  #sea.under {
    background: radial-gradient(ellipse at 50% 46%, rgba(16, 130, 160, 0.04) 0%, rgba(8, 70, 100, 0.28) 58%, rgba(3, 28, 48, 0.62) 100%);
  }
  #obj b { display: block; font-size: 18px; }
  #obj span { font-size: 12px; color: var(--dim); }
  #meta { position: absolute; left: 18px; top: 78px; display: none; gap: 6px; flex-wrap: wrap; max-width: 460px; }
  #meta i {
    font-style: normal; background: var(--panel); border: 1px solid var(--line);
    padding: 4px 8px; font-size: 12px; letter-spacing: 0.04em;
  }
  #meta i.warn { border-color: var(--red); color: #ffb0a6; }
  #meta i.ok { border-color: #7dcea0; color: #d8ffe8; }
  #bat {
    position: absolute; left: 50%; top: 58px; transform: translateX(-50%);
    width: 160px; height: 8px; display: none;
    background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 255, 255, 0.28);
  }
  #bat b { display: block; height: 100%; width: 0; background: #7eb6ff; }
  #map {
    position: absolute; right: 16px; top: 58px; width: 168px; height: 168px;
    display: none; background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.72); border-radius: 50%;
    box-shadow: 0 0 0 5px rgba(7, 11, 16, 0.55);
  }
  #dogbox {
    position: absolute; right: 18px; top: 238px;
    display: flex; gap: 10px; align-items: center; padding: 8px 10px 8px 14px;
  }
  #dogbox[data-state="alert"] { border-color: var(--red); }
  #dogbox[data-state="investigate"], #dogbox[data-state="toy"] { border-color: var(--gold); }
  #dogbox[data-state="held"] { border-color: #7eb6ff; }
  #dogstate { font-size: 16px; }
  #doghint { font-size: 12px; color: var(--dim); margin-top: 2px; }
  #compass {
    width: 48px; height: 48px; border: 1px solid rgba(255, 200, 87, 0.7);
    border-radius: 50%; position: relative; background: rgba(0, 0, 0, 0.35);
  }
  #compass i {
    position: absolute; left: 50%; top: 6px; width: 0; height: 0; margin-left: -5px;
    border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 14px solid var(--gold);
    transform-origin: 50% 18px;
  }
  #status {
    position: absolute; top: 10px; right: 16px;
    display: flex; align-items: baseline; gap: 14px;
    padding: 6px 14px; background: var(--panel); border: 1px solid var(--line);
    font-variant-numeric: tabular-nums;
  }
  #clock { color: var(--dim); font-size: 14px; letter-spacing: 0.04em; }
  #wallet { font-size: 20px; font-weight: 800; color: var(--gold); }
  #wallet.debt { color: #ff9b8c; }
  #knocks {
    position: absolute; left: 50%; top: 16px; transform: translateX(-50%);
    display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 12px; letter-spacing: 0.12em; color: var(--dim);
  }
  #pip { display: flex; gap: 5px; }
  #pip i { width: 14px; height: 14px; background: var(--gold); transform: rotate(45deg); }
  #pip i.dead { background: #3a4148; }
  #toast {
    position: absolute; left: 18px; top: 124px; max-width: 380px; display: none;
    background: rgba(7, 11, 16, 0.92); color: #ffe7c2; border-left: 3px solid var(--gold);
    padding: 8px 12px; font-size: 14px; font-weight: 650;
  }
  #clerk {
    position: absolute; left: 50%; bottom: 176px; transform: translateX(-50%);
    width: min(540px, calc(100% - 48px)); display: none; pointer-events: auto;
    background: rgba(7, 11, 16, 0.92); border: 1px solid rgba(255, 200, 87, 0.55);
    padding: 10px 14px;
  }
  #clerk b { display: block; color: var(--gold); letter-spacing: 0.16em; font-size: 12px; margin-bottom: 4px; }
  #clerk span { display: block; font-size: 16px; line-height: 1.45; font-weight: 650; }
  #clerk #recycle-list span, #clerk #recycle-list b { display: inline; margin: 0; letter-spacing: 0; font-size: 14px; color: inherit; }
  #hud.gauges #prompt { bottom: 200px; max-width: min(720px, calc(100% - 48px)); }
  #prompt {
    position: absolute; left: 50%; bottom: 122px; transform: translateX(-50%);
    display: none; align-items: center; gap: 4px;
    background: rgba(7, 11, 16, 0.88); border: 1px solid var(--line);
    padding: 8px 14px; font-size: 15px; font-weight: 700; text-align: center;
    max-width: min(760px, calc(100% - 32px)); white-space: normal;
  }
  #prompt kbd { margin: 0 6px 0 8px; }
  #prompt kbd:first-child { margin-left: 0; }
  #hotbar {
    position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
    display: flex; gap: 8px;
  }
  #hotbar div {
    position: relative; width: 86px; height: 86px;
    background: rgba(7, 11, 16, 0.86); border: 1px solid rgba(255, 255, 255, 0.18);
  }
  #hotbar div.on { border-color: var(--gold); background: rgba(48, 32, 10, 0.92); }
  #hotbar em { position: absolute; left: 6px; top: 4px; font-style: normal; font-size: 12px; color: var(--dim); }
  #hotbar b { position: absolute; right: 6px; top: 4px; font-size: 14px; }
  #hotbar span { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font-size: 13px; }
  .ico { display: block; margin: 26px auto 0; }
  .ico.cracker { width: 12px; height: 26px; background: #e23b2f; box-shadow: inset 0 5px 0 #f2d36b; }
  .ico.bone { width: 28px; height: 8px; margin-top: 34px; background: #f4efe4; border-radius: 8px; }
  .ico.toy { width: 18px; height: 18px; margin-top: 30px; background: #3d8dff; border-radius: 50%; }
  .ico.box { width: 22px; height: 16px; margin-top: 30px; background: #c4924a; }
  #cross {
    position: absolute; left: 50%; top: 50%; width: 18px; height: 18px;
    transform: translate(-50%, -50%);
    background:
      linear-gradient(#fff, #fff) center / 2px 100% no-repeat,
      linear-gradient(#fff, #fff) center / 100% 2px no-repeat;
  }
  #cluster {
    position: absolute; left: 16px; bottom: 14px;
    display: none; align-items: center; gap: 4px;
    pointer-events: none;
  }
  #fuelg { position: relative; width: 92px; height: 92px; }
  #fuelg canvas { width: 100%; height: 100%; display: block; }
  #fuel-needle {
    position: absolute; left: 50%; top: 50%; width: 2px; height: 30px;
    margin-left: -1px; margin-top: -28px; background: #fff8ee;
    transform-origin: 50% 93%; border-radius: 2px 2px 0 0;
  }
  #fuel-needle::after {
    content: ''; position: absolute; left: 50%; bottom: -5px;
    width: 8px; height: 8px; margin-left: -4px; border-radius: 50%;
    background: #fff8ee;
  }
  #fuelg.low #fuel-needle, #fuelg.low #fuel-needle::after { background: #ffb15a; }
  #fuelg.empty #fuel-needle, #fuelg.empty #fuel-needle::after { background: #ff4b3a; }
  #speedo {
    position: relative; width: 168px; height: 168px; pointer-events: none;
  }
  #speedo canvas { width: 100%; height: 100%; display: block; }
  #speedo-needle {
    position: absolute; left: 50%; top: 50%; width: 3px; height: 52px;
    margin-left: -1.5px; margin-top: -52px; background: #ff4b3a;
    transform-origin: 50% 100%; border-radius: 2px 2px 0 0;
  }
  #speedo-needle::after {
    content: ''; position: absolute; left: 50%; bottom: -7px;
    width: 14px; height: 14px; margin-left: -7px; border-radius: 50%;
    background: #ff4b3a; box-shadow: 0 0 0 3px rgba(7, 11, 16, 0.9);
  }
  #speedo-read {
    position: absolute; left: 0; right: 0; top: 64%;
    text-align: center; font-size: 26px; font-weight: 900; line-height: 1;
    color: #fff8ee; font-variant-numeric: tabular-nums;
  }
  #speedo > span {
    position: absolute; left: 0; right: 0; top: 82%;
    text-align: center; font-size: 11px; letter-spacing: 0.16em; color: var(--gold);
  }
  #brake {
    position: absolute; right: 28px; top: 50%; transform: translateY(-50%);
    width: 36px; height: 240px; display: none;
    background: rgba(7, 11, 16, 0.88); border: 1px solid rgba(255, 255, 255, 0.28);
  }
  #brake i { position: absolute; left: 3px; right: 3px; bottom: 3px; height: 0; background: #7dcea0; }
  #brake b {
    position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%);
    margin-bottom: 8px; white-space: nowrap; font-size: 14px; color: #fff8ee;
  }
  #brake em {
    position: absolute; left: -8px; right: -8px; height: 2px; background: #ff4b3a;
    bottom: calc(3px + (1612 / 1800) * (100% - 6px));
  }
  #brake-warn {
    position: absolute; left: 50%; top: 22%; transform: translateX(-50%);
    display: none; text-align: center; padding: 16px 36px; pointer-events: none;
    background: rgba(92, 14, 8, 0.94); border: 3px solid #ff4b3a;
    box-shadow: 0 0 0 8px rgba(255, 75, 58, 0.28);
    animation: brakePulse 1s ease-in-out infinite;
  }
  #brake-warn b {
    display: block; font-size: 42px; font-weight: 900; letter-spacing: 0.18em; color: #ffd4cc;
  }
  #brake-warn span {
    display: block; margin-top: 8px; font-size: 20px; font-weight: 800;
    letter-spacing: 0.12em; color: #fff8ee;
  }
  #brake-warn.hit { animation-duration: 0.32s; }
  @keyframes brakePulse {
    50% { border-color: #fff4f2; background: rgba(168, 22, 12, 0.96); }
  }
  #fishbar {
    position: absolute; left: 50%; top: 36%; transform: translate(-50%, -50%);
    width: min(520px, calc(100% - 48px)); display: none; text-align: center; pointer-events: none;
  }
  #fishbar b {
    display: block; font-size: 22px; letter-spacing: 0.14em; color: #fff8ee;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.65);
  }
  #fishbar .lane {
    position: relative; height: 28px; margin: 22px 6px 8px;
    background: rgba(7, 11, 16, 0.92); border: 2px solid rgba(255, 255, 255, 0.5);
  }
  #fishbar .lane i {
    position: absolute; top: 4px; bottom: 4px; background: #3ecf6e;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.28);
  }
  #fish-needle {
    position: absolute; top: -14px; width: 3px; height: 30px; margin-left: -1.5px;
    background: currentColor; color: #ffd56a;
  }
  #fish-needle::before {
    content: ''; position: absolute; left: -6px; top: 0;
    border-left: 8px solid transparent; border-right: 8px solid transparent;
    border-top: 12px solid currentColor;
  }
  #fishbar span { display: block; margin-top: 6px; letter-spacing: 0.16em; color: var(--gold); font-size: 14px; font-weight: 800; }
  #fuse {
    position: absolute; left: 50%; top: 56%; transform: translateX(-50%);
    width: 180px; height: 8px; background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(255,255,255,0.25); display: none;
  }
  #fuse i { display: block; height: 100%; width: 0; background: #ff4b3a; }
  #flight {
    position: absolute; left: 50%; top: 12%; transform: translateX(-50%);
    text-align: center; display: none; text-shadow: 0 3px 0 rgba(0,0,0,0.45);
  }
  #flight b { display: block; font-size: 84px; line-height: 0.9; font-weight: 900; font-variant-numeric: tabular-nums; color: #fff8ee; }
  #flight span { font-size: 16px; letter-spacing: 0.2em; color: var(--gold); }
  #phone { display: none; position: absolute; inset: 0; z-index: 4; pointer-events: none; }
  #phone.open { display: block; }
  #phone .hole {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(420px, 78vw); height: min(760px, 90vh); border-radius: 36px;
    border: 12px solid #141018; box-shadow: 0 0 0 100vmax rgba(6, 8, 12, 0.82);
  }
  #phone .cap {
    position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%);
    width: min(420px, 78vw); text-align: center; text-shadow: 0 2px 0 #000;
  }
  #phone .cap b { display: block; font-size: 22px; color: #fff8ee; }
  #phone .cap span { display: block; margin-top: 4px; color: #ffc857; font-size: 14px; }
  #lockhint {
    position: absolute; inset: 0; display: none; z-index: 5; cursor: pointer;
  }
  #lockhint div {
    position: absolute; left: 50%; bottom: 128px; transform: translateX(-50%);
    background: var(--panel); border: 1px solid var(--gold); padding: 12px 18px;
    font-size: 18px; font-weight: 800; letter-spacing: 0.08em;
  }
  #bid {
    position: absolute; left: 18px; top: 68px; bottom: 18px; width: 318px;
    display: none; flex-direction: column; gap: 8px; overflow: hidden;
    pointer-events: auto; z-index: 4; background: transparent;
  }
  #bid.on { display: flex; }
  #bid.lot { bottom: auto; }
  .bid-board {
    background: linear-gradient(180deg, rgba(36, 22, 14, 0.96), rgba(14, 10, 8, 0.96));
    border: 1px solid rgba(255, 200, 87, 0.5);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
    overflow: hidden;
  }
  .bid-head { padding: 12px 14px 10px; flex: none; }
  .bid-kicker { color: #ffc857; letter-spacing: 0.18em; font-size: 12px; font-weight: 800; }
  .bid-price { font-size: 42px; line-height: 1; font-weight: 900; letter-spacing: 0.02em; margin: 4px 0 2px; color: #fff8ee; }
  .bid-sub { color: #efe6d6; font-size: 14px; font-weight: 700; min-height: 20px; }
  .bid-faces { display: flex; gap: 8px; margin-top: 10px; }
  .bid-faces span { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 52px; color: #9aa3ad; font-size: 11px; font-weight: 700; }
  .bid-faces span.on { color: #ffc857; }
  .bid-faces span.out { opacity: 0.35; }
  .face {
    width: 34px; height: 34px; border-radius: 50%; position: relative; display: block;
    box-shadow: inset 0 -7px 0 rgba(0, 0, 0, 0.22), 0 0 0 2px rgba(255, 255, 255, 0.12);
  }
  .face::before, .face::after {
    content: ""; position: absolute; top: 13px; width: 4px; height: 4px; border-radius: 50%; background: #1a120c;
  }
  .face::before { left: 8px; }
  .face::after { right: 8px; }
  .face.zhong { background: #c4a574; }
  .face.ke { background: #6a5a48; }
  .face.red { background: #c44832; }
  .face.sui { background: #31445f; }
  .face.player { background: #e7d3b0; }
  .face.on { box-shadow: inset 0 -7px 0 rgba(0, 0, 0, 0.22), 0 0 0 2px #ffc857; }
  #bid-log {
    flex: 1; min-height: 0; overflow: hidden;
    display: flex; flex-direction: column; gap: 0; padding: 4px 0;
  }
  .bid-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex: none;
  }
  .bid-row:first-child { background: rgba(255, 200, 87, 0.1); }
  .bid-row b { display: block; font-size: 14px; }
  .bid-row span { display: block; font-size: 13px; color: #efe6d6; font-weight: 650; }
  .bid-row.pass span, .bid-row.scare span { color: #ff9b8c; }
  .bid-row.bid span { color: #ffc857; }
  #bid-pad { flex: none; padding: 10px; }
  .bid-keys { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
  #bid-pad button {
    color: #1a120c; background: #ffc857; border: 0; font-weight: 800; padding: 8px 0;
  }
  #bid-pad button.pass { width: 100%; margin-top: 8px; background: transparent; color: #efe6d6; border: 1px solid rgba(255, 255, 255, 0.28); }
  #bid-pad button small { display: block; font-size: 10px; letter-spacing: 0.08em; opacity: 0.7; }
  #bid-pad .bid-wait { color: #efe6d6; font-size: 14px; font-weight: 700; margin-bottom: 4px; }
  #bid-pad .bid-warn { color: #ff9b8c; font-size: 13px; font-weight: 700; min-height: 18px; margin-bottom: 6px; }
  #bid.lot #bid-log { display: none; }
  #bid.lot #bid-pad { display: none; }
  #fatal {
    display: none; position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 9;
    background: #3a1512; color: #ffd2cc; padding: 10px; white-space: pre-wrap;
    font: 12px/1.4 ui-monospace, monospace; max-height: 40%; overflow: auto;
  }
  #testlog { display: none; }