/* ===== 乐游-休闲小游戏平台 · 现代风设计系统 ===== */
:root{
  --green:#22c55e; --green-d:#16a34a; --green-l:#dcfce7;
  --blue:#3b82f6;  --blue-l:#dbeafe;
  --orange:#f97316; --red:#ef4444;
  --bg:#f5f6f8; --card:#ffffff; --line:#eef0f3;
  --t1:#1f2937; --t2:#6b7280; --t3:#9ca3af;
  --r:16px; --r-sm:12px;
  --sh:0 2px 12px rgba(17,24,39,.06);
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  background:#e9ebee;color:var(--t1);-webkit-font-smoothing:antialiased;
}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
button{font-family:inherit}

.app{
  max-width:480px;margin:0 auto;min-height:100vh;background:var(--bg);
  position:relative;padding-bottom:78px;box-shadow:0 0 40px rgba(0,0,0,.06);
  display:flex;flex-direction:column;
}
.app>main{flex:1 0 auto}

/* ===== 顶部栏 ===== */
.topbar{
  position:sticky;top:0;z-index:20;background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);display:flex;align-items:center;gap:8px;
  padding:12px 16px;border-bottom:1px solid var(--line);
}
.logo{
  width:30px;height:30px;border-radius:9px;background:var(--green);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:15px;flex:none;
}
.brand-name{font-weight:700;font-size:16px;letter-spacing:.5px}
.spacer{flex:1}
.coin-chip{
  background:var(--green-l);color:var(--green-d);font-size:12px;font-weight:600;
  padding:5px 10px;border-radius:999px;
}
.avatar{
  width:30px;height:30px;border-radius:999px;background:var(--blue);color:#fff;
  display:grid;place-items:center;font-size:13px;font-weight:600;
}

/* ===== 通用按钮 ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:none;cursor:pointer;font-size:14px;font-weight:600;
  border-radius:999px;padding:9px 18px;transition:.15s;
}
.btn-green{background:var(--green);color:#fff}
.btn-green:hover{background:var(--green-d)}
.btn-outline{background:#fff;color:var(--green-d);border:1.5px solid var(--green)}
.btn-outline:hover{background:var(--green-l)}
.btn-gray{background:#f1f2f4;color:var(--t2)}
.btn-lg{width:100%;padding:13px 24px;font-size:15px}
.btn-sm{padding:6px 14px;font-size:13px}
.btn[disabled]{opacity:.55;cursor:not-allowed}

/* ===== 搜索框 ===== */
.search{
  display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:10px 16px;margin:12px 16px 4px;color:var(--t3);font-size:14px;
}
.search input{border:none;outline:none;background:transparent;flex:1;font-size:14px;font-family:inherit}

