/* 触发按钮 / div 示例 */
  .open-modal-btn {
    padding: 14px 32px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.45);
  }
  .open-modal-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.6);
  }

  .open-modal-div {
    padding: 14px 32px;
    border-radius: 12px;
    background: rgba(255,255,255,0.07);
    border: 1.5px solid rgba(255,255,255,0.15);
    color: #ccc;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.2s;
    user-select: none;
  }
  .open-modal-div:hover { background: rgba(255,255,255,0.13); }

  /* 遮罩 + 模糊背景 */
  .modal-overlay {
    position: fixed;
    inset: 0;
    /* 背景压暗 + 模糊 */
    background: rgba(59, 30, 97, 0.5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 9999;

    /* 淡入动画 */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s ease, visibility 0.28s ease;
  }

  /* 遮罩激活时 */
  .modal-overlay.is-open {
    opacity: 1;
    visibility: visible;
  }

  /* 弹窗面板 */
  .modal-panel {
    position: relative;
    width: 100%;
    max-width: 1000px;
    height:1080px;    
    overflow: hidden;    
    position: relative; top:150px; left:0; 
    background:none;    
  }

  .modal-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    
    background-repeat: no-repeat;
    background-position: center 455px;
    z-index: 10; /* 高于卡片的层级 */
    pointer-events: none; /* 本层不拦截，以便点击按钮 */
}

