@charset "UTF-8";

.duck-category {display: flex; gap: 10px; margin-bottom: 1rem;}
.duck-category a {flex: 1; text-align: center; padding: 0.5rem 0; border-radius: 5px; background: #ddd;}
.duck-category .duck-active {background: #3568dc; color: #fff; font-weight: bold;}

#race-track {
  position: relative;
  width: 100%;
  padding: 10px;
  background: url('/raceduck/img/bg.png');
  background-size: 100% 100%;
  background-position: bottom;
  border: 2px solid #ccc;
  margin-bottom: 20px;
  overflow: hidden;
  padding-bottom: 45%;
}

#start-line {
  background: url('/raceduck/img/line.png') no-repeat;
  background-size: 78%;
  width: 120px;
  height: 48%;
  position: absolute;
  bottom: 5%;
  left: 15%;
  overflow: hidden;
  transition: transform 1s ease;
}

#end-line {
  background: url('/raceduck/img/line.png') no-repeat;
  background-size: 78%;
  width: 120px;
  height: 48%;
  position: absolute;
  bottom: 5%;
  right: 0;
  transform: translateX(250%);
  overflow: hidden;
  transition: transform 10s linear;
}

.horse {
  position: absolute;
  left: 0;
  font-size: 2rem;
  transition: transform 0.1s ease-in-out;
}
.horse img {width: 100%;}
.horse.running {
  animation: runMove 0.7s infinite alternate;
}
@keyframes runMove {
  0% { transform: translateY(0); }
  100% { transform: translateY(-5px); }
}

#horse1 {top: 30%; left: 10%; width: 10%}
#horse2 {top: 40%; left: 8%; width: 10%}
#horse3 {top: 50%; left: 6%; width: 10%}
#horse4 {top: 60%; left: 4%; width: 10%}
#horse5 {top: 70%; left: 2%; width: 10%}

#result div {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  background: #fff;
  border-radius: 10px;
  padding: 1rem;
  text-align: center;
  box-shadow: 0 2px 6px #000000a1;
}
#result div button {display: block; width: 100%; border-radius: 50rem; margin-top: 5px; border: 0; outline: 0; background: #3568dc; color: #fff;}


.game-box-con {
  background: #333;
  padding: 1rem;
}

.game-info-box {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px dotted #ddd;
  margin-bottom: 1rem;
  color: #fff;
  padding-bottom: 5px;
}


