* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}
html, body {
    width: 100%;
    height: 100%;
    background: url(images/bg.png) no-repeat center center;
    background-size: cover;
}
/* 清理后：干净、正确、不冲突、背景正常显示 */
.page {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    flex-direction: column;
    background-color: transparent; /* 让页面透明，透出body背景 */
    z-index: 10;
}
.page.active {
    display: flex;
}
/* 声音开关 */
    .sound-toggle {
  position: fixed;
  top: 15px;    /* 距离顶部15px */
  left: 15px;   /* 距离左边15px */
  width: 38px;  /* 按钮大小 */
  height: 38px;
  z-index: 9999; /* 层级最高，不会被任何东西挡住 */
  cursor: pointer;
}
      
.sound-toggle img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 保持图片比例不变形 */
}

        
    /* 登录页 */
#loginPage {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto; /* 👈 键盘弹出自动抬升 关键 */
}

#loginPage input {
  padding: 12px 16px;
  border: 0; /* 去掉边框，用你的背景图 */
  border-radius: 8px;
  font-size: 1rem;
  width: 220px;
  background: transparent;
  outline: none;
  text-align: center;
  position: absolute;
  top: 54%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 11;
}

/* 旧按钮样式隐藏（你之前系统自带的） */
#loginPage button {
  display: none !important;
}

.paw-image {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  height: auto;
  z-index: 2;
  pointer-events: none;
}

.login-page {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 10;
}

.input-box {
  position: relative;
  z-index: 10;
  text-align: center;
  margin-bottom: 20px;
}

.input-box img {
  width: 280px;
  display: block;
  margin: 0 auto;
}

.start-btn {
  background:  #c3dddc;
  color: white;
  padding: 12px 30px;
  border-radius: 10px;
  font-weight: bold;
  cursor: pointer;
  z-index: 10;
  position: relative;
}
 /* ===================== 规则页===================== */
/* 规则弹窗 专属样式 */
#rulePage {
  display: none;          /* 启用 Flex 布局 */
  align-items: center;    /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  width: 100vw;
  height: 100vh;
}
        .rule-modal {
  width: calc(100% - 40px);  /* 左右各空20px */
  position: relative;
 max-width: 400px;
  position: relative;
  /* 加这一句：限制层级，不让被底层装饰盖住 */
  z-index: 100;
}
.rule-modal img {
  width: 100%;
  display: block;
}
/* 进入游戏按钮：相对弹窗底部居中、圆角 */
.rule-modal .enter-game-btn {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 30px;
  border: none;
  padding: 10px 25px;
  background: #c3dddc;
  cursor: pointer;
  /* 关键补充：拉高按钮内部层级，能点击 */
  z-index: 105;
}
#rulePage.active {
  display: flex;
}        

        /* ===================== UNO 游戏界面 ===================== */
        /* 顶部：出牌区 */
       /* ===================== UNO 游戏界面（百分比版） ===================== */
/* 顶部：出牌区 36% */
.game-system-area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 36%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: url(images/system.png) no-repeat center center;
    background-size: contain;
}
        .system-card-box {
    width: 100px;
    height: 150px;
    border-radius: 14px;
    border: 2px solid #fff;
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    background-size: cover;
    background-position: center;
    background-color: #fff;
}

.game-tip {
    /* 👇 改成绝对定位，贴在手牌区底部 */
    position: absolute;
    bottom: 50px; /* 离底部 20px，离按键区刚好一点距离 */
    left: 20px; /* 左边距 20px，和你设计图一样 */
    font-size: 17px;
    font-weight: bold;
    color: #222;
    text-align: left; /* 文字左对齐 */
}