.modal-content-wrapper {
    position: relative;
    z-index: 20; /* 按钮与文字置于最上层 */    
}

  /* 按钮组对齐 */
  .btn_set {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;
  gap: 20px;               /* 按钮间距（可调） */
  margin: 19px auto 0;     /* 上边距 + 水平居中 (auto) */
  width: fit-content;      /* 重要：宽度仅占按钮尺寸 */
  min-width: 400px;        /* 保证两个按钮的最小宽度 */
  }

  /* 单个按钮样式 */
  .btn_true {
    flex: 0 0 auto;          /* 固定按钮，防止被拉伸 */
    width: auto;             /* 宽度自动 */
    cursor: pointer;
  }

  .btn_true img {
    display: block;
    width: 100%;             /* 图片适配容器 */         
  }
  
  .hidden {
    display: none !important;
  }

  .msg_box .btn_play {
    margin: 0 auto;
    text-align: center;
    width: fit-content; /* 区域贴合按钮大小 */
  }

  .msg{ font-weight:700; font-size:25px; color:#340d2c; text-align:center; margin:0 auto; padding-top:595px; line-height:30px; }

  .modal-overlay.is-open .modal-panel {
    transform: translateY(0) scale(1);
    opacity: 1;
  }

  /* 标题区 */
  .modal-header {
    padding: 50px 40px 0px;    
  }

  .modal-title {
    color: #383020;
    font-size: 35px;
    font-weight: 700;
    letter-spacing: -0.3px;
  }

  /* 注意事项 */
  .cautionBox {
    width:750px;    
    background:#3b1e61;
    border:2px solid #7045a9;  
    border-radius: 20px;
    overflow:hidden; 
    display: flex;             
    flex-direction: column;
  }

  .cau_title {
    font-size: 30px;
    font-weight: 500;
    letter-spacing:0;
    color:#fff; 
    padding:50px 0 20px 50px;
  }  

  .cau_list {
    flex: 1;
    padding-bottom:30px;
  }

  .cau_list li {
    position: relative;
    padding-left: 12px;
    color:#e1d2bb;
    font-size: 18px;
    margin-left:50px;  
    line-height:30px;      
  }
  
  .cau_list li::before {
    content: '-';
    position: absolute;
    left: 0;
    color: #e1d2bb;
    font-size: 16px;
    font-weight:500;
    line-height: 1.8;
  }

  /* 注意事项 */
  .previewBox {
    width:550px;    
    background:#3b1e61;
    border:2px solid #7045a9;  
    border-radius: 20px;
    overflow:hidden; 
    display: flex;  
    justify-content: center;           
    flex-direction: column;
    font-size: 16px;
    font-weight:500;    
    color: #c5a0f6;
    text-align:center;    
  }

  .preview_title {
    padding-top: 36px;
    margin: 0 auto;
    line-height: 0;
  }
  .preview_title img {
    display: block;
    margin: 0 auto;
    max-width: 90%;
    height: auto;
  }

  .preview_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 10px;
    margin: 24px auto 8px;
    padding: 0 24px;
    max-width: 520px;
    box-sizing: border-box;
  }
  .preview_row {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 88px;
  }
  .preview-icon {
    display: block;
    width: 64px;
    height: 64px;
    object-fit: contain;
  }
  .preview-name {
    margin-top: 6px;
    color: #e5d3fc;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    word-break: break-all;
  }

  .preview_item { margin:0 auto; padding:30px 0 20px 0; }  
  .preview_txt { font-size: 16px; font-weight:300; color: #c5a0f6; line-height:1.5; padding-bottom:20px; }

  /* 道具弹窗 */
  .itemBox {
    width:300px;    
    background:#3b1e61;
    border:2px solid #7045a9;  
    border-radius: 20px;
    overflow: hidden; 
    display: flex;  
    justify-content: center;           
    flex-direction: column;
    font-size: 16px;
    font-weight:500;    
    color: #c5a0f6;
    text-align:center;    
  }

  .itemBox_title {
    font-size: 30px;
    font-weight: 500;
    letter-spacing:0;
    color:#fff; 
    padding-top:35px;
    margin:0 auto;
  }

  .item_result_body { margin:0 auto; padding:20px 0 30px 0; overflow: visible; }
  .item_result_icon { margin-bottom:8px; text-align:center; }
  .item_result_icon img { display: block; margin: 0 auto; width: 47px; height: 47px; object-fit: contain; }
  .item_result_name { font-size: 16px; font-weight:300; color: #ffe7be; }

  .item-result-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: url('https://static.web.sdo.com//dn/pic/dn_26act/0812event/p1-card.png') no-repeat center / 100% 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  }

  .item-result-overlay .item_result_iconb img {
    display: block;
    margin: 0 auto;
    max-width: 100%; /* 适配盒子尺寸 */
  }

  .item-result-overlay .item_result_nameb {
    font-size: 14px;
    font-weight: 300;
    color: #ffe7be;
    text-align: center;
    word-break: keep-all;
  }

  /* 正文 */
  .modal-body {
    padding: 0;
  }

  .modal-body ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .modal-body li {
    color: #383020;
    font-size: 16px;
    line-height: 1.4;
    padding-left: 14px;
    position: relative;
  }
  .modal-body li::before {
    content: '·';
    position: absolute;
    left: 0;
    color: #383020;
    font-size: 16px;
    line-height: 1.4;
  }

  /* 用附加类按需覆盖（预留） */

  .modal-body--event li {
    font-size: 15px;
    color: rgba(255, 255, 255, 1);
  }
  .modal-panel-preview {    
    width: 800px;
    padding-top:50px;
    max-height: 90vh;        /* 不超过屏幕高度 80% */
    background: #541e17;
    border: 2px solid #95372c;        
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;  /* 标题 / 表格 / 底栏纵向排列 */
  }

  .modal-body-preview {
    width: 690px;
    height: 771px;
    background: #9e1a00;
    border:2px solid #95372c;
    background:#541e17;
    padding: 20px;    
  }

  .modal-panel-exchange {    
    width: 1200px;
    max-height: 100vh;        /* 不超过屏幕高度 80% */
    background: #12182e;
    border: 2px solid #304079;        
    border-radius: 20px;
    overflow: hidden;
    display: flex;    
    flex-direction: column; 
  }


  /* 底栏（关闭按钮） */
  .modal-footer {
    margin: 0 -50px;
    padding: 0;      
    display: flex;
    justify-content: center;      
  }

  .modal-close-btn {
    width: 100%;
    padding: 25px;
    border: none;
    background: #95372c;
    color: #fff;
    font-size: 16px;
    font-weight: 300;
    cursor: pointer;
    letter-spacing: 0.5px;
    transition: background 0.15s, color 0.15s;    
  }
  .modal-close-btn:hover {    
    color: #fff;
    background: #592a98;
  }

  /* 底栏：去边距并贴底 */
.modal-panel-whouse .modal-footer {
    width: 100%;
    margin: 0 !important;   /* 去掉原有 -50px 等边距 */
    padding: 0 !important;  /* 去掉底栏自身 padding */
    display: flex;
}

/* 通栏关闭按钮样式 */
.modal-close-btn-full {
    width: 100%;
    height: 70px;           /* 按钮高度（可调） */
    margin: 0;
    padding: 0;
    border: none;
    background: #95372c;    /* 原有背景色 */
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    
    /* 仅底部圆角与父级 20px 一致 */
    border-radius: 0 0 20px 20px; 
    
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.modal-close-btn-full:hover {
    background: #9d372a;
    color: #fff;
}


  .modal-close-btn-exchange {
    width: 100%;
    padding: 25px;
    border: none;
    background: #304079;
    color: #fff;
    font-size: 16px;
    font-weight: 300;
    cursor: pointer;
    letter-spacing: 0.5px;
    transition: background 0.15s, color 0.15s;    
  }
  .modal-close-btn-exchange:hover {    
    color: #fff;
    background: #334896;
  }

  .modal-close-btn-cau {
    width: 100%;
    padding: 25px;
    border: none;
    background: #7045a9;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    letter-spacing: 0.5px;
    transition: background 0.15s, color 0.15s;
  }
  .modal-close-btn-cau:hover {
    background: #592a98;
    color: #fff;
  }

/* 记录弹窗面板 */
  .modal-overlay.is-open .modal-panel-log {
      opacity: 1;
      transform: translateY(0) scale(1);
  }

  .modal-panel-log {
    position: relative;
    width: 100%;
    max-width: 500px;
    border-radius: 16px;
    overflow: hidden;
    background: #4a1bb2;
    box-shadow: 0 24px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.08);

    /* 面板自身淡入+缩放 */
    transform: translateY(18px) scale(0.97);
    transition: transform 0.32s cubic-bezier(0.34, 1.3, 0.64, 1), opacity 0.28s ease;
    opacity: 0;
    border:1px solid #6f46f5;
  }

  .modal-header-log {
    padding: 20px 50px 18px;
    border-bottom: 1px solid #6f46f5;
  }
  .modal-title-log {
    color: #fff;
    font-size: 24px;
    font-weight: 300;
    letter-spacing: -0.3px;
  }


  /* 正文 */
  .modal-body-log {
    padding: 22px 50px 24px;
    max-height:300px;
    overflow-y: auto;
    /* 滚动条样式 */
    scrollbar-width: thin;
    scrollbar-color: #c9baa4 rgba(255,255,255,1);
  }

  /* Chrome/Edge 滚动条 */
  .modal-body-log::-webkit-scrollbar {
      width: 4px;
  }
  .modal-body-log::-webkit-scrollbar-track {
      background: rgba(255,255,255,1);
      border-radius: 10px;
  }
  .modal-body-log::-webkit-scrollbar-thumb {
      background: #6f46f5;
      border-radius: 10px;
  }
  .modal-body-log::-webkit-scrollbar-thumb:hover {
      background: #c9baa4;
  }

  .modal-body-log ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .modal-body-log li {
    color: rgba(255,255,255,0.88);
    font-size: 14px;
    line-height: 1;
    padding-left: 14px;
    position: relative;    
  }
  .modal-body-log li::before {
    content: '·';
    position: absolute;
    left: 0;
    color: rgba(255,255,255,0.6);
    font-size: 12px;
    line-height: 1;
  }

  .modal-panel-list {
    position: relative;
    width: 100%;
    max-width: 650px;
    border-radius: 16px;
    overflow: hidden;
    background: #4a1bb2;
    box-shadow: 0 24px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.08);

    /* 面板自身淡入+缩放 */
    transform: translateY(18px) scale(0.97);
    transition: transform 0.32s cubic-bezier(0.34, 1.3, 0.64, 1), opacity 0.28s ease;
    opacity: 0;
    border:1px solid #6f46f5;
  }

   /* 1. 弹窗打开时显示 panel-list */
  .modal-overlay.is-open .modal-panel-list {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  .item_ticket { margin-top:40px; border-radius:10px; border:1px solid #bf983e; background:#fef9c2; color:#75451d; font-size:14px; font-weight:500; padding:9px 10px; }

/* 领取道具 */  
.box_item {
    display: flex; 
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    width: 320px;
    height: auto;
    padding: 40px 0px;
    
    background: #320a36;
    border: 2px solid #dfc79a;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    
    /* --- 定位关键 --- */
    position: absolute;    /* 由 relative 改为 absolute */
    left: 34.1%;            /* 水平居中基准点 */
    transform: translateX(-50%); /* 精确水平居中 */
    top: 200px;     
    /* 改这里的数值调节高度 */    
    
    z-index: 99999;
}

.box_item.active {
    display: flex !important;
}

.item_img { 
    display: flex;          /* 使用 flex */
    justify-content: center; /* 水平居中 */
    align-items: center;    /* 垂直居中（按需） */
    width: 100%;            /* 占满父级宽度 */
    margin: 0 auto; 
}

/* 防止图片撑破布局 */
.item_img img {
    display: block;
    max-width: 100%;        /* 超出盒子则缩小 */
    height: auto;
}

.item_info {
    text-align: center;
    width: 100%;
    margin:0 auto;
}

.item_msg {
    font-size: 20px;      /* 适当调节尺寸 */
    color: #fff;          /* 深色背景配浅色文字 */
    margin-bottom: 20px;
    line-height: 1.4;
}

.item_name {
    font-size: 16px;
    color: #fff;
    margin: 10px 0 10px 0;
}

/* 预览表格 */

/* 增加表格外层 wrapper */
.prev-table-wrap {
    overflow-y: auto;        /* 仅此区域滚动 */
    flex: 1;                 /* 占满剩余空间 */
    padding: 0 40px;
    margin-bottom:20px;
}
.prev-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 16px; }
.prev-table thead tr th:first-child { border-radius: 15px 0 0 0;  /* 左上角 */ }
.prev-table thead tr th:last-child { border-radius: 0 15px 0 0;  /* 右上角 */ }
/* 去掉外边框，只留内边框 */
.prev-table thead th:not(:last-child) { border-right: none; }
.prev-table tbody td:not(:last-child) { border-right: none; }
.prev-table thead tr { background: none;  }
.prev-table thead th { color: #fff; font-weight: 500; font-size:16px; padding: 15px 16px; border: 1px solid #8B3A3A; background: #6B2A2A; text-align: center; position: sticky; top: 0; z-index: 1; }
.prev-table tbody tr { background: #3D1A1A; }
.prev-table tbody tr:nth-child(even) { background: #4A2020; }
.prev-table tbody tr:hover { background: #5A2828; }
.prev-table tbody td { color: #E8C89A; height:45px; border: 1px solid #6B3030; text-align: center; border-top: none; vertical-align: middle; }
.prev-table tbody td img { object-fit: contain; cursor:help; }
.td-inner { display: inline-flex; align-items: center; gap: 6px; }

/* 服务器仓库说明 */
/* 弹窗：用最大高度代替固定高度 */
/* 1. 弹窗主面板 */
.modal-panel-whouse {
    width: 800px;
    height: 90vh;            /* 使用固定高度或 max-height */
    padding-top: 50px;       /* 保留顶部间距 */
    background: #541e17;
    border: 2px solid #95372c;
    border-radius: 20px;
    display: flex;
    flex-direction: column;  /* 标题/滚动区/底栏纵向排列 */
    overflow: hidden;        /* 防止子元素溢出圆角 */
}

/* 2. 滚动区：含标题与表格，占满除底栏外空间 */
.whouse-scroll-area {
    flex: 1;                 /* 本区域伸展并把底栏顶下去 */
    overflow-y: auto;        /* 仅启用纵向滚动 */
    overflow-x: hidden;      /* 禁止横向滚动 */
    padding: 0 40px;
}

/* 3. 表格：固定宽度并防止文字溢出 */
.whouse-table {
    width: 100% !important;  /* 贴合父级宽度 */
    table-layout: fixed;     /* 强制固定列宽（防横向滚动关键） */
    word-break: break-all;   /* 长文本换行 */
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 50px;     /* 表格间距 */
}

/* 4. 表头固定（滚动时跟随） */
.whouse-table thead th {
    position: sticky;
    top: -1px;               /* 避免细缝 */
    z-index: 10;
    background: #6B2A2A;     /* 需要背景色以免文字重叠 */
}

/* 5. 底部按钮区：去边距并贴底 */
.modal-panel-whouse .modal-footer {
    width: 100%;
    margin: 0;               /* 重要：去掉 -50px 等负边距 */
    padding: 0;
    flex-shrink: 0;          /* 保持底栏高度 */
}

/* 指定各列比例（利于防横向滚动） */
.whouse-table th:nth-child(1) { width: 50%; } /* 道具名 */
.whouse-table th:nth-child(2) { width: 25%; } /* 交易 */
.whouse-table th:nth-child(3) { width: 25%; } /* 服务器仓库 */

/* 4. 底部按钮区（去边距贴底） */
.modal-footer {
    width: 100%;
    margin: 0;             /* 务必去掉原有 -50px 边距 */
    padding: 0;
    display: block;        /* 取消 flex */
}

.whouse-table thead th { 
    color: #fff; 
    font-weight: 500; 
    font-size: 16px; 
    padding: 15px 16px; 
    border: 1px solid #8B3A3A; 
    background: #6B2A2A; 
    text-align: center;
    position: sticky;        /* 滚动时固定表头 */
    top: 0; 
    z-index: 1; 
}

.whouse-table tbody td { 
    color: #E8C89A; 
    height: 45px; 
    border: 1px solid #6B3030; 
    text-align: center; 
    vertical-align: middle; 
}

.whouse-table tbody tr:nth-child(even) { background: #4A2020; }
.whouse-table tbody tr:hover { background: #5A2828; }

/* 整体滚动条样式 */
.whouse-scroll-area::-webkit-scrollbar { width: 6px; }
.whouse-scroll-area::-webkit-scrollbar-track { background: #3D1A1A; }
.whouse-scroll-area::-webkit-scrollbar-thumb { background: #8B3A3A; border-radius: 4px; }


/* 滚动条样式（可选） */
.prev-table-wrap::-webkit-scrollbar { width: 6px; }
.prev-table-wrap::-webkit-scrollbar-track { background: #3D1A1A; }
.prev-table-wrap::-webkit-scrollbar-thumb { background: #8B3A3A; border-radius: 3px; }

/* 扭蛋球相关 */
.gotcha-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* 球出现动画 */
.gotcha-ball {
  cursor: pointer;
  animation: ballPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  transition: transform 0.15s;
}

.gotcha-ball img:hover {
  transform: scale(1.05);
  animation: ballWiggle 3s ease-in-out infinite;  /* 补充 */
}

.gotcha-ball img {
  width: 342px;
  height: 342px;
  object-fit: contain;
  transition: transform 0.2s ease;  /* 补充 */
  animation: ballWiggle 3s ease-in-out infinite;  /* 补充 */
}

.gotcha-ball {
  cursor: pointer;
  animation: ballPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  transition: transform 0.15s;
}

.gotcha-open-bg {
  animation: ballFloat 3s ease-in-out 0.4s infinite;
}

/* 仅负责浮动 */
.gotcha-ball-float {
  animation: ballFloat 2s ease-in-out 0.4s infinite;
}

@keyframes ballFloat {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-12px); }
  100% { transform: translateY(0px); }
}

@keyframes ballPop {
  0%   { transform: scale(0); opacity: 0; }
  70%  { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes ballWiggle {
  0%    { transform: rotate(-3deg); }
  85%   { transform: rotate(3deg); }   /* 大部分时间静止 */
  88%   { transform: rotate(-3deg); }
  91%   { transform: rotate(3deg); }
  94%   { transform: rotate(-2deg); }
  97%   { transform: rotate(2deg); }
  100%  { transform: rotate(0deg); }
}

/* 打开状态 */
.gotcha-open {
  display: none;
  animation: openPop 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.gotcha-open.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes openPop {
  0%   { transform: scale(0.5); opacity: 0; }
  70%  { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.gotcha-open-bg {
  width: 287px;
  height: 405px;
    
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  flex-direction: column;
  align-items: center;  
}

/* 内容区：对齐打开态中央深色面板 */
.gotcha-content {
  width: 180px;
  height: 160px; 
  margin-top:6px; 
  display: flex;  
  gap:6px;  
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff0da;
  font-size:16px;
  line-height:18px;
  text-align: center;
}

/* 高分辨率适配（如 2560x1440） */
@media screen and (min-height: 1200px) {
    .box_item {
        /* 大屏气泡更靠下，再下移一些 */
        margin-top: 0px; 
    }
}

/* 十连 ON/OFF 切换按钮 */
.btn_10cha {
  /* 位置请像 btn_gotcha 一样在 main.css 用 absolute 定位 */
  position: absolute;
  top:1390px;
  left:49.9%;
  transform: translateX(-49.9%);
  display: inline-flex;
  flex-direction: row;
  gap: 6px;  
  align-items: center;
  justify-content: center;
  width: 125px;
  height: 30px;
  border-radius: 30px;
  background: #1f2220;    
  cursor: pointer;
  user-select: none;
  transition: background 0.25s, box-shadow 0.25s, border-color 0.25s;
  position: absolute;   /* 在 main.css 用 top/left 定位 */
  z-index: 99999;
}

.btn_10cha:hover {  
}

/* ON 状态 */
.btn_10cha.is-on {
  background: #541e17;
  border-color: #fffacd;  
}

.cha_label {
  font-size: 17px;
  font-weight: 500;
  color: #6a6b6a;
  line-height: 1;
  letter-spacing: 0px;
  display: inline;
}

.cha_state {
  font-size: 17px;
  font-weight: 800;
  color: #6a6b6a;
  line-height: 1.2;
  transition: color 0.25s;
}

.btn_10cha.is-on .cha_state {
  color: #fddd36;  
}
.btn_10cha.is-on .cha_label {
  color: #fddd36;  
}



.gotcha-content_10{ display: flex;
  flex-wrap: wrap;
   flex-direction: column;
  align-items: center;
  justify-content: center; gap:12px; }

/* 十连弹窗 */
/* 十连弹窗专用背景——可按需改尺寸/图片 */
.gotcha-open-bg--10 {
  width: 978px;    /* 十连结果窗宽度（可调） */
  height: 575px;   /* 十连结果窗高度（可调） */
            /* 背景图占位 */      
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 5 列 2 行网格 */
.gotcha-content--10 {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: 10px;
  padding: 20px;
  color: #fff0da;
  font-size: 16px;
}

/* 单个道具格 */
.gotchatem {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  aspect-ratio: 1 / 1;  
  border: 1px solid #541e17;
  border-radius: 15px;
  padding:5px;
  text-align: center;
  color: #fff0da;
  font-size: 16px;
  line-height: 1.4;
  box-sizing: border-box;
  letter-spacing: -1px;  
}
.gotchatem img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  display: block;
}