/* ======================== */
/* 全局重置 & 字体 & 背景 */
/* ======================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-family: "Montserrat", sans-serif;
  /* 防止移动端横向滚动 */
  overflow-x: hidden;
}

body {
  background-color: #171152;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;

  max-width: 700px;
  margin: 0 auto;   /* 关键：让整体居中 */
}

/* ======================== */
/* Header & 转盘 */
/* ======================== */
.header-div {
    background-image: url(./img/he.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 100%;
    height: 130px;
    margin: -20px auto 0 auto;
    position: relative;
    
}

.logo {
    background-image: url(./img/Logo.png);
    background-repeat: no-repeat;
    background-position: left center; /* 对齐方式改为左对齐 */
    background-size: contain;
    
    /* 1. 设置尺寸 */
    width: min(180px, 30vw); 
    height: min(150px, 30vw);

    /* 2. 绝对定位到左上角 */
    position: absolute;
    top: -20px;   /* 距离顶部距离 */
    left: 12px;  /* 距离左边距离 */
    
    /* 3. 移除之前的居中 margin */
    margin: 0; 
    display: block;
    z-index: 100; /* 确保在最上层 */
}

.zp-div {
    background-image: url(./img/zp.gif);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: min(200px, 40vw);
    height: min(200px, 40vw);
    margin: -110px auto 0 auto;
    display: block;
    z-index: 1;
}


/* ======================== */
/* 手柄*/
/* ======================== */
.handle {
    background: url(./img/handle.png) no-repeat center;
    background-size: contain;
    width: 100%;
    height: 420px;   /* 调大这里 */
    margin: 10px auto 0;
    position: relative;
}
#drop-button {
    position: absolute;
    height: 260px;
    width: 260px;
    left: 50%;
    top: 36%;
    transform: translate(-50%, -50%);
    z-index: 10;

    border: none;
    background: none;
    outline: none;
    cursor: pointer;
}

/* ===== 外圈引导光波 ===== */
.btn-glow {
    position: absolute;
    inset: -20px;
    border-radius: 50%;
    pointer-events: none;

    background: radial-gradient(
        circle,
        rgba(255,255,255,0.6) 0%,
        rgba(255,255,255,0.3) 30%,
        rgba(255,255,255,0.1) 50%,
        rgba(255,255,255,0) 70%
    );

    animation: pulseGlow 2.2s ease-out infinite;
}

/* 光波扩散动画 */
@keyframes pulseGlow {
    0% {
        transform: scale(0.9);
        opacity: 0.7;
    }
    70% {
        transform: scale(1.4);
        opacity: 0;
    }
    100% {
        transform: scale(1.4);
        opacity: 0;
    }
}

/* ===== 按钮背景 ===== */
.btn-bg {
    position: absolute;
    inset: 0;
    overflow: hidden; /* 必须 */
    border-radius: 50%;    /* 关键：变圆形裁剪 */

    background: url(./img/placebetMob.png) no-repeat center;
    background-size: contain;

    filter: drop-shadow(0 0 18px rgba(255, 215, 0, 0.7));

    animation: breathe 2s ease-in-out infinite;
    transition: filter 0.3s ease;
}

/* ======================== */
/* 白色流光 */
/* ======================== */
.btn-bg::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -150%;
    width: 80%;
    height: 200%;

    pointer-events: none;

    background: linear-gradient(
        120deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.0) 40%,
        rgba(255,255,255,0.85) 50%,
        rgba(255,255,255,0.0) 60%,
        rgba(255,255,255,0) 100%
    );

    transform: rotate(25deg);

    animation: shineSweep 3s linear infinite;
}
@keyframes shineSweep {

    0% {
        left: -150%;
        opacity: 0;
    }

    8% {
        opacity: 1;
    }

    25% {
        left: 150%;
        opacity: 1;
    }

    30% {
        opacity: 0;
    }

    100% {
        left: 150%;
        opacity: 0;
    }
}


/* 呼吸 */
@keyframes breathe {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* 点击旋转 + 发光增强 */
.btn-bg.rotate-once {
    animation:
        breathe 2s ease-in-out infinite,
        spin 0.6s ease,
        clickGlow 0.6s ease;
}

/* 旋转 */
@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* 点击时金光增强 */
@keyframes clickGlow {
    0%   { filter: drop-shadow(0 0 12px rgba(255,215,0,0.7)); }
    50%  { filter: drop-shadow(0 0 40px rgba(255,215,0,1)); }
    100% { filter: drop-shadow(0 0 12px rgba(255,215,0,0.7)); }
}

/* ======================== */
/* 引导手指 */
/* ======================== */
.guide-hand {
    position: absolute;
    width: 160px;
    height: 160px;

    left: 60%;
    top: 50%;
    transform: translate(-50%, -50%);

    background: url(./img/finger.png) no-repeat center;
    background-size: contain;

    pointer-events: none;
    z-index: 20;

    animation: handGuide 1.4s ease-in-out infinite;
}

/* 手指点击动作 */
@keyframes handGuide {

    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
    }

    20% {
        transform: translate(-50%, -70%) scale(1);
        opacity: 1;
    }

    45% {
        transform: translate(-50%, -50%) scale(0.9);
    }

    65% {
        transform: translate(-50%, -70%) scale(1);
    }

    100% {
        transform: translate(-50%, -70%) scale(1);
        opacity: 0;
    }
}

