*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:#08111a;color:#fff}
img{display:block;max-width:100%}
button{cursor:pointer;outline:none}

.hl-wrap{
  max-width:1600px;
  margin:0 auto;
  background:#09131c;
  border:1px solid #25313f;
}
.hl-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 16px;
  background:#081018;
  border-bottom:1px solid #22303d;
  gap:16px;
}
.hl-top-left,.hl-top-center,.hl-top-right{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.hl-label{font-size:14px;color:#c2ccd8;white-space:nowrap}
.hl-hash{font-size:14px;color:#9fb0c1;word-break:break-all}
.hl-limit{color:#f5c777;font-weight:700;white-space:nowrap}

.hl-timerbar{
  position:relative;
  height:34px;
  background:#060a10;
  border-bottom:1px solid #24303b;
  overflow:visible;
}

.hl-timer-fill{
  position:absolute;
  left:0; top:0; bottom:0;
  width:0;
  background:#e20d18;
  transition:none;
}

.hl-timer-inner{
  position:relative;
  z-index:2;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 10px;
  overflow:visible;
}

.hl-timer-text{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  text-align:center;
  font-size:15px;
  font-weight:700;
  color:#fff;
  line-height:1;
  white-space:nowrap;
}

.hl-top-actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:6px;
}

.hl-top-action-btn{
  height:24px;
  min-width:24px;
  padding:0 8px;
  border:1px solid #4f5d69;
  background:#1b2834;
  color:#72c8ff;
  border-radius:2px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  font-size:12px;
  font-weight:700;
}

.hl-top-action-icon{
  line-height:1;
  font-size:13px;
}

.hl-top-action-text{
  line-height:1;
  white-space:nowrap;
}

.hl-sound-btn{
  position:relative;
  padding:0 7px;
  color:#dfe8f2;
  overflow:hidden;
}

.hl-sound-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  line-height:1;
}

.hl-sound-slash{
  position:absolute;
  left:50%;
  top:50%;
  width:22px;
  height:2px;
  background:#ff3b30;
  border-radius:2px;
  transform:translate(-50%, -50%) rotate(-45deg);
  opacity:0;
  pointer-events:none;
  box-shadow:0 0 6px rgba(255,59,48,.45);
}

.hl-sound-btn.is-off{
  color:#8c99a6;
  border-color:#4a5560;
  background:#151d25;
}

.hl-sound-btn.is-off .hl-sound-slash{
  opacity:1;
}

.hl-main{
  display:flex;
  min-height:860px;
}

.hl-left{
  width:720px;
  border-right:1px solid #22303d;
  background:#09131c;
  min-width:0;
  display:flex;
  flex-direction:column;
}

.hl-right{
  flex:1;
  background:#08111a;
  min-width:0;
  display:flex;
  flex-direction:column;
}

.hl-board{
  padding:10px;
}

.hl-bottom-history{
  padding:10px;
  height:360px;
  display:flex;
  flex-direction:column;
  min-height:0;
  overflow:hidden;
}

.hl-bottom-head{
  flex:0 0 auto;
}

#hlBottomHistoryList{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  scrollbar-gutter:stable;
}

.hl-right-head{
  flex:0 0 auto;
}

.hl-bet-list{
  flex:1 1 auto;
  min-height:0;
  height:auto;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-gutter:stable;
  background:
    linear-gradient(180deg, rgba(255,255,255,.01) 0%, rgba(255,255,255,0) 100%);
}

.hl-history-strip{
  display:flex;
  align-items:center;
  gap:2px;
  padding:6px 8px;
  border-bottom:1px solid #1d2a35;
  min-height:56px;
  overflow-x:auto;
  overflow-y:hidden;
  white-space:nowrap;
  scrollbar-width:thin;
  scrollbar-color:#425567 #101820;
}

.hl-history-strip::-webkit-scrollbar{
  height:8px;
}

.hl-history-strip::-webkit-scrollbar-track{
  background:#101820;
  border-top:1px solid rgba(255,255,255,.04);
}

.hl-history-strip::-webkit-scrollbar-thumb{
  background:linear-gradient(90deg, #3a4d5d 0%, #2d3c49 100%);
  border-radius:10px;
  border:1px solid #101820;
}

.hl-history-strip::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(90deg, #537086 0%, #375060 100%);
}

.hl-history-strip img{
  width:34px;
  height:48px;
  object-fit:contain;
  background:#fff;
  border-radius:2px;
  padding:1px;
}

.hl-board{padding:8px}
.hl-left-panel{
  display:grid;
  grid-template-columns:1fr 170px 1fr;
  gap:6px;
  align-items:stretch;
  justify-content:start;
}

.hl-bet-col{
  display:flex;
  flex-direction:column;
  gap:6px;
  height:100%;
}

.hl-bet-col,
.hl-card-stage,
.hl-bet-grid{
}

.hl-bet-btn{
  flex:1 1 0;
  min-height:0;
  border:1px solid #64573a;
  background:#cbb56f;
  color:#4f401f;
  border-radius:4px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  font-weight:800;
  transition:.25s;
  padding:8px 6px;
}

.hl-bet-btn--lo{
  background:#2d2a33;
  border-color:#4c4b55;
  color:#d2bb72;
}

.hl-bet-btn,
.hl-option,
.hl-chip-btn,
.hl-reset-btn{
  position:relative;
}

.hl-selected{
  border:2px solid #39d353 !important;
  box-shadow:
    0 0 0 1px rgba(57,211,83,.35) inset,
    0 0 14px rgba(57,211,83,.22);
  transform:translateY(-1px);
}

.hl-selected::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:4px;
  box-shadow:inset 0 0 18px rgba(57,211,83,.12);
  pointer-events:none;
}

.hl-bet-pending{
  pointer-events:none !important;
  opacity:.72;
}

.hl-disabled{
  pointer-events:none !important;
  opacity:.42;
  filter:grayscale(.35);
}

.hl-login-lock{
  pointer-events:none !important;
  opacity:.42;
  filter:grayscale(.35);
}

.hl-login-lock-msg{
  margin-top:8px;
  font-size:12px;
  color:#ffb86b;
  font-weight:700;
}
.hl-bet-title{font-size:28px;line-height:1}
.hl-bet-range{font-size:18px;margin-top:8px}
.hl-bet-rate{font-size:14px;margin-top:6px}

.hl-card-stage{
  display:flex;
  align-items:stretch;
  justify-content:center;
  height:100%;
  padding:0;
  margin:0;
}

.hl-main-card{
  width:170px;
  height:100%;
  min-height:240px;
  aspect-ratio:165 / 240;
  background:#fff;
  border-radius:4px;
  overflow:hidden;
  position:relative;
}

.hl-main-card__front,
.hl-main-card__cover{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.hl-main-card__front{
  z-index:1;
  opacity:1;
}

.hl-main-card__cover{
  z-index:2;
  opacity:0;
  transform:translateX(0);
}

.hl-main-card.is-hold .hl-main-card__cover{
  opacity:1;
  transform:translateX(0);
}

.hl-main-card.is-reveal .hl-main-card__cover{
  opacity:0;
  transform:translateX(155px);
}

.hl-bet-btn,
.hl-option{
  position:relative;
  transition:
    opacity .25s ease,
    filter .25s ease,
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease,
    background .25s ease;
}

.hl-result-hit{
  border:2px solid #ff2a2a !important;
  box-shadow:
    0 0 0 2px rgba(255,42,42,.55) inset,
    0 0 18px rgba(255,42,42,.45),
    0 0 28px rgba(255,42,42,.22);
  transform:scale(1.02);
  z-index:2;
}

.hl-result-hit::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:4px;
  box-shadow:inset 0 0 22px rgba(255,42,42,.18);
  pointer-events:none;
}

.hl-result-dim{
  opacity:.18 !important;
  filter:grayscale(1) brightness(.42) !important;
  transform:scale(.98);
}

.hl-wrap.is-result-lock .hl-bet-btn,
.hl-wrap.is-result-lock .hl-option{
  pointer-events:none;
}

.hl-bet-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:repeat(3, 1fr);
  gap:6px;
  height:100%;
}