/* ===== 主推大卡 ===== */
.feature{
  display:block;position:relative;margin:12px 16px 0;border-radius:var(--r);
  overflow:hidden;box-shadow:var(--sh);color:#fff;text-decoration:none;
}
.feature>img{display:block;width:100%;height:210px;object-fit:cover}
.feature .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.68))}
.feature .badge{
  position:absolute;top:12px;left:12px;background:var(--orange);color:#fff;
  font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;z-index:2;
}
.feature .info{position:absolute;left:14px;right:104px;bottom:14px;color:#fff;z-index:2}
.feature .info h3{font-size:20px;font-weight:700;margin-bottom:4px;text-shadow:0 2px 8px rgba(0,0,0,.45)}
.feature .info .sub{
  font-size:12px;opacity:.92;text-shadow:0 1px 6px rgba(0,0,0,.45);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.feature .price-bubble{
  position:absolute;right:14px;bottom:14px;background:rgba(34,197,94,.95);color:#fff;
  padding:7px 13px;border-radius:12px;font-size:13px;font-weight:700;line-height:1.3;
  text-align:center;z-index:2;white-space:nowrap;box-shadow:0 4px 12px rgba(0,0,0,.25);
}

/* ===== 区块 ===== */
.section{padding:18px 16px 0}
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.section-head h2{font-size:16px;font-weight:700}
.section-head .more{font-size:13px;color:var(--t2)}

/* ===== 游戏列表项 ===== */
.game-item{
  display:flex;gap:12px;align-items:center;background:#fff;border-radius:var(--r-sm);
  padding:12px;margin-bottom:10px;box-shadow:var(--sh);
}
.game-item .thumb{width:58px;height:58px;border-radius:12px;object-fit:cover;background:var(--line);flex:none}
.game-item .meta{flex:1;min-width:0}
.game-item .meta h3{font-size:15px;font-weight:600;margin:4px 0 3px}
.game-item .meta p{font-size:12px;color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.tag{display:inline-block;font-size:11px;font-weight:600;padding:2px 8px;border-radius:6px;margin-right:5px}
.tag-blue{background:var(--blue-l);color:var(--blue)}
.tag-green{background:var(--green-l);color:var(--green-d)}
.tag-orange{background:#ffedd5;color:var(--orange)}

/* ===== 游戏大卡（游戏中心）===== */
.game-card{
  background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);margin-bottom:14px;
}
.game-card .cover{width:100%;height:170px;object-fit:cover;background:var(--line)}
.game-card .cover-wrap{position:relative;display:block}
.game-card .cover-icon{
  position:absolute;left:14px;bottom:14px;width:52px;height:52px;border-radius:14px;
  border:2px solid rgba(255,255,255,.85);box-shadow:0 4px 14px rgba(0,0,0,.28);background:var(--line);
}
.game-card .body{padding:14px}
.game-card .body h3{font-size:17px;font-weight:700;margin-bottom:6px}
.game-card .body p{font-size:13px;color:var(--t2);line-height:1.5;margin-bottom:10px}
.game-card .foot{display:flex;align-items:center;justify-content:space-between;margin-top:4px}
.game-card .price{color:var(--orange);font-weight:700;font-size:16px}
.game-card .price small{font-size:12px;color:var(--t3);font-weight:400}

/* ===== 卡片 / 表单 ===== */
.card{background:#fff;border-radius:var(--r);padding:20px;box-shadow:var(--sh);margin:16px}
.card h2{font-size:17px;font-weight:700;margin-bottom:16px}
.field{margin-bottom:14px}
.field label{display:block;font-size:13px;color:var(--t2);margin-bottom:6px}
.field input{
  width:100%;border:1px solid var(--line);background:#f9fafb;border-radius:12px;
  padding:12px 14px;font-size:14px;font-family:inherit;outline:none;transition:.15s;
}
.field input:focus{border-color:var(--green);background:#fff}
.field input:disabled{background:#f3f4f6;color:var(--t3);cursor:not-allowed}

/* ===== 会员套餐档位 ===== */
.pkg-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.pkg{
  position:relative;background:#fff;border:1.5px solid var(--line);border-radius:var(--r-sm);
  padding:18px 12px;text-align:center;cursor:pointer;transition:.15s;
}
.pkg:hover{border-color:var(--green);transform:translateY(-2px)}
.pkg .c{font-size:21px;font-weight:700;color:var(--green-d)}
.pkg .y{font-size:13px;color:var(--t2);margin-top:5px}
.pkg .bonus{
  position:absolute;top:-1px;right:-1px;background:var(--red);color:#fff;
  font-size:11px;font-weight:600;padding:2px 9px;border-radius:0 12px 0 12px;
}

/* ===== 个人中心 ===== */
.profile{
  background:linear-gradient(135deg,var(--green),var(--green-d));color:#fff;
  border-radius:var(--r);padding:22px;margin:16px;
}
.profile .row{display:flex;align-items:center;gap:12px}
.profile .avatar-lg{
  width:52px;height:52px;border-radius:999px;background:rgba(255,255,255,.22);
  display:grid;place-items:center;font-size:22px;font-weight:700;
}
.profile .name{font-size:18px;font-weight:700}
.profile .bal{margin-top:16px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.profile .bal b{font-size:28px;font-weight:800;white-space:nowrap}
.profile .bal span{font-size:13px;opacity:.9}

.order{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line)}
.order:last-child{border-bottom:none}
.order .o-left{display:flex;align-items:center;gap:10px;min-width:0}
.order .oi{width:38px;height:38px;border-radius:10px;object-fit:cover;flex:none;background:var(--line)}
.order .o-main{font-size:14px;font-weight:600}
.order .o-sub{font-size:12px;color:var(--t3);margin-top:3px}
.status{font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px}
.status-paid{background:var(--green-l);color:var(--green-d)}
.status-pending{background:#fef3c7;color:#b45309}

/* ===== 页面底部：到底了 + 公司备案信息 ===== */
.page-end{
  display:flex;align-items:center;justify-content:center;gap:12px;
  padding:20px 16px 16px;color:var(--t3);font-size:12px;
}
.page-end::before,.page-end::after{content:"";height:1px;flex:1;max-width:80px;background:var(--line)}

.company{
  background:#2f3134;color:#c3c6cb;font-size:12.5px;line-height:2.05;
  padding:18px 18px 22px;margin-bottom:-78px;
  overflow-wrap:anywhere;word-break:break-word;max-width:100%;
}
.company a{color:#4ade80}
.company .icon-row{display:flex;align-items:center;gap:6px}
.company .badge{width:15px;height:15px;flex:none}
.company .name{color:#f1f3f5;font-weight:600}
.company .links{display:flex;gap:20px;margin:8px 0 16px;flex-wrap:wrap}
.company .links a{font-size:12.5px}
/* 浮动「回到顶部」：默认隐藏，JS 判定页面真的能滚动后才浮现 */
.to-top{
  position:fixed;bottom:88px;right:max(16px, calc(50% - 224px));
  display:flex;align-items:center;gap:6px;z-index:29;
  padding:10px 16px;border:none;border-radius:999px;
  background:var(--green);color:#fff;font-size:13px;font-weight:600;
  box-shadow:0 6px 20px rgba(34,197,94,.45);cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(10px) scale(.96);
  transition:opacity .22s ease,transform .22s ease,visibility .22s;
}
.to-top.show{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.to-top svg{width:16px;height:16px}
.to-top:active{transform:scale(.97)}

/* ===== 合规页（隐私政策 / 用户协议）===== */
.doc{padding:18px 18px 4px}
.doc h1{font-size:19px;font-weight:700;margin-bottom:6px}
.doc .meta{font-size:12px;color:var(--t3);margin-bottom:14px}
.doc h2{font-size:15px;font-weight:700;margin:20px 0 8px}
.doc p{font-size:13.5px;line-height:1.9;color:var(--t2);margin-bottom:8px}
.doc ul{margin:6px 0 10px;padding-left:20px}
.doc li{font-size:13.5px;line-height:1.9;color:var(--t2);margin-bottom:2px}
.doc strong{color:var(--t1);font-weight:600}
.doc .back{display:inline-flex;align-items:center;gap:4px;font-size:13px;color:var(--t2);padding:14px 18px 0}

/* ===== 底部导航 ===== */
.bottomnav{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;
  background:#fff;display:flex;border-top:1px solid var(--line);padding:8px 0 10px;z-index:30;
}
.bottomnav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;color:var(--t3);font-weight:500}
.bottomnav a.active{color:var(--green-d)}
.bottomnav svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ===== 浮动按钮 ===== */
.float-cta{
  position:fixed;bottom:88px;right:max(16px, calc(50% - 224px));background:var(--green);color:#fff;
  border:none;border-radius:999px;padding:11px 18px;font-size:13px;font-weight:600;
  box-shadow:0 6px 20px rgba(34,197,94,.45);z-index:29;cursor:pointer;display:flex;align-items:center;gap:6px;
}

/* ===== 弹窗 ===== */
.mask{position:fixed;inset:0;background:rgba(17,24,39,.45);display:none;align-items:flex-end;justify-content:center;z-index:60}
.mask.show{display:flex}
.sheet{
  background:#fff;width:100%;max-width:480px;border-radius:22px 22px 0 0;padding:22px 20px 26px;
  animation:up .22s ease;
}
@keyframes up{from{transform:translateY(30px);opacity:.6}to{transform:translateY(0);opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
.sheet h3{font-size:17px;font-weight:700;text-align:center;margin-bottom:6px}
.sheet .sub{font-size:13px;color:var(--t2);text-align:center;margin-bottom:18px}
.pay-opt{
  display:flex;align-items:center;gap:12px;border:1.5px solid var(--line);border-radius:14px;
  padding:14px;margin-bottom:12px;cursor:pointer;transition:.15s;
}
.pay-opt:hover{border-color:var(--green);background:#f7fdf9}
.pay-opt .ic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-size:18px;flex:none}
.pay-opt .txt{flex:1}
.pay-opt .txt b{font-size:14px;font-weight:600;display:block}
.pay-opt .txt small{font-size:12px;color:var(--t3)}
.pay-opt .arr{margin-left:auto;color:var(--t3);font-size:18px;line-height:1}

/* ===== 设置列表（点击弹出表单）===== */
.cell{
  display:flex;align-items:center;gap:12px;width:100%;
  background:none;border:none;padding:14px 0;text-align:left;cursor:pointer;
  border-bottom:1px solid var(--line);
}
.cell:last-child{border-bottom:none}
.cell-ic{
  width:34px;height:34px;border-radius:10px;flex:none;
  display:grid;place-items:center;background:var(--green-l);color:var(--green-d);
}
.cell-ic svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cell-txt{flex:1;min-width:0}
.cell-txt b{font-size:14px;font-weight:600;display:block}
.cell-txt small{
  font-size:12px;color:var(--t3);display:block;margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cell .arr{margin-left:auto;color:var(--t3);font-size:18px;line-height:1;flex:none}
.cell:active{opacity:.6}

/* ===== 弹窗底部按钮组 ===== */
.sheet .field{text-align:left}
.sheet-btns{display:flex;gap:10px;margin-top:6px}
.sheet-btns .btn{flex:1}

/* ===== 权益条目 ===== */
.benefit{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.benefit:last-child{border-bottom:none}
.benefit .bn{
  width:24px;height:24px;border-radius:8px;flex:none;display:grid;place-items:center;
  background:var(--green-l);color:var(--green-d);font-size:12px;font-weight:500;
}
.benefit b{font-size:13.5px;font-weight:500;display:block;margin-bottom:2px}
.benefit p{font-size:12px;color:var(--t3);line-height:1.7}

/* ===== 提示 ===== */
.toast{
  position:fixed;top:22px;left:50%;transform:translateX(-50%) translateY(-10px);
  background:rgba(17,24,39,.92);color:#fff;padding:10px 20px;border-radius:999px;
  font-size:13px;z-index:99;opacity:0;transition:.25s;pointer-events:none;white-space:nowrap;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ===== 空状态 ===== */
.empty{text-align:center;color:var(--t3);font-size:13px;padding:40px 0}
.hint{font-size:12px;color:var(--t3);line-height:1.6}
.mode-bar{
  margin:12px 16px 0;background:#fff7ed;border:1px solid #fed7aa;color:#c2410c;
  font-size:12px;padding:9px 14px;border-radius:12px;line-height:1.5;
}

/* ===== 游玩页 ===== */
.play-head{display:flex;align-items:center;gap:12px;margin:10px 16px 0;padding:12px;background:#fff;border-radius:var(--r);box-shadow:var(--sh)}
.play-head .oi-lg{width:48px;height:48px;border-radius:13px;object-fit:cover;flex:none;background:var(--line)}
.play-head .play-title{font-size:16px;font-weight:700}
.play-head .play-sub{font-size:12px;color:var(--t3);margin-top:3px}
.play-wrap{padding:12px 16px}
.play-frame{width:100%;height:calc(100vh - 240px);min-height:420px;border:none;border-radius:var(--r);background:#fff;box-shadow:var(--sh)}
.back{display:inline-flex;align-items:center;gap:4px;color:var(--t2);font-size:14px;margin:12px 16px 0}

/* ===== PC 扫码支付（Native）===== */
.qr-box{text-align:center;padding:6px 0 14px}
.qr-frame{
  width:200px;height:200px;margin:0 auto 10px;background:#fff;border:1px solid var(--line);
  border-radius:12px;display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.qr-frame svg{width:100%;height:100%;display:block}
.qr-frame img{width:100%;height:100%;display:block}
.qr-box .hint{font-size:13px}

/* ===== 会员状态卡（会员页顶部）===== */
.vip-card{padding:16px 18px}
.vip-card .vip-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.vip-card .vip-label{font-size:12px;color:var(--t3)}
.vip-card .vip-top .tag{margin-right:0;flex:none;line-height:1.5}
.vip-card .vip-main{
  margin-top:9px;font-size:24px;font-weight:800;line-height:1.2;
  color:var(--t2);white-space:nowrap;
}
.vip-card .vip-main em{font-size:13px;font-weight:600;font-style:normal;color:var(--t2);margin-right:6px}
.vip-card.is-vip{
  background:linear-gradient(135deg,#f0fdf4 0%,#ffffff 62%);
  border:1px solid var(--green-l);
}
.vip-card.is-vip .vip-main{color:var(--green-d)}