body {
    margin: 0;
    background:
      radial-gradient(circle at 20% 10%, rgba(41, 174, 96, 0.16), transparent 28%),
      linear-gradient(135deg, #07131c 0%, #0d1b25 48%, #071118 100%);
    color: #e6e6e6;
    font-family: Arial, sans-serif;
  }

  #money {
    position: absolute;
    top: 0%;
    left: -1%;
    width: 101%;
    height: 6%;
    border-radius: 4px;
    background-color: rgba(9, 19, 28, 0.86);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.26);
    user-select: none;
  }

  #money_box {
    position: absolute;
    color: #f8fafc;
    font-size: 100%;
    border: rgba(255, 255, 255, 0.14) solid 1px;
    width: 10%;
    height: 90%;
    top: 5.8%;
    left: 50%;
    background-color: #101f2d;
    border-radius: 7px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #conves {
    position: absolute;
    background: linear-gradient(180deg, #132535 0%, #0d1b28 100%);
    width: 70%;
    height: 89%;
    top: 7%;
    left: 28.7%;
    border-radius: 0px 5px 5px 0px;
    user-select: none;
    overflow: hidden;
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }

  #box {
    position: absolute;
    width: 23%;
    height: 89%;
    top: 7%;
    left: 5.7%;
    background: linear-gradient(180deg, #26384b 0%, #172839 100%);
    border-radius: 10px 0px 0px 10px;
    user-select: none;
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }

  #balance {
    position: absolute;
    width: 55%;
    height: 3%;
    border-radius: 4px;
    padding: 10px;
    background-color: #0d1a27;
    color: white;
    border: 1px solid rgba(76, 154, 255, 0.55);
    top: 15%;
    left: 3%;
    font-size: 150%;
    outline: none;
    box-shadow: inset 0 1px 8px rgba(0, 0, 0, 0.28);
  }

  #bet_amount {
    position: absolute;
    color: #cbd5e1;
    font-size: 130%;
    top: 10%;
    left: 3%;
    user-select: none;
  }
  #incrementButton {
    position: absolute;
    color: white;
    background-color: #33465c;
    font-size: 130%;
    width: 15%;
    height: 7%;
    top: 15%;
    left: 83%;
    cursor: pointer;
    border-radius: 7px;
    border: 1px solid rgba(255, 255, 255, 0.12);
  }

  #decrementButton {
    position: absolute;
    color: white;
    background-color: #33465c;
    font-size: 130%;
    width: 15%;
    height: 7%;
    top: 15%;
    left: 66.8%;
    cursor: pointer;
    border-radius: 7px;
    border: 1px solid rgba(255, 255, 255, 0.12);
  }

  #incrementButton:hover,
  #decrementButton:hover {
    background-color: #405772;
  }
  #add-ball {
    position: absolute;
    width: 93%;
    height: 10%;
    top: 51%;
    left: 3%;
    border: 0;
    background: linear-gradient(180deg, #27d34d 0%, #168b2c 100%);
    color: #06130b;
    font-size: 110%;
    font-weight: 800;
    cursor: pointer;
    border-radius: 7px;
    box-shadow: 0 10px 22px rgba(39, 211, 77, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  }

  #add-ball:hover {
    filter: brightness(1.08);
  }

  #add-ball:disabled {
    cursor: wait;
    filter: grayscale(0.45);
    opacity: 0.75;
  }

  #add-ball2 {
    position: absolute;
    width: 93%;
    height: 10%;
    top: 51%;
    left: 3%;
    border: 0;
    background: linear-gradient(180deg, #27d34d 0%, #168b2c 100%);
    color: #06130b;
    font-size: 110%;
    font-weight: 800;
    cursor: pointer;
    border-radius: 7px;
  }

  #cashoutBtn {
    position: absolute;
    width: 93%;
    height: 10%;
    top: 63%;
    left: 3%;
    border: 0;
    background: linear-gradient(180deg, #f5b82e 0%, #b97e0e 100%);
    color: #231600;
    font-size: 110%;
    font-weight: 800;
    cursor: pointer;
    border-radius: 7px;
  }

  /* hilo table */
  #hilo_table {
    position: absolute;
    width: 96%;
    height: 94%;
    top: 3%;
    left: 2%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding-top: 12px;
  }

  #streak {
    font-size: 220%;
    font-weight: 900;
    color: #27d34d;
    letter-spacing: 1px;
  }

  .hilo-card {
    width: 130px;
    height: 182px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    border-radius: 12px;
    border: none;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
    user-select: none;
    overflow: hidden;
  }

  .hilo-card img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    border-radius: 12px;
    display: block;
  }

  .hilo-card img.card-back {
    opacity: 0.55;
    filter: grayscale(0.4);
  }

  #odds {
    font-size: 110%;
    color: #cbd5e1;
  }

  #odds .tie-note {
    opacity: 0.6;
    font-size: 85%;
  }

  #hilo_history {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
    min-height: 30px;
    max-width: 90%;
  }

  .hist-item {
    width: 30px;
    height: 42px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    overflow: hidden;
    background: #33465c;
    border: 1px solid rgba(255, 255, 255, 0.15);
  }

  .hist-item img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
  }

  .hist-item.good { background: #176936; border-color: #27d34d; }
  .hist-item.bad { background: #761a1a; border-color: #d13b34; }

  .buttons { display: flex; gap: 12px; }

  .btn-high, .btn-low {
    padding: 12px 34px;
    font-size: 110%;
    font-weight: 800;
    border: none;
    border-radius: 8px;
    cursor: pointer;
  }

  .btn-high { background: linear-gradient(180deg, #27d34d 0%, #168b2c 100%); color: #06130b; }
  .btn-low { background: linear-gradient(180deg, #e0574f 0%, #a0231c 100%); color: #fff; }
  .btn-disabled { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.5); }

  #message { min-height: 22px; color: #e6e6e6; font-size: 100%; }

  /* cheat overlay */
  .show {
    font-size: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #8b8b8b00;
  }
  #show {
    position: absolute;
    top: 7%;
    left: 0%;
    width: 5.4%;
    height: 89%;
    border-radius: 4px;
    user-select: none;
    z-index: 20;
  }
  #show_game { position: absolute; top: 0%; left: 5%; width: 90%; height: 5%; border-radius: 4px; user-select: none; }
  #show_mode { position: absolute; top: 5.4%; left: 5%; width: 90%; height: 6%; border-radius: 4px; user-select: none; }
  #show_money { position: absolute; top: 17.5%; left: 5%; width: 90%; height: 6%; border-radius: 4px; user-select: none; }
  #show_bet { position: absolute; top: 43%; left: 5%; width: 90%; height: 6%; border-radius: 4px; user-select: none; }
  #show_multi { position: absolute; top: 67%; left: 0%; width: 99%; height: 6%; border-radius: 4px; user-select: none; }
  #show_round { position: absolute; top: 94%; left: 5%; width: 90%; height: 6%; }
  .Ashow { border: #20c997 solid 1px; font-size: 100%; display: flex; justify-content: center; align-items: center; }
  #show_number { position: absolute; top: 28%; left: 5%; width: 90%; height: 6%; }
  #show_win { position: absolute; top: 37%; left: 5%; width: 90%; height: 6%; }
  #show_loss { position: absolute; top: 47%; left: 5%; width: 90%; height: 6%; }
  #show_onporfit { position: absolute; top: 56%; left: 5%; width: 90%; height: 6%; }
  #show_onloss { position: absolute; top: 66.6%; left: 5%; width: 90%; height: 6%; }

  #manual_auto {
    position: absolute;
    color: white;
    background-color: rgb(30, 43, 55);
    width: 94%;
    height: 8%;
    left: 3%;
    top: 1%;
    border-radius: 40px;
  }
  #manual {
    position: absolute;
    color: white;
    background-color: rgb(40, 56, 72);
    width: 48%;
    height: 80%;
    left: 2%;
    top: 10%;
    border: #0000000f solid 1px;
    cursor: pointer;
    border-radius: 40px;
  }
  #auto {
    position: absolute;
    color: white;
    background-color: rgb(30, 43, 55);
    width: 45%;
    height: 80%;
    left: 52%;
    top: 10%;
    border: #0000000f solid 1px;
    cursor: pointer;
    border-radius: 40px;
  }
  #labeltarget {
    position: absolute;
    color: #cbd5e1;
    font-size: 110%;
    top: 24%;
    left: 3%;
    user-select: none;
  }
  #target {
    position: absolute;
    width: 88%;
    height: 3%;
    border-radius: 4px;
    padding: 10px;
    background-color: #0d1a27;
    color: white;
    border: 1px solid rgba(76, 154, 255, 0.55);
    top: 29%;
    left: 3%;
    font-size: 130%;
    outline: none;
  }
  #labelchoice {
    position: absolute;
    color: #cbd5e1;
    font-size: 110%;
    top: 38%;
    left: 3%;
    user-select: none;
  }
  #hiloChoice {
    position: absolute;
    width: 94%;
    height: 6%;
    border-radius: 4px;
    background-color: #0d1a27;
    color: white;
    border: 1px solid rgba(76, 154, 255, 0.55);
    top: 43%;
    left: 3%;
    font-size: 110%;
    outline: none;
  }
  #auto_view { position: absolute; top: 33%; left: 3%; width: 94%; height: 55%; }
  #Labelnumberofbet { position: absolute; font-size: 90%; left: 1%; top: 30%; color: #cbd5e1; }
  #numberofbet { position: absolute; left: 1%; top: 35%; width: 93%; height: 7%; border-radius: 4px; background-color: #0d1a27; color: white; border: 1px solid rgba(76,154,255,.55); }
  #reset1 { position: absolute; top: 44%; left: 1%; width: 25%; height: 7%; border-radius: 7px; background: #33465c; color: #fff; border: 1px solid #fff; cursor: pointer; font-size: 80%; }
  #Increase1 { position: absolute; top: 44%; left: 28%; width: 65%; height: 7%; border-radius: 7px; background: #33465c; color: #fff; border: 1px solid rgba(0,0,0,0); cursor: pointer; font-size: 80%; }
  #Labelonwin { position: absolute; left: 1%; top: 53%; font-size: 90%; color: #cbd5e1; }
  #onwin { position: absolute; left: 1%; top: 58%; width: 93%; height: 7%; border-radius: 4px; background-color: #0d1a27; color: white; border: 1px solid rgba(76,154,255,.55); opacity: .5; pointer-events: none; }
  #reset2 { position: absolute; top: 67%; left: 1%; width: 25%; height: 7%; border-radius: 7px; background: #33465c; color: #fff; border: 1px solid #fff; cursor: pointer; font-size: 80%; }
  #Increase2 { position: absolute; top: 67%; left: 28%; width: 65%; height: 7%; border-radius: 7px; background: #33465c; color: #fff; border: 1px solid rgba(0,0,0,0); cursor: pointer; font-size: 80%; }
  #Labelonloss { position: absolute; left: 1%; top: 76%; font-size: 90%; color: #cbd5e1; }
  #onloss { position: absolute; left: 1%; top: 81%; width: 93%; height: 7%; border-radius: 4px; background-color: #0d1a27; color: white; border: 1px solid rgba(76,154,255,.55); opacity: .5; pointer-events: none; }
  #Labelstoponprofit { position: absolute; left: 1%; top: 90%; font-size: 90%; color: #cbd5e1; }
  #onprofit { position: absolute; left: 1%; top: 95%; width: 93%; height: 7%; border-radius: 4px; background-color: #0d1a27; color: white; border: 1px solid rgba(76,154,255,.55); }
  #Labelstoponloss { position: absolute; left: 1%; top: 104%; font-size: 90%; color: #cbd5e1; }
  #stoponloss { position: absolute; left: 1%; top: 109%; width: 93%; height: 7%; border-radius: 4px; background-color: #0d1a27; color: white; border: 1px solid rgba(76,154,255,.55); }
  #Gbutton {
    position: absolute; z-index: 40; left: 80%; top: 10%;
    width: clamp(54px, 7vw, 86px); height: clamp(28px, 3.2vh, 36px);
    cursor: pointer; border-radius: 7%;
    background: linear-gradient(180deg, #1a444e, #1e2c36);
    border: 1px solid rgb(29 176 171 / 92%); color: #e0e0e0;
  }

  @media (max-width: 900px) {
    .hilo-card { width: 100px; height: 140px; font-size: 3.5rem; }
    #show,
    #show_game, #show_mode, #show_money, #show_bet, #show_multi,
    #show_round, #show_number, #show_win, #show_loss,
    #show_onporfit, #show_onloss { display: none; }
  }