.hl-option{
  min-height:0;
  border:1px solid #37414b;
  border-radius:4px;
  background:#1f2832;
  color:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  font-weight:800;
  transition:.25s;
  padding:6px 4px;
}
.hl-option strong{
  font-size:15px;
  line-height:1.15;
}

.hl-option span{
  font-size:13px;
  margin-top:4px;
}
.hl-option.red strong{color:#ff5a49}
.hl-option.black strong{color:#dce3ed}
.hl-option.green strong{color:#a6c95b}
.hl-option.blue strong{color:#33b6ff}
.hl-option.full{
  grid-column:1 / span 2;
  min-height:0;
}

.hl-chip-area{
  display:grid;
  grid-template-columns:1fr 1fr 90px;
  gap:10px;
  margin-top:12px;
}
.hl-amount-box{
  height:48px;
  background:#171f28;
  border:1px solid #37414b;
  border-radius:4px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 14px;
}
.hl-amount-box span{font-size:14px;color:#d9dfeb}
.hl-amount-box strong{font-size:28px;color:#fff;font-weight:800}
.hl-reset-btn{
  height:48px;
  border:1px solid #5b6772;
  background:#323943;
  color:#7ecc47;
  font-size:24px;
  font-weight:800;
  border-radius:4px;
}
.hl-chip-row{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:10px;
  margin-top:10px;
}
.hl-chip-btn{
  height:52px;
  border:1px solid #59616b;
  background:#343a44;
  color:#fff;
  border-radius:4px;
  font-size:20px;
  font-weight:800;
}

.hl-result-hit{
  border-color:#ff2a2a !important;
  box-shadow:
    0 0 0 1px rgba(255,42,42,.48) inset,
    0 0 14px rgba(255,42,42,.22);
}

.hl-result-dim{
  opacity:.26;
  filter:grayscale(1) brightness(.72);
}

.hl-bottom-history{padding:10px}
.hl-bottom-head,
.hl-bottom-row{
  display:grid;
  grid-template-columns:90px 54px 70px 76px 70px 92px minmax(180px,1fr);
  gap:8px;
  align-items:center;
  min-width:720px;
}

.hl-bottom-row .hash-cell,
.hl-bottom-row .col-hash{
  min-width:0;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#96a9bc;
}

.hl-bottom-row > div,
.hl-bottom-head > span{
  min-width:0;
}

.hl-bottom-head{
  padding:8px 0;
  border-bottom:1px solid #263440;
  color:#d8dfea;
  font-weight:700;
  font-size:13px;
}

.hl-bottom-row{
  padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,.04);
  font-size:13px;
}

.hl-bottom-row .result-cell img{
  width:28px;
  height:40px;
  object-fit:contain;
  background:#fff;
  border-radius:2px;
  padding:1px;
}

.hl-bottom-row .hash-cell{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#96a9bc;
}

.hl-bottom-row .col-hilo.is-hi{
  color:#d9c06a;
  font-weight:700;
}

.hl-bottom-row .col-hilo.is-lo{
  color:#ff6b6b;
  font-weight:700;
}

.hl-bottom-row .col-hilo.is-tie{
  color:#bfc9d4;
  font-weight:700;
}

.hl-bottom-row .col-color.is-red{
  color:#ff5a49;
  font-weight:700;
}

.hl-bottom-row .col-color.is-black{
  color:#dce3ed;
  font-weight:700;
}

.hl-bottom-row .col-range{
  color:#9fd356;
  font-weight:700;
}

.hl-bottom-row .col-shape{
  color:#7ed0ff;
  font-weight:700;
}

.hl-bottom-row .col-shape.is-joker{
  color:#33b6ff;
}

.hl-right-head,.hl-bet-item{
  display:grid;
  grid-template-columns:1.1fr .8fr 1fr;
  gap:10px;
  align-items:center;
  padding:10px 14px;
}
.hl-right-head{
  border-bottom:1px solid #22303d;
  background:#081018;
  color:#d8e0eb;
  font-weight:800;
}
.hl-bet-list{
  height:780px;
  overflow-y:auto;
  scrollbar-gutter:stable;
}
.hl-bet-item{
  min-height:38px;
  border-bottom:1px solid rgba(255,255,255,.03);
  font-size:16px;
}
.hl-bet-item.is-new{animation:betIn .25s ease}
.hl-bet-item .uid{color:#a9da48}
.hl-bet-item .type.red{color:#79e13e}
.hl-bet-item .type.black{color:#ff5555}
.hl-bet-item .type.hi{color:#d8c06c}
.hl-bet-item .type.lo{color:#ff6868}
.hl-bet-item .type.joker{color:#36a8ff}
.hl-bet-item .type.range{color:#9fd356}
.hl-bet-item .type.face{color:#7ed0ff}
.hl-bet-item .amount{
  justify-self:end;
  color:#97d83f;
  font-variant-numeric:tabular-nums;
}

@keyframes betIn{
  from{opacity:0;transform:translateY(5px)}
  to{opacity:1;transform:translateY(0)}
}

#hlBottomHistoryList,
.hl-bet-list{
  scrollbar-width:thin;
  scrollbar-color:#425567 #121b23;
}

#hlBottomHistoryList::-webkit-scrollbar,
.hl-bet-list::-webkit-scrollbar{
  width:10px;
  height:10px;
}

#hlBottomHistoryList::-webkit-scrollbar-track,
.hl-bet-list::-webkit-scrollbar-track{
  background:#121b23;
  border-left:1px solid rgba(255,255,255,.04);
  border-top:1px solid rgba(255,255,255,.04);
}

#hlBottomHistoryList::-webkit-scrollbar-thumb,
.hl-bet-list::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, #415566 0%, #2c3946 100%);
  border-radius:10px;
  border:2px solid #121b23;
}

#hlBottomHistoryList::-webkit-scrollbar-thumb:hover,
.hl-bet-list::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg, #54708a 0%, #344757 100%);
}

.hl-bet-history-wrap{
  position:relative;
  z-index:1100;
}

.hl-bet-pop{
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  width:640px;
  background:#1a2129;
  border:1px solid #37b9ff;
  box-shadow:0 12px 28px rgba(0,0,0,.38);
  z-index:1200;
  padding:18px 18px 16px;
  height:420px;           /* 원하는 높이 */
  display:flex;
  flex-direction:column;
}

.hl-bet-pop[hidden]{
  display:none !important;
}

.hl-bet-pop__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
  flex:0 0 auto;
}

.hl-bet-pop__filter{
  display:flex;
  align-items:center;
  gap:10px;
  color:#d6dde7;
  font-size:14px;
  font-weight:700;
}

.hl-bet-pop__filter select{
  min-width:180px;
  height:34px;
  border:1px solid #4b5663;
  background:#3a3f47;
  color:#fff;
  padding:0 10px;
  font-size:14px;
}

.hl-bet-pop__close{
  width:30px;
  height:30px;
  border:0;
  background:transparent;
  color:#5ecbff;
  font-size:22px;
  line-height:1;
  cursor:pointer;
}

.hl-bet-pop__table-wrap{
  flex:1;                 /* 남은 영역 다 차지 */
  overflow-y:auto;
  overflow-x:auto;
}

.hl-bet-pop__table{
  width:100%;
  border-collapse:collapse;
  min-width:760px;
}

.hl-bet-pop__table thead th{
  position:sticky;
  top:0;
  z-index:2;
  background:#2c3139;
}

.hl-bet-pop__table th{
  background:#2c3139;
  color:#d2d8e0;
  font-size:13px;
  font-weight:700;
  padding:10px 8px;
  text-align:center;
  white-space:nowrap;
}

.hl-bet-pop__table td{
  border-top:1px solid rgba(255,255,255,.05);
  color:#dfe6ef;
  font-size:13px;
  padding:10px 8px;
  text-align:center;
  white-space:nowrap;
}

.hl-bet-pop__table td.is-win{
  color:#7adf54;
  font-weight:700;
}

.hl-bet-pop__table td.is-lose{
  color:#ff6b6b;
  font-weight:700;
}

.hl-bet-pop__table td.is-wait{
  color:#cfd7df;
}

.hl-bet-pop__empty{
  color:#bfc9d5;
  text-align:center;
  padding:22px 10px !important;
}

.hl-bet-pop__table-wrap{
  scrollbar-width:thin;
  scrollbar-color:#3e5b72 #121b23;
}

.hl-bet-pop__table-wrap::-webkit-scrollbar{
  width:8px;
  height:8px;
}

.hl-bet-pop__table-wrap::-webkit-scrollbar-track{
  background:#121b23;
  border-radius:10px;
}

.hl-bet-pop__table-wrap::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#4b6a82,#2f4658);
  border-radius:10px;
}

.hl-bet-pop__table-wrap::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,#5f86a5,#3a566c);
}

@media (max-width: 1280px){
  .hl-main{
    flex-direction:column;
    min-height:auto;
  }

  .hl-left{
    width:100%;
  }

  .hl-bottom-head,
  .hl-bottom-row{
    grid-template-columns:80px 46px 60px 68px 60px 80px minmax(140px,1fr);
    gap:6px;
  }

  .hl-right{
    width:100%;
  }

  .hl-bottom-history{
    height:280px;
  }

  .hl-bet-list{
    height:280px;
  }
}

@media (max-width: 900px){
  .hl-bet-pop{
    width:min(92vw, 640px);
    right:0;
  }
}

@media (max-width: 640px){
  .hl-bet-pop{
    width:calc(100vw - 16px);
    right:-6px;
    top:calc(100% + 6px);
    padding:12px;
	height:320px;
  }

  .hl-bet-pop__head{
    margin-bottom:12px;
  }

  .hl-bet-pop__filter{
    font-size:12px;
    gap:6px;
  }

  .hl-bet-pop__filter select{
    min-width:120px;
    height:30px;
    font-size:12px;
  }

  .hl-bet-pop__table th,
  .hl-bet-pop__table td{
    font-size:12px;
    padding:8px 6px;
  }
}

@media (max-width: 900px){
  .hl-topbar{
    flex-direction:column;
    align-items:flex-start;
  }

  .hl-left-panel{
    grid-template-columns:1fr 160px 1fr;
    gap:6px;
    align-items:stretch;
  }

  .hl-bet-col,
  .hl-card-stage,
  .hl-bet-grid{
    height:220px;
  }


  .hl-bet-btn{
    flex:1;
    height:110px;
	padding:6px 4px;
  }
  
  .hl-option{
    padding:4px 3px;
  }

  .hl-option strong{
    font-size:14px;
  }

  .hl-option span{
    font-size:12px;
  }

  .hl-card-stage{
    justify-content:center;
  }

  .hl-main-card{
    width:160px;
    min-height:220px;
  }

  .hl-bottom-history{
    height:280px;
  }

  .hl-bottom-head,
  .hl-bottom-row{
    grid-template-columns:74px 42px 56px 62px 56px 72px minmax(120px,1fr);
    gap:5px;
    font-size:12px;
  }

  .hl-bottom-row .result-cell img{
    width:24px;
    height:34px;
  }

  .hl-bet-list{
    height:250px;
  }
}

@media (max-width: 640px){
  .hl-wrap{
    border-left:0;
    border-right:0;
  }

  .hl-timerbar{
    height:32px;
  }

  .hl-timer-inner{
    padding:0 6px;
  }

  .hl-timer-text{
    font-size:13px;
  }

  .hl-top-actions{
    gap:4px;
  }

  .hl-top-action-btn{
    height:22px;
    padding:0 6px;
    font-size:11px;
  }

  .hl-top-action-text{
    display:inline-block;
  }

  .hl-board{
    padding:0;
  }

  .hl-left-panel{
    grid-template-columns:1fr 1fr 1fr;
    gap:4px;
    align-items:stretch;
    padding:4px;
  }

  .hl-bet-col,
  .hl-card-stage,
  .hl-bet-grid{
    height:190px;
  }

  .hl-bet-col{
    gap:4px;
  }

  .hl-bet-btn{
    height:auto;
    padding:4px 3px;
    border-radius:3px;
  }

  .hl-bet-title{
    font-size:20px;
  }

  .hl-bet-range{
    font-size:13px;
    margin-top:4px;
  }

  .hl-bet-rate{
    font-size:11px;
    margin-top:3px;
  }

  .hl-card-stage{
    justify-content:center;
    align-items:stretch;
  }

  .hl-main-card{
    width:100%;
    min-height:190px;
    max-width:none;
    height:100%;
  }

  .hl-bet-grid{
    gap:4px;
  }

  .hl-option{
    min-height:0;
    padding:3px 2px;
    border-radius:3px;
  }

  .hl-option strong{
    font-size:13px;
  }

  .hl-option span{
    font-size:10px;
    margin-top:2px;
  }

  .hl-option.full{
    min-height:0;
  }

  .hl-chip-area{
    grid-template-columns:1fr 1fr 96px;
    gap:6px;
    margin-top:6px;
    padding:0 6px 6px;
  }

  .hl-amount-box{
    height:42px;
    padding:0 10px;
  }

  .hl-amount-box span{
    font-size:12px;
  }

  .hl-amount-box strong{
    font-size:18px;
  }

  .hl-reset-btn{
    height:42px;
    font-size:18px;
  }

  .hl-chip-row{
    grid-template-columns:repeat(5,1fr);
    gap:6px;
    margin-top:0;
    padding:0 6px 6px;
  }

  .hl-chip-btn{
    height:42px;
    font-size:14px;
  }

  .hl-bottom-history{
    height:260px;
    padding:6px;
  }

  .hl-right{
    border-top:1px solid #22303d;
  }

  .hl-right-head,
  .hl-bet-item{
    grid-template-columns:1fr .8fr .9fr;
    font-size:13px;
    padding:8px 10px;
  }

  .hl-bet-list{
    height:260px;
  }

  .hl-bottom-head,
  .hl-bottom-row{
    grid-template-columns:68px 38px 52px 58px 54px 66px minmax(110px,1fr);
    gap:4px;
    font-size:11px;
  }

  .hl-bottom-head{
    padding:6px 0;
  }

  .hl-bottom-row{
    padding:6px 0;
  }

  .hl-bottom-row .result-cell img{
    width:22px;
    height:30px;
  }

  .hl-history-strip{
    gap:2px;
    padding:4px 6px;
    min-height:44px;
    overflow-x:auto;
    overflow-y:hidden;
    white-space:nowrap;
  }

  .hl-history-strip img{
    width:24px;
    height:34px;
    padding:0;
  }
  
  .hl-sound-icon{
    font-size:13px;
  }

  .hl-sound-slash{
    width:20px;
  }
}