.game-info-admin {display: inline-flex; gap: 5px; align-items: center;}
.game-info-admin span a {
  background: linear-gradient(45deg, #c200ff, #3b77ff);
  color: #fff;
  border-radius: 3px;
  padding: 5px 10px;
  position: relative;
  top: -2px;
}
.game-info-admin>a {color: #fff; font-weight: bold;}
.game-info-admin>a:hover {color: red;}


.game-bet-box {
  display: flex;
  gap: 10px;
}
.game-bet-box>div {flex: auto; min-width: 0;}

.duck-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  text-align: center;
}

.duck-options input[type="radio"] {
  display: none;
}

.duck-options label {
  display: inline-block;
  padding: 10px 0;
  margin: 0;
  border-radius: 8px;
  background: #adadad;
  color: #333;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  flex: 1;
}

.duck-options input[type="radio"]:checked + label {
  background: #fff;
  color: #3568dc;
  font-weight: bold;
}

.startbtncs {
  flex: 0 0 20%;
  padding: 10px 0;
  font-weight: 600;
  background: #3568dc;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.startbtncs:hover {
  background: #005fa3;
}

.startbtncs:active {
  transform: translateY(2px);
}

.checkerbtn {border: 1px solid #ddd; background: #3568dc; font-weight: bold; padding: 7px 0; border-radius: 5px; display: block; width: 100px; margin: 0 auto; color: #fff;}
.checkerbtn:hover {opacity: 0.7;}
#setform {border: 1px solid #eee; padding: 3rem; background: #eee;}
#setform p {padding: 5px; background: #ddd; margin-bottom: 2rem;}
.set-title {font-size: 18px; font-weight: bold;}
.set-title #loseaddBtn,
.set-title #winaddBtn {border: 0; outline: 0; line-height: 1; background: #3568dc; color: #fff; padding: 8px 10px; font-size: 12px; font-weight: bold;}
.set-title #loseaddBtn:hover,
.set-title #winaddBtn:hover {opacity: 0.7;}
.form-set {display: flex; gap: 10px; align-items: center; padding: 5px 10px; margin-bottom: 0.5rem; background: #ddd;}
.form-set label {margin:0; display: inline-flex;}
.form-set label input {border: 0; outline: 0; box-shadow: none; margin-left: 0.2rem; flex: auto;}
.form-set .deleteBtn {border: 0; padding: 8px 5px; line-height: 1; outline: 0; background: #ddd; color: #333; font-size: 12px;}
.form-set .deleteBtn:hover {opacity: 0.7;}

.lose-con {margin-bottom: 2rem;}
.win-con {margin-bottom: 1rem;}

.gameback {text-align: center; width: 200px; margin: 0 auto; display: block; margin-top: 2rem;}

.windetails {margin: 1rem 0;}
.windetails ul {display: flex; border: 1px solid #ddd; font-size: 12px; border-bottom: 0;}
.windetails .windehead ul {background: #eee; color: #333;}
.windetails>ul:last-child {border-bottom: 1px solid #ddd;}
.windetails ul li {padding: 5px; border-right: 1px solid #ddd; flex: 1;}
.windetails ul li:last-child {border-right: 0;}

.game-my-history {display: flex; gap: 5px; align-items: center;}
.game-my-history span a {
  background: #3568dc;
  color: #fff;
  border-radius: 3px;
  padding: 5px 10px;
  position: relative;
  top: -2px;
}

#soundToggle {
  position: absolute;
  width: 33px;
  z-index: 2;
  left: 5px;
  top: 5px;
  outline: 0;
  border: 0;
  border-radius: 50rem;
  padding: 4px 0;
  background: #00000070;
}


#my_coupon_list>div {display: flex; align-items: center; gap: 10px; flex-wrap: wrap;  margin: 10px 0;}
#my_coupon_list>span {color: #eee;}

.my_coupon_ea {
  flex: 0 0 calc(16.5% - 7px);
}

.my_coupon_ea input[type="radio"] {
  display: none;
}

.my_coupon_ea label {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #fff;
  border: 2px dashed #444;
  border-radius: 14px;
  padding: 16px 20px;
  width: 100%;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease-in-out;
  overflow: hidden;
}

/* 절취선 효과 */
.my_coupon_ea label::before,
.my_coupon_ea label::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 16px;
  height: 32px;
  background: #1e1e1e;
  border: 2px solid #444;
  border-radius: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.my_coupon_ea label::before {
  left: -10px;
}

.my_coupon_ea label::after {
  right: -10px;
}

/* 선택된 쿠폰 */
.my_coupon_ea input[type="radio"]:checked + label {
  background: #3568dc;
  border-color: #fff;
  color: #fff;
  font-weight: bold;
}

.my_coupon_ea input[type="radio"]:checked + label::before,
.my_coupon_ea input[type="radio"]:checked + label::after {
  background: #fff;
  border-color: #fff;
}

/* 텍스트 구조 */
.my_coupon_ea label span:first-child {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 4px;
}

.my_coupon_ea label span:last-child {
  font-size: 12px;
  opacity: 0.8;
}



@media (max-width: 991px) {
  .my_coupon_ea {flex: 0 0 calc(50% - 5px);}
  .my_coupon_ea label {text-align: center; padding: 5px 10px;}
  .my_coupon_ea label span:first-child {
    font-weight: bold;
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  #start-line, #end-line {background-size: 40%;}
  #result div {font-size: 12px; width: 60%;}
  .game-box-con {font-size: 12px;}
  .duck-options {gap: 2px;}

  .windetails ul li:nth-child(1) {flex: 0 0 70px;}
  .windetails ul li:nth-child(2) {flex: 0 0 70px;}
  .windetails ul li:nth-child(3) {flex: 0 0 70px;}

  .duck-mo-none {display: none;}
}