:root {
      --bg: #0e0e0e;
      --panel: #1a1b1e;
      --panel2: #141517;
      --line: #2a2c31;
      --green: #28a909;
      --green2: #34c759;
      --gold: #d9a441;
      --red: #e51837;
      --text: #f3f3f3;
      --muted: #8b8f96;
      --chip: #2a2d33;
    }
    * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
    html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text);
      font-family: "Segoe UI", system-ui, -apple-system, sans-serif; }
    button { font-family: inherit; }
    .app { max-width: 560px; margin: 0 auto; min-height: 100%; padding-bottom: 12px; }
    header {
      display: flex; justify-content: space-between; align-items: center;
      padding: 10px 12px 6px;
    }
    .logo {
      font-weight: 800; font-style: italic; letter-spacing: .5px;
      font-size: 22px; color: var(--red); text-shadow: 0 0 12px rgba(229,24,55,.35);
    }
    .hdr-r { display: flex; align-items: center; gap: 10px; }
    #bal { color: var(--green2); font-weight: 700; font-size: 14px; }
    #bal .ccy { color: #9aa; font-weight: 600; font-size: 12px; margin-left: 4px; }
    .icon-btn {
      width: 34px; height: 34px; border: 0; border-radius: 8px;
      background: #1f2126; color: #ddd; font-size: 18px; cursor: pointer;
    }
    /* 历史倍数：外层固定「···」，内层单独横向滚动（避免 margin-left:auto 导致部分机型滑不动） */
    .hist-wrap {
      display: flex; align-items: center; gap: 6px; padding: 0 12px 8px;
      min-width: 0;
    }
    .hist {
      flex: 1 1 auto; min-width: 0;
      display: flex; gap: 6px; align-items: center;
      overflow-x: auto; overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      touch-action: pan-x;
      overscroll-behavior-x: contain;
      scrollbar-width: none;
    }
    .hist::-webkit-scrollbar { display: none; }
    .hist b {
      flex: 0 0 auto; font-size: 12px; font-weight: 700; cursor: pointer;
      padding: 3px 10px; border-radius: 999px; line-height: 1.25;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
      white-space: nowrap; user-select: none;
    }
    /* 彩色胶囊 chip：低灰蓝 / 中蓝紫 / 高玫红 */
    .hist b.low { color: #d7e3ff; background: rgba(90, 120, 200, .28); }
    .hist b.mid { color: #c9c2ff; background: rgba(110, 80, 220, .32); }
    .hist b.hot { color: #ffd0ef; background: rgba(210, 50, 160, .36); }
    .hist-more {
      flex: 0 0 auto; color: var(--muted); background: #222; border: 0;
      border-radius: 999px; padding: 3px 10px; cursor: pointer;
      white-space: nowrap;
    }
    .stage {
      margin: 0 10px; height: min(42vh, 340px); min-height: 240px; border-radius: 14px; overflow: hidden;
      position: relative; background: #070708;
      box-shadow: inset 0 0 0 1px #1f1f22;
    }
    .sunburst {
      position: absolute; inset: -55%;
      background: repeating-conic-gradient(from 0deg, #151515 0 9deg, #0a0a0a 9deg 18deg);
      animation: spin 48s linear infinite; opacity: .95;
    }
    .sun {
      position: absolute; right: -40px; top: -50px; width: 180px; height: 180px;
      background: radial-gradient(circle, rgba(255,210,90,.16), transparent 62%);
      pointer-events: none;
    }
    .glow {
      position: absolute; inset: 0; z-index: 2; pointer-events: none;
      background: radial-gradient(circle at 48% 42%, transparent, transparent 60%);
    }
    .stage.flying .glow {
      background: radial-gradient(circle at 48% 40%, rgba(170,80,220,.28), transparent 58%);
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    .stage.no-anim .sunburst { animation: none; }
    #fx { position: absolute; inset: 0; width: 100%; height: 100%; }
    .plane {
      position: absolute; width: 130px; height: 62px; left: -4px; top: auto; bottom: 8px;
      /* 起落架/机腹对准曲线尖端（对照 1.96x 参考图） */
      transform-origin: 24% 82%; z-index: 3; pointer-events: none; filter: drop-shadow(0 2px 6px rgba(0,0,0,.5));
      will-change: left, top, transform, opacity;
      opacity: 1;
    }
    .stage.crashed .plane.gone { opacity: 0; }
    .plane img,
    .plane .pf {
      width: 100%; height: 100%; display: block; object-fit: contain;
      -webkit-user-select: none; user-select: none;
      position: absolute; left: 0; top: 0;
      opacity: 0; pointer-events: none;
    }
    .plane .pf.on { opacity: 1; }
    .mult-wrap {
      position: absolute; inset: 0; display: flex; flex-direction: column;
      align-items: center; justify-content: center; z-index: 4; pointer-events: none;
      text-align: center;
    }
    .mult { font-size: 62px; font-weight: 800; letter-spacing: -1px; line-height: 1; text-shadow: 0 2px 18px rgba(0,0,0,.45); }
    .mult.fly { color: #fff; }
    .mult.crash { color: #e11d38; }
    .flew {
      display: none; color: #fff; font-weight: 800; font-size: 22px; margin-bottom: 8px;
      letter-spacing: 0.5px; text-shadow: 0 2px 12px rgba(0,0,0,.55);
    }
    .stage.crashed .flew { display: block; animation: flewIn .28s ease-out; }
    .stage.crashed .glow {
      background: radial-gradient(circle at 50% 42%, rgba(255,255,255,.04), transparent 55%);
    }
    /* 飞走结果态：只留放射底 + 文案，不露曲线 */
    .stage.crashed.result #fx { opacity: 0; }
    .stage.crashed.result .plane { display: none; }
    @keyframes flewIn {
      from { opacity: 0; transform: translateY(8px) scale(.96); }
      to { opacity: 1; transform: none; }
    }
    .wait-box { display: none; text-align: center; }
    .stage.wait .wait-box { display: block; }
    .stage.wait .mult { display: none; }
    .ring {
      width: 86px; height: 86px; margin: 0 auto 8px; position: relative;
    }
    .ring svg { transform: rotate(-90deg); }
    .wait-box .lab { color: #c8c8c8; font-size: 13px; }
    .wait-box .sec { font-size: 22px; font-weight: 800; }
    .online {
      position: absolute; right: 10px; bottom: 8px; z-index: 5;
      font-size: 12px; color: #cfcfcf; display: flex; align-items: center; gap: 6px;
    }
    .avatars { display: flex; }
    .avatars i {
      width: 18px; height: 18px; border-radius: 50%; margin-left: -6px; border: 1px solid #111;
      background: #3a3a3a; display: block;
    }
    .avatars i:first-child { margin-left: 0; background: #5c6bc0; }
    .avatars i:nth-child(2) { background: #26a69a; }
    .avatars i:nth-child(3) { background: #ef6c00; }
    .pills { position: absolute; left: 10px; top: 8px; z-index: 6; display: flex; flex-direction: column; gap: 4px; }
    .pill {
      background: #1f8a2a; color: #fff; font-size: 12px; font-weight: 700;
      padding: 3px 8px; border-radius: 8px; animation: rise .8s ease forwards;
    }
    @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; } }
    .panels { padding: 10px; display: grid; gap: 10px; }
    @media (min-width: 720px) {
      .app { max-width: 980px; }
      .stage { height: 280px; }
      .panels { grid-template-columns: 1fr 1fr; }
    }
    .panel {
      background: var(--panel); border-radius: 14px; padding: 8px 8px 10px;
      position: relative;
    }
    .panel.hidden-slot { display: none; }
    .tabs {
      display: flex; justify-content: center; gap: 18px; margin: 2px 0 8px;
      font-size: 13px; color: var(--muted);
    }
    .tabs span { padding: 4px 16px; border-radius: 999px; cursor: pointer; }
    .tabs span.on { background: #2b2e34; color: #fff; font-weight: 700; }
    .add-slot {
      position: absolute; right: 8px; top: 8px; width: 28px; height: 22px;
      border: 0; border-radius: 6px; background: #2a2d33; color: #ddd; cursor: pointer;
    }
    .amt-row { display: flex; gap: 8px; align-items: stretch; }
    .amt-box { flex: 1; }
    .amt-ctrl {
      display: flex; align-items: center; justify-content: space-between;
      background: #121417; border-radius: 10px; padding: 6px;
    }
    .amt-ctrl button {
      width: 34px; height: 34px; border: 0; border-radius: 50%;
      background: #2a2d33; color: #fff; font-size: 18px; cursor: pointer;
      transition: transform .08s ease, filter .08s ease, opacity .15s ease;
    }
    .amt-ctrl button:active:not(:disabled) { transform: scale(.92); filter: brightness(.88); }
    .amt-ctrl input {
      width: 72px; text-align: center; background: transparent; border: 0;
      color: #fff; font-size: 18px; font-weight: 800;
    }
    .amt-box.locked { opacity: .72; pointer-events: none; }
    .amt-box.locked input { color: #bbb; }
    .quick { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
    .quick button {
      background: #2a2d33; color: #ddd; border: 0; border-radius: 8px; padding: 7px 0; cursor: pointer;
      transition: transform .08s ease, background .15s ease, color .15s ease;
    }
    .quick button:active:not(:disabled) { transform: scale(.96); }
    .quick button.on {
      background: #2b2e34; color: #fff; font-weight: 700;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
    }
    button:disabled { opacity: .55; cursor: default; }
    .act {
      flex: 1.15; min-height: 74px; border: 0; border-radius: 12px;
      font-size: 18px; font-weight: 800; cursor: pointer; color: #fff;
      position: relative; overflow: hidden;
      transition: transform .08s ease, filter .12s ease, box-shadow .15s ease;
      -webkit-user-select: none; user-select: none;
      touch-action: manipulation;
    }
    .act:active:not(:disabled):not(.busy) { transform: scale(.97); filter: brightness(.92); }
    .act.flash { filter: brightness(1.18); }
    .act.busy {
      opacity: .78; pointer-events: none; cursor: wait;
      filter: saturate(.85);
    }
    .act.busy::after {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.12) 50%, transparent 70%);
      animation: act-shine 1s linear infinite;
    }
    @keyframes act-shine {
      from { transform: translateX(-60%); }
      to { transform: translateX(60%); }
    }
    .act.btn-bet[disabled] { background: var(--green); opacity: .92; cursor: default; }
    .act small { display: block; font-size: 13px; font-weight: 700; margin-top: 2px; }
    .act .auto-tag {
      position: absolute; top: 6px; right: 8px;
      font-size: 10px; font-weight: 800; letter-spacing: .4px;
      padding: 2px 6px; border-radius: 999px;
      background: rgba(0,0,0,.28); color: #dfffe8;
      line-height: 1.2;
    }
    .btn-bet { background: var(--green); }
    .btn-out { background: linear-gradient(180deg, #e6b34a, #c48a18); color: #1a1204; }
    .btn-cancel { background: linear-gradient(180deg, #e84a4a, #c62828); color: #fff; }
    .btn-wait { background: #3a3f48; color: #bbb; }
    .btn-on { background: #1e7a32; }
    .act.btn-bet.armed { box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
    .auto-row {
      display: none; align-items: center; justify-content: space-between;
      gap: 8px; margin-top: 8px; font-size: 12px; color: #cfcfcf;
    }
    .panel.auto .auto-row { display: flex; }
    .sw { display: flex; align-items: center; gap: 6px; }
    .sw input { accent-color: var(--green); }
    .auto-row input[type=number] {
      width: 64px; background: #121417; border: 1px solid #333; color: #fff;
      border-radius: 8px; padding: 6px; text-align: center;
    }
    .msg { min-height: 16px; font-size: 12px; margin-top: 4px; color: #ff8a8a; }
    .msg.ok { color: #8dffb0; }
    .board {
      margin: 0 10px; background: var(--panel); border-radius: 14px; padding: 8px 8px 4px;
    }
    .btabs { display: flex; gap: 6px; margin-bottom: 8px; }
    .btabs button {
      flex: 1; border: 0; background: transparent; color: var(--muted);
      padding: 8px 0; border-radius: 999px; cursor: pointer; font-weight: 700;
    }
    .btabs button.on { background: #2b2e34; color: #fff; }
    .sum { display: flex; justify-content: space-between; align-items: center; gap: 8px;
      font-size: 12px; color: var(--muted); padding: 0 6px 8px; }
    .sum .win { color: #fff; font-size: 16px; font-weight: 800; }
    .sum-left { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
    .bet-prog {
      width: 120px; height: 4px; border-radius: 999px; background: #2a2d33; overflow: hidden;
    }
    .bet-prog > i {
      display: block; height: 100%; width: 0; background: linear-gradient(90deg, #1f8a2a, #34c759);
      border-radius: 999px; transition: width .35s ease;
    }
    .top-filters { display: flex; flex-direction: column; gap: 8px; padding: 0 2px 10px; }
    .seg { display: flex; gap: 4px; background: #121417; border-radius: 999px; padding: 3px; width: fit-content; max-width: 100%; }
    .seg.full { width: 100%; }
    .seg.full button { flex: 1; }
    .seg button {
      border: 0; background: transparent; color: var(--muted); font-size: 12px; font-weight: 700;
      padding: 6px 12px; border-radius: 999px; cursor: pointer;
    }
    .seg button.on { background: #2b2e34; color: #fff; }
    .blist { max-height: 280px; overflow: auto; }
    .brow, .bhead {
      display: grid; grid-template-columns: 1.6fr 1fr .7fr .9fr;
      gap: 4px; padding: 7px 6px; font-size: 12px; color: #cfcfcf; align-items: center;
    }
    .bhead { color: var(--muted); }
    .brow.win { background: rgba(40,169,9,.18); color: #b6ffc2; border-radius: 6px; }
    .buser { display: flex; align-items: center; gap: 6px; min-width: 0; }
    .bav {
      width: 22px; height: 22px; border-radius: 50%; flex: 0 0 22px;
      display: flex; align-items: center; justify-content: center;
      font-size: 10px; font-weight: 800; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.35);
    }
    .bname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .mx { font-weight: 700; }
    .mx.low { color: #34c5eb; }
    .mx.mid { color: #9b7bff; }
    .mx.hot { color: #e91e8c; }
    .top-card {
      display: grid; grid-template-columns: 1.1fr 1fr 1.1fr auto;
      gap: 6px; align-items: center; padding: 10px 8px; margin-bottom: 6px;
      background: #16181c; border-radius: 10px; font-size: 12px;
    }
    .top-card .meta { color: var(--muted); font-size: 11px; margin-top: 2px; }
    .top-card .kv { color: var(--muted); font-size: 11px; }
    .top-card .kv b { display: block; color: #fff; font-size: 13px; font-weight: 700; margin-top: 2px; }
    .top-card .kv b.mx { color: #e91e8c; }
    .fair-ico {
      width: 28px; height: 28px; border: 0; border-radius: 8px; background: #22252b; color: #9aa0a8;
      cursor: pointer; font-size: 14px; line-height: 1;
    }
    .round-row {
      display: flex; align-items: center; justify-content: space-between; gap: 8px;
      padding: 10px 12px; margin-bottom: 6px; background: #16181c; border-radius: 999px; font-size: 13px;
    }
    .round-row .dt { color: var(--muted); }
    .round-row .mx { font-size: 15px; font-weight: 800; }
    .fair-box { background: #121417; border-radius: 10px; padding: 10px; margin: 8px 0; }
    .fair-box .lab { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
    .fair-step { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-top: 1px solid #2a2d33; font-size: 12px; }
    .fair-step span { color: var(--muted); }
    .fair-step b { color: #fff; word-break: break-all; text-align: right; }
    .fair-step b.mx { color: #e91e8c; }
    .fair-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
    .fair-head .rn { color: var(--muted); font-size: 13px; }
    .fair-ok { color: #8dffb0; font-size: 12px; }
    .fair-bad { color: #ff8a8a; font-size: 12px; }
    .prev-crash { text-align: center; padding: 8px; }
    .prev-crash .k { color: var(--muted); font-size: 12px; }
    .prev-crash .v { font-size: 28px; font-weight: 800; color: #9b7bff; }
    .prev-crash .v.hot { color: #e91e8c; }
    .fair-foot {
      display: flex; justify-content: space-between; align-items: center; gap: 8px;
      font-size: 11px; color: var(--muted); padding: 8px 6px;
    }
    .fair-foot a { color: #7eb6ff; text-decoration: none; }
    .drawer, .modal {
      position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 20; display: none;
    }
    .drawer.show, .modal.show { display: block; }
    .drawer-box {
      position: absolute; right: 8px; top: 48px; width: min(360px, calc(100% - 16px));
      background: #1c1e22; border-radius: 14px; padding: 12px; max-height: 80vh; overflow: auto;
    }
    .me { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
    .row-item {
      display: flex; justify-content: space-between; align-items: center;
      padding: 12px 4px; border-top: 1px solid #2a2d33; font-size: 14px;
    }
    .row-item button.link { background: transparent; border: 0; color: #ddd; width: 100%; text-align: left; cursor: pointer; }
    .modal-box {
      position: absolute; left: 50%; top: 8%; transform: translateX(-50%);
      width: min(440px, calc(100% - 20px)); background: #1c1e22; border-radius: 14px;
      padding: 14px; max-height: 84vh; overflow: auto;
    }
    .modal-box h3 { margin: 0 0 10px; }
    .close { float: right; background: transparent; border: 0; color: #aaa; font-size: 20px; cursor: pointer; }
    .how { background: #e09a1a; color: #1a1204; border-radius: 12px; padding: 14px; }
    .how .step { display: flex; gap: 10px; margin: 10px 0; font-size: 14px; }
    .how .n { width: 36px; height: 36px; border-radius: 50%; background: var(--red); color: #fff;
      display: flex; align-items: center; justify-content: center; font-weight: 800; flex: 0 0 36px; }
    .lim-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #2a2d33; }
    .lim-row b { background: var(--green); color: #fff; border-radius: 999px; padding: 2px 10px; font-size: 13px; }
    .seed { word-break: break-all; background: #121417; padding: 8px; border-radius: 8px; font-size: 12px; color: #ccc; }