/* ======================== */
/* 弹窗手指微调 */
/* ======================== */

/* 修正手指在弹窗按钮上的位置 */
.jackpot-guide {
    left: 85% !important;   /* 移动到按钮右侧 */
    top: 85% !important;    /* 稍微靠下 */
    width: 120px;           /* 弹窗里手指可以稍微小一点，显得更精致 */
    height: 120px;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.5));
}

/* 确保手指不会挡住按钮点击，且始终显示 */
#jackpot-overlay .guide-hand {
    display: block !important;
    pointer-events: none; /* 关键：点击可以穿透手指点到按钮 */
}

/* 按钮点击时，让手指也跟着缩放，显得更真实 */
.claim-btn:active + .jackpot-guide {
    transform: translate(-50%, -50%) scale(0.8);
    transition: 0.1s;
}

/* ======================== */
/* 引导气泡 */
/* ======================== */
.guide-bubble {
    position: absolute;
    left: 60%;
    top: 25%;
    transform: translate(-50%, -50%);

    padding: 10px 16px;
    border-radius: 14px;

    background: white;
    color: #333;
    font-weight: 700;
    font-size: 16px;
    white-space: nowrap;

    box-shadow:
        0 4px 15px rgba(0,0,0,0.25),
        0 0 10px rgba(255,255,255,0.6);

    pointer-events: none;
    z-index: 30;

    animation: bubbleFloat 2s ease-in-out infinite;
}

/* 小三角 */
.guide-bubble::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -8px;
    transform: translateX(-50%);

    border-width: 8px 8px 0 8px;
    border-style: solid;
    border-color: white transparent transparent transparent;
}

/* 气泡轻微浮动 */
@keyframes bubbleFloat {
    0%   { transform: translate(-50%, -50%) translateY(0); }
    50%  { transform: translate(-50%, -50%) translateY(-6px); }
    100% { transform: translate(-50%, -50%) translateY(0); }
}


/* ===== 文字 ===== */
.btn-text {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    height: 100%;
    font-size: 40px;
    font-weight: 1000;
    color: white;

    pointer-events: none;

    text-shadow:
        0 0 6px rgba(255,255,255,0.8),
        0 0 12px rgba(255,255,255,0.6);
}

/* 底部金额区域 */
#balls {
position: absolute;
    right: 20px; /* 距离右侧 20px */
    top: 50%;
    transform: translateY(-50%); /* 垂直居中 */

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    font-weight: 900;
    font-size: 2.6em;
    color: white;

    text-shadow: 0 0 10px rgba(255,255,255,0.6);
}

/* $ 和数字同一行 */
#balls::before {
    content: "$";
    font-size: 1em;
    font-weight: 400;
    opacity: 0.8;
    text-shadow: 0 0 10px rgba(255,255,255,0.6);
}


#balls.win-animate {
    animation: winPop 0.4s ease, glowFlash 0.4s ease;
}

@keyframes glowFlash {
    0%   { text-shadow: 0 0 5px #fff; }
    50%  { text-shadow: 0 0 25px gold; }
    100% { text-shadow: 0 0 5px #fff; }
}

/* ======================== */
/* Canvas 游戏区 */
/* ======================== */
.canvas-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: -20px auto 0 auto;
  position: relative;
}
.canvas-container canvas {
  width: min(680px, 100vw);
  height: auto;
  display: block;
}

#bg-coins {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

#canvas {
    position: relative;
    z-index: 1;
}


/* ======================== */
/* Notes 倍率条 (重点修改区) */
/* ======================== */
.notes {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  margin-top: -5px;
  width: 100%;
  max-width: 620px;
  padding: 0 5px;
}
.notes .note {
  display: flex;
  /* 关键：垂直排列内容 */
  flex-direction: column; 
  align-items: center;
  justify-content: center;
  
  flex: 1; /* 让宽度自适应容器 */
  min-width: 0; /* 防止 flex 溢出 */
  height: 24px; /* 增加高度以容纳两行文字 */
  
  border-radius: 5px;
  text-align: center;
  border-bottom: solid 4px transparent;
  font-size: 10px; /* 基础字号 */
  color: white; 
  font-weight: 800;
  line-height: 0.8; /* 紧凑行间距 */
  font-family: 'Montserrat', sans-serif;
}

/* 数字部分 */
.notes .note div:first-child {
    font-size: 1.1em;
}
/* X 部分 */
.note-x {
  font-size: 1em;
  color: white;   /* 改成白色 */
  font-weight: bold;
  line-height: 1;
}

.notes .note[data-pressed=true] {
  animation: press 0.5s;
}
@keyframes press {
  0% { border-bottom-width: 4px; }
  50% { border-bottom-width: 0; }
  100% { border-bottom-width: 4px; }
}