/* 中部：手牌区 54% */
/* 1. 父容器：只负责定位置，不负责居中 */
/* 1. 父容器：保留 flex，给子元素一个正确的环境 */
.game-hand-area {
    position: absolute;
    top: 36%;
    left: 0;
    width: 100%;
    height: 54%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 2. 中间容器：作为手牌的定位基准 */
#playerHand {
    width: 100%;
    max-width: 400px; /* 限制扇形最大宽度，防止超出 */
    height: 100%;
    position: relative;
    padding: 0 20px;
    box-sizing: border-box;
}

        .hand-row {
  position: absolute;
  width: 100%;
  height: 150px;
  /* 你已经有的代码不动，只加下面这一行 */
  transform: translateY(0);
}
/* 3. 手牌行：水平居中的正确写法 */
#playerHand .card {
    width: 94.6px;
    height: 148.5px;
    border-radius: 10px;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    background-size: cover;
    background-position: center;
    background-color: #fff;
    
    /* 核心修改：全部叠在父容器的中点 */
    position: absolute;
    left: 50%;
    margin-left: -47.3px; /* 宽度的一半，确保中心对齐 */
    
    /* 旋转基点设为卡片下方较远的位置，产生大扇形效果 */
    transform-origin: center 200%; 
    transition: all 0.3s ease;
    z-index: 1;
}
        
#playerHand .card.playable { 
    cursor: pointer;
    box-shadow: 0 0 12px 4px #ffd76b;
    transform: scale(1.08);
    z-index: 1;
}

/* 底部底图 */
#bottomDecor {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 24%;
    background: url(images/bottom.png) no-repeat center bottom;
    background-size: 100% 100%;
    z-index: 0;
    pointer-events: none;
    display: none;
}

#gamePage.active ~ #bottomDecor {
    display: block;
}

/* ------------------------------ */
/* #region 底部按钮区 */
.touch-btn.rule { left:3%; }
.touch-btn.lottery { left: 27%; }
.touch-btn.bag { left: 75%; }
/* #endregion */
.touch-btn.lottery{
  left:27%;
  width:45%;
}
.touch-btn.rule,.touch-btn.bag{
  width:20%;
}

/* 游戏内 查看规则弹窗（独立样式，不影响规则页） */
.modal-rule {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.3);
  display: none;
  z-index: 999;
  align-items: center;
  justify-content: center;
}
.modal-rule.show {
  display: flex;
}

.modal-rule .modal-content {
  position: relative;
  width: calc(100% - 40px);
  max-width: 500px;
  z-index: 1000;
  margin-top: -30px;
}
.modal-rule img {
  width: 100%;
  display: block;
}

.modal-rule .close-rule-btn {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 30px;
  border: none;
  padding: 10px 25px;
  background: #c3dddc;
  cursor: pointer;
  z-index: 1001;
}

/* 【重点】contact弹窗 重命名为 lottery弹窗 */
.modal-lottery {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.3);
  display: none;
  z-index: 999;
  align-items: center;
  justify-content: center;
}
.modal-lottery.show {
  display: flex;
}

.modal-lottery .modal-content {
  position: relative;
  width: calc(100% - 80px);
  max-width: 400px;
  z-index: 1000;
}
.modal-lottery img {
  width: 100%;
  display: block;
}

.modal-lottery .close-lottery {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 30px;
  border: none;
  padding: 10px 25px;
  background: #c3dddc;
  cursor: pointer;
  z-index: 1001;
}
        

        /* 背包页 */
#bagPage {
    position: relative;
    width: 100vw;
    height: 100vh;
    background: url(images/bagpagebg.png) no-repeat center center;
    background-size: cover;
    overflow: hidden; /* 防止背景图出现滚动条 */
}

/* 核心区域：距离顶端20%，底端10% */
.bag-content-wrapper {
    position: absolute;
    top: 22%;
    bottom: 10%;
    left: 5%;  /* 留点左右边距 */
    right: 5%;
    
    overflow-y: auto; /* 卡片多了可以上下滚动 */
    padding: 10px;
    /* 如果想让这个区域变透明或有底色，可以在这加 background */
}

.bag-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 每排3个 */
    gap: 15px; /* 卡片之间的间距 */
}

.bag-item {
    text-align: center;
    background: rgba(255, 255, 255, 0.8); /* 让卡片有个浅色底色 */
    border-radius: 8px;
    padding: 5px;
}

.bag-item img {
    width: 100%;
    height: auto; /* 保持比例 */
    aspect-ratio: 2/3; /* 统一卡片比例 */
    object-fit: contain;
    display: block;
}
        /* 背包页 左下角 返回图标（无背景、纯箭头） */
.back-btn {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 999;
    background: transparent !important;
    border: none !important;
    font-size: 30px;
    font-weight: bold;  /* 👈 加粗 */
    color: #779e9b;     /* 👈 你要的颜色 */
    cursor: pointer;
    padding: 0;
}

        /* 背包页 左下角 返回图标（无背景、纯箭头） */
