* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
    background: linear-gradient(160deg, #23272e 0%, #3a3f47 100%);
    min-height: 100vh;
    color: #333;
}

.hidden { display: none !important; }

.app {
    width: 100%;
    max-width: 560px;   /* 页面加宽，头部信息不再拥挤 */
    margin: 0 auto;
    padding: 16px;
    padding-bottom: 40px;
}

/* 顶部 */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 8px 0 16px;
    color: #fff;
}
.logo {
    font-size: 22px;
    font-weight: bold;
    white-space: nowrap;
    flex-shrink: 0;
}
.user-area {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;           /* 允许内部收缩触发省略号 */
    white-space: nowrap;    /* 用户区整体不换行 */
}
#userWelcome {
    max-width: 160px;       /* 长昵称省略号显示，悬停看全名 */
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
}
.count-badge {
    background: #ffd700;
    color: #7a4b00;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: bold;
    flex-shrink: 0;         /* 次数徽章完整显示 */
    white-space: nowrap;
}

/* 按钮 */
.btn {
    border: none;
    border-radius: 8px;
    padding: 9px 16px;
    font-size: 14px;
    cursor: pointer;
    transition: opacity .2s, transform .1s;
}
.btn:active { transform: scale(.96); }
.btn-primary {
    background: linear-gradient(135deg, #ff6b6b, #ee5a24);
    color: #fff;
    font-weight: bold;
}
.btn-ghost {
    background: rgba(255,255,255,.25);
    color: #fff;
}
.btn-link {
    background: none;
    color: #764ba2;
    padding: 4px;
    font-size: 13px;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* 首页按钮 */
.home-btn {
    color: rgba(255,255,255,.9);
    text-decoration: none;
    font-size: 13px;
    background: rgba(255,255,255,.2);
    padding: 5px 10px;
    border-radius: 14px;
    white-space: nowrap;
    flex-shrink: 0;
}
#btnLogout { flex-shrink: 0; }
#btnLogin { flex-shrink: 0; white-space: nowrap; }
.home-btn:hover { background: rgba(255,255,255,.35); }
.btn-sm2 { padding: 5px 12px; font-size: 12px; }
.btn-ghost2 { background: #eee; color: #666; }

/* 我的（个人信息） */
.my-card {
    background: #fff;
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
}
.my-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid #f5f5f5;
}
.my-row:last-of-type { border-bottom: none; }
.my-col { flex-direction: column; align-items: stretch; }
.my-label { color: #999; font-size: 13px; width: 60px; flex-shrink: 0; }
#myAddress {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 8px;
    font-size: 13px;
    resize: vertical;
    font-family: inherit;
    box-sizing: border-box;
}
#myAddress:focus { border-color: #764ba2; outline: none; }
.my-hint { color: #bbb; font-size: 12px; margin-top: 10px; text-align: center; }
.addr-saved { color: #27ae60; font-size: 12px; }

/* 自定义确认弹窗 & 提醒 */
.confirm-box {
    background: #fff;
    border-radius: 16px;
    padding: 22px 20px;
    width: 320px;
    text-align: center;
    font-size: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.confirm-box p { margin-bottom: 8px; color: #333; }
.confirm-sub { color: #999; font-size: 13px; }
.confirm-error { color: #e74c3c; }
#confirmInput {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 9px 10px;
    font-size: 14px;
    box-sizing: border-box;
    outline: none;
}
#confirmInput:focus { border-color: #764ba2; }
.confirm-btns { display: flex; gap: 10px; margin-top: 14px; }
.confirm-btns .btn { flex: 1; }

/* 标签页 */
.tabs {
    display: flex;
    background: rgba(255,255,255,.2);
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 16px;
}
.tab {
    flex: 1;
    border: none;
    background: none;
    padding: 10px;
    border-radius: 9px;
    color: #fff;
    font-size: 15px;
    cursor: pointer;
}
.tab.active {
    background: #fff;
    color: #764ba2;
    font-weight: bold;
}
.page { display: none; }
.page.active { display: block; }

/* 九宫格（始终水平居中，窗口变化不影响） */
.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    background: #fff;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
    box-sizing: border-box;
}
.cell {
    aspect-ratio: 1;
    min-width: 0;          /* 防止内容把网格轨道撑大导致溢出 */
    overflow: hidden;      /* 内容超出格子直接裁剪 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    background: #f6f2ff;
    border-radius: 12px;
    font-size: 13px;
    text-align: center;
    padding: 6px;
    transition: box-shadow .15s, transform .15s;
}
.cell .icon { font-size: 26px; }
/* 图片按格子宽度自适应，窄格子不溢出 */
.cell .prize-img { width: 60%; max-width: 44px; height: auto; object-fit: cover; border-radius: 8px; }

/* 各布局字号自适应（格子越密字越小） */
.grid.l3x4 .cell .icon, .grid.l4x4 .cell .icon { font-size: 20px; }
.grid.l3x4 .cell .name, .grid.l4x4 .cell .name { font-size: 12px; }
.grid.l3x4 .cell .prize-img, .grid.l4x4 .cell .prize-img { width: 34px; height: 34px; }
.grid.l5x5 .cell .icon { font-size: 16px; }
.grid.l5x5 .cell .name { font-size: 11px; }
.grid.l5x5 .cell .level { font-size: 10px; }
.grid.l5x5 .cell .prize-img { width: 28px; height: 28px; }
.cell .name {
    font-weight: bold;
    color: #555;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: 2;      /* 名称最多2行，超出省略 */
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cell .level { font-size: 11px; color: #999; }

/* 限量奖品已到手 / 已送完：整格标灰 + 角标（概率不变，仍会转到，但抽中提示无法重复获取） */
.cell.owned,
.cell.sold-out {
    background: #eeeeee;
    filter: grayscale(1);
    opacity: .72;
}
.cell .badge {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: 10px;
    line-height: 1;
    padding: 3px 5px;
    border-radius: 6px;
    pointer-events: none;
}
.cell { position: relative; }   /* 角标定位基准（.cell 原为无定位） */
.cell.active {
    box-shadow: 0 0 0 3px #ff6b6b inset;
    background: #fff3e0;
    transform: scale(1.05);
}
.cell.draw-btn {
    background: linear-gradient(135deg, #ff6b6b, #ee5a24);
    color: #fff;
    cursor: pointer;
    aspect-ratio: auto;   /* 覆盖 .cell 的正方形比例，按网格合并区域拉伸 */
    width: 100%;
    height: 100%;
}
.cell.draw-btn .name { color: #fff; font-size: 20px; }
.cell.draw-btn .level { color: rgba(255,255,255,.9); }
.cell.draw-btn.spinning { opacity: .7; }

.tip {
    text-align: center;
    color: rgba(255,255,255,.85);
    margin-top: 14px;
    font-size: 13px;
}

/* 抽奖页提示下方说明文字（比 tip 稍大） */
.tip-notice {
    text-align: center;
    color: rgba(255,255,255,.75);
    margin-top: 6px;
    font-size: 15px;
}

/* 轻提示（非弹窗，自动消失） */
.toast {
    position: fixed;
    left: 50%;
    bottom: 60px;
    transform: translateX(-50%) translateY(20px);
    background: rgba(0,0,0,.75);
    color: #fff;
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 14px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s, transform .3s;
    z-index: 200;
    max-width: 80%;
    text-align: center;
}
.toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* 任务列表 / 记录列表（限制最大高度，超高滚动，两者一致） */
.task-list, .record-list {
    background: #fff;
    border-radius: 16px;
    padding: 6px 14px;
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
    max-height: 400px;
    overflow-y: auto;
    box-sizing: border-box;
}
.task-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid #f0f0f0;
}
.task-item:last-child { border-bottom: none; }
.task-icon { font-size: 28px; }
.task-info { flex: 1; }
.task-info .name { font-weight: bold; font-size: 15px; }
.task-info .desc { font-size: 12px; color: #999; margin-top: 2px; }
.task-info .reward { font-size: 12px; color: #ee5a24; margin-top: 2px; }
.task-item .btn { padding: 6px 14px; font-size: 13px; }
.task-item .btn.done {
    background: #eee;
    color: #aaa;
    cursor: default;
}

/* 记录列表 */
.record-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 13px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
    overflow-wrap: anywhere;
}
.record-item:last-child { border-bottom: none; }
.record-item .prize { font-weight: bold; }
.record-item .prize.win { color: #ee5a24; }
.record-item .time { color: #999; font-size: 12px; }
.record-empty { text-align: center; padding: 30px 0; color: #999; }

/* 弹窗 */
.modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
}
.modal-box {
    position: relative;
    background: #fff;
    border-radius: 16px;
    padding: 28px 24px;
    width: 320px;
}
.modal-box h3 { text-align: center; margin-bottom: 18px; }
.modal-close {
    position: absolute;
    top: 10px;
    right: 12px;
    border: none;
    background: none;
    font-size: 16px;
    cursor: pointer;
    color: #999;
}
.form { display: flex; flex-direction: column; gap: 12px; }
.form input {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 11px 12px;
    font-size: 14px;
    outline: none;
}
.form input:focus { border-color: #764ba2; }
.form-actions { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 4px; }
.remember { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #666; cursor: pointer; }
.error-msg { color: #e74c3c; font-size: 13px; text-align: center; }

/* 中奖弹窗 */
.prize-box { text-align: center; }
.prize-icon { font-size: 56px; margin-bottom: 8px; line-height: 1; }
/* 中奖主视觉：有奖品图片就用图片，没有则用奖品图标 emoji（原来固定是礼炮 🎉） */
.prize-icon img.prize-reward-img {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(0,0,0,.12);
    vertical-align: middle;
}
.prize-icon .prize-reward-emoji { font-size: 56px; line-height: 1; }
.prize-box h3 { color: #ee5a24; }
.prize-box p { color: #666; margin-bottom: 18px; }