/* Notes 渐变色 */
.notes .note:nth-child(1), .notes .note:nth-child(17) { background-color: rgb(211, 47, 2); border-color: rgb(126, 21, 21); }
.notes .note:nth-child(2), .notes .note:nth-child(16) { background-color: #9182fb; border-color: #5437de; }
.notes .note:nth-child(3), .notes .note:nth-child(15) { background-color: #ae5afd; border-color: #7732f4; }
.notes .note:nth-child(4), .notes .note:nth-child(14) { background-color: #e77ae0; border-color: #ba2cdc; }
.notes .note:nth-child(5), .notes .note:nth-child(13) { background-color: #f07eba; border-color: #ed45b6; }
.notes .note:nth-child(6), .notes .note:nth-child(12) { background-color: #f39465; border-color: #ee5c90; }
.notes .note:nth-child(7), .notes .note:nth-child(11) { background-color: #f39f63; border-color: #e779ad; }
.notes .note:nth-child(8), .notes .note:nth-child(10) { background-color: #f39f63; border-color: #e779ad; }
.notes .note:nth-child(9) { background-color: #f39f63; border-color: #e779ad; }



/* 全屏冲击动画：缩放 + 极高亮度(Bloom) */
@keyframes screen-impact {
    0% { transform: scale(1); filter: brightness(1) contrast(1); }
    10% { transform: scale(1.1); filter: brightness(2.5) contrast(1.2) blur(1px); }
    100% { transform: scale(1); filter: brightness(1) contrast(1) blur(0px); }
}

.big-win-active {
    animation: screen-impact 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* 全屏大奖遮罩层 */
#jackpot-overlay {
    display: none;
    position: fixed;
    top: 0; 
    left: 0;
    width: 700px; 
    height: 100vh;
    /* 修改点：调整渐变透明度，使其更加深邃均匀，减少底部断层感 */
    background: radial-gradient(
        circle at center,
        rgba(0, 0, 0, 0.4) 0%,   /* 中心稍浅，突出弹窗内容 */
        rgba(0, 0, 0, 0.75) 100% /* 边缘加深，增加电影质感 */
    );
    z-index: 9999;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    /* 修改点：增强模糊度，并加入饱和度提升，让背景颜色透过时更高级 */
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%); /* 兼容性 */
    
    /* 建议：如果背景是纯色，可以加一个细微的内阴影 */
    box-shadow: inset 0 0 100px rgba(0,0,0,0.5);
}

.jackpot-content {
    text-align: center;
    transform: scale(0.5);
    transition: transform 0.5s cubic-bezier(0.17, 0.89, 0.32, 1.27);
}

.jackpot-content.show { transform: scale(1); }

.win-title { color: #ffd700; font-size: 80px; text-shadow: 0 0 30px #f00; margin: 0; font-weight: 900; }
.win-amount { color: #fff; font-size: 120px; font-weight: 900; text-shadow: 0 0 20px #ffd700; margin: 20px 0; }
.slot-machine { font-size: 60px; margin-bottom: 30px; }

.claim-btn {
    padding: 20px 60px; font-size: 30px; font-weight: bold; color: #000;
    background: linear-gradient(180deg, #ffe500, #ff9100);
    border: none; border-radius: 50px; cursor: pointer;
    box-shadow: 0 10px 0 #b36300, 0 20px 40px rgba(0,0,0,0.5);
}
.claim-btn:active { transform: translateY(5px); box-shadow: 0 5px 0 #b36300; }



/* ===================================================== */
/* ===================================================== */
/* ================= 手机适配（重点）==================== */
/* ===================================================== */
/* ===================================================== */

@media (max-width: 700px) {

body{
    max-width: 100%;
}

/* header */
.header-div{
    height: 18vw;
    margin-top:-3vw;
}

.logo{
    width:26vw;
    height:26vw;
    top:-5vw;
    left:2vw;
}

/* 转盘 */
.zp-div{
    width:38vw;
    height:38vw;
    margin-top:-16vw;
}

/* 手柄高度 */
.handle{
    height:70vw;
}

/* 按钮 */
#drop-button{
    width:40vw;
    height:40vw;
    top:38%;
}

/* 手指 */
.guide-hand{
    width:22vw;
    height:22vw;
}

/* 按钮文字 */
.btn-text{
    font-size:6vw;
}

/* 金额 */
#balls{
    font-size:6vw;
    right:3vw;
}

/* canvas */
.canvas-container{
    margin-top:-3vw;
}

/* notes */
.notes .note{
    height:4vw;
    font-size:1.6vw;
}

/* jackpot 全屏 */
#jackpot-overlay{
    width:100vw;
    left:0;
    transform:none;
}

/* jackpot 字体 */
.win-title{ font-size:12vw; }
.win-amount{ font-size:16vw; }
.slot-machine{ font-size:10vw; }

.claim-btn{
    font-size:5vw;
    padding:4vw 8vw;
}

}