/* NFC 弹窗 */
        .image-popup {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.7);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            visibility: hidden;
            opacity: 0;
            transition: 0.3s;
        }
        .image-popup.show {
            visibility: visible;
            opacity: 1;
        }
        .popup-box {
            background: #fff;
            padding: 20px;
            border-radius: 16px;
            max-width: 90%;
            text-align: center;
             position: relative;
        }
        .popup-img {
            max-width: 100%;
            max-height: 70vh;
            margin-bottom: 15px;
        }
        /* NFC 弹窗文字样式美化 */
#popupDesc {
  font-size: 13px;         /* 文字大小 */
  line-height: 1.6;        /* 行间距（让换行不挤） */
  color: #333;             /* 文字颜色 */
  text-align: center;      /* 居中 */
  padding: 10px 15px;     /* 内边距 */
  font-weight: 500;        /* 粗细 */
}

/* 标题名字（王文虎、眼镜、足球…）单独加大 */
#popupDesc::first-line {
  font-size: 20px !important;
  font-weight: bold !important;
  color: #779e9b !important;
}
        /* 弹窗按钮 - 和返回按钮同款样式 */
        .popup-btn-wrap {
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 20px; /* 两个按钮之间的间距 */
    z-index: 999;
}
.popup-btn {
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    color: #fff;
    background: #c3dddc !important;
    border: none !important;
    border-radius: 12px;
    padding: 8px 16px;
}

        /* 背包详情弹窗 */
        .bag-detail-popup {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.8);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 99999;
            visibility: hidden;
            opacity: 0;
            transition: 0.3s;
        }
        .bag-detail-popup.show {
            visibility: visible;
            opacity: 1;
        }
        .detail-box {
            background: #fff;
            width: 85%;
            border-radius: 16px;
            padding: 20px;
            text-align: center;
        }
        .bag-detail-popup.show .detail-box {
    transform: scale(1);
}
        .detail-img {
            width: 100%;
            max-width: 300px;
            border-radius: 12px;
            margin-bottom: 15px;
        }
        .detail-desc {
            font-size: 16px;
            color: #333;
            line-height: 1.6;
            margin-bottom: 20px;
        }

        /* 通关主弹窗 */
.win-main-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
.win-main-popup.show {
    display: flex;
}

/* 弹窗盒子：和图片一样大 + 内容垂直居中 */
.win-main-box {
    position: relative;
    width: 85%;
    max-width: 380px;
    aspect-ratio: 3 / 4;
    background:transparent;
    border-radius: 20px;
    background-image: url("images/uno.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
    padding-bottom: 100px; 
}

/* 标题居中 */
.win-main-box h2 {
    font-size: 24px;
    margin: 0;
    width: 100%;
    position: absolute;
    top: 55%;
    left: 50%; /* 👈 把原来的 left:0 改成 left:50% */
    transform: translateX(-50%); /* 👈 加上这一行 */
    text-align: center;
}
/* 文字垂直水平居中 */
.win-main-box p {
    font-size: 16px;
    margin: 0;
    padding: 0 10px;
    text-align: center;
    width: 100%;
    position: absolute;
    top: 65%;
    left: 0;
}

/* 👇 100% 保留你要的按钮样式！只改可见位置 */
/* 分享图片弹窗 */
        .share-win-popup {
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: rgba(0,0,0,0.3);
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 999999;
        }
        .share-win-popup.show {
            display: flex;
        }
        .share-card {
            width: 90%;
            max-width: 380px;
            position: relative;
        }
        .share-card img {
            width: 100%;
            border-radius: 16px;
        }
        .share-text {
            position: absolute;
            top: 20px;
            right: 20px;
            color: #333;
            font-size: 16px;
            line-height: 1.6;
            text-align: right;
            white-space: nowrap;
        }
        /* 分享弹窗按钮样式（和胜利弹窗一样） */
.share-btn-wrap {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 15px;
    z-index: 999;
}
.share-btn {
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    color: #fff;
    background: #c3dddc !important;
    border: none !important;
    border-radius: 12px;
    padding: 8px 16px;
   
}
        .touch-btn {
    position: fixed;
    bottom: 2%;
    width: 22%;
    height: 8%;
    z-index: 999;
    background: transparent;
}