/* mdmodule 点赞游戏 —— 全部规则以 .mdlg 限域，避免 * / body 这类全局选择器污染 B2 主题 */
.mdlg,
.mdlg * {
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.mdlg {
    position: relative;
    width: 100%;
    color: #1e3a5f !important;
    font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif !important;
    text-align: center !important;
    overflow-x: hidden;
}

.mdlg .like-card {
    width: 100% !important;
    max-width: 560px !important;
    margin: 0 auto !important;
    text-align: center !important;
    padding: 4px 6px 8px !important;
    position: relative;
}

/* Logo */
.mdlg .logo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    margin-bottom: 8px !important;
}

.mdlg .logo-icon {
    width: 40px !important;
    height: 40px !important;
}

.mdlg .logo-icon svg {
    width: 100% !important;
    height: 100% !important;
}

.mdlg .logo-icon img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: contain !important;
}

.mdlg .logo-text {
    font-size: 30px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    letter-spacing: -0.5px !important;
    line-height: 1.2 !important;
}

.mdlg .logo-text span {
    color: #2563eb !important;
}

.mdlg .subtitle {
    font-size: 13px !important;
    color: #64748b !important;
    margin-bottom: 14px !important;
    letter-spacing: 3px !important;
    line-height: 1.4 !important;
}

.mdlg .prompt {
    font-size: 15px !important;
    color: #475569 !important;
    margin-bottom: 20px !important;
    line-height: 1.5 !important;
}

/* 场景区域 */
.mdlg .scene {
    position: relative !important;
    height: 270px !important;
    margin-bottom: 20px !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    background: linear-gradient(180deg, #bfdbfe 0%, #e0f2fe 55%, #f0f9ff 100%) !important;
    box-shadow: 0 8px 30px rgba(37, 99, 235, 0.08) !important;
}

.mdlg .cloud {
    position: absolute !important;
    image-rendering: pixelated;
    opacity: 0.85 !important;
    pointer-events: none !important;
    max-width: none !important;
    height: auto !important;
}

.mdlg .cloud-left {
    width: 120px !important;
    top: 18px !important;
    left: 20px !important;
}

.mdlg .cloud-right {
    width: 100px !important;
    top: 30px !important;
    right: 30px !important;
    left: auto !important;
}

/* 角色 */
.mdlg .character {
    position: absolute !important;
    bottom: 62px !important;
    left: 50% !important;
    width: 140px !important;
    height: 155px !important;
    z-index: 10 !important;
    transform: translateX(-155px) !important;
    transition: transform 0.18s ease !important;
}

.mdlg .character.attack {
    transform: translateX(-70px) !important;
}

.mdlg .character img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    image-rendering: pixelated;
}

/* MDM 方块 */
.mdlg .mdm-block {
    position: absolute !important;
    bottom: 68px !important;
    left: 50% !important;
    width: 100px !important;
    height: 100px !important;
    z-index: 8 !important;
    transform: translateX(40px) !important;
}

.mdlg .mdm-block img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    image-rendering: pixelated;
    transition: transform 0.12s ease !important;
}

.mdlg .mdm-block.hit img {
    animation: mdlgBlockHit 0.32s ease !important;
}

@keyframes mdlgBlockHit {
    0%   { transform: scale(1) translateY(0); }
    25%  { transform: scale(1.12) translateY(-10px); }
    55%  { transform: scale(0.95) translateY(4px); }
    100% { transform: scale(1) translateY(0); }
}

/* 晶体特效
   ⚠️ opacity / transform 千万不要加 !important：站点 CSS 习惯用 !important，
   但带 !important 的声明会压过 @keyframes 里的同名值 → 晶体永远停在 opacity:0（第一次上线就踩了这个坑） */
.mdlg .crystal {
    position: absolute !important;
    bottom: 168px !important;
    left: 50% !important;
    width: 88px !important;
    height: 82px !important;
    z-index: 15 !important;
    opacity: 0;
    transform: translateX(40px) scale(0.4);
    pointer-events: none !important;
}

.mdlg .crystal img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    image-rendering: pixelated;
}

.mdlg .crystal.show {
    animation: mdlgCrystalFly 1s cubic-bezier(0.22, 0.9, 0.3, 1) forwards !important;
}

@keyframes mdlgCrystalFly {
    0%   { opacity: 0; transform: translateX(40px) translateY(15px) scale(0.3); }
    20%  { opacity: 1; transform: translateX(40px) translateY(-8px) scale(1.15); }
    55%  { opacity: 1; transform: translateX(40px) translateY(-30px) scale(1); }
    100% { opacity: 0; transform: translateX(40px) translateY(-75px) scale(0.65); }
}

/* 平台 */
.mdlg .platform {
    position: absolute !important;
    bottom: 12px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 380px !important;
    max-width: none !important;
    z-index: 5 !important;
}

.mdlg .platform img {
    width: 100% !important;
    height: auto !important;
    image-rendering: pixelated;
}

/* 点赞按钮 */
.mdlg .like-btn {
    display: inline-block !important;
    border: none !important;
    background: transparent !important;
    cursor: pointer !important;
    padding: 0 !important;
    transition: transform 0.18s ease, filter 0.18s ease !important;
}

.mdlg .like-btn img {
    width: 240px !important;
    height: auto !important;
    image-rendering: pixelated;
    display: block !important;
    margin: 0 auto !important;
}

.mdlg .like-btn:hover:not(:disabled) {
    transform: translateY(-3px) !important;
    filter: brightness(1.05) !important;
}

.mdlg .like-btn:active:not(:disabled) {
    transform: translateY(1px) !important;
}

.mdlg .like-btn:disabled {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
}

/* 计数胶囊 */
.mdlg .count-wrap {
    margin: 20px auto 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 8px 20px !important;
    background: rgba(37, 99, 235, 0.08) !important;
    border-radius: 999px !important;
    font-size: 14px !important;
    color: #2563eb !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
}

.mdlg .count-wrap .heart {
    font-size: 15px !important;
    line-height: 1 !important;
}

.mdlg .count-number {
    font-weight: 700 !important;
    font-size: 16px !important;
    min-width: 28px !important;
    text-align: center !important;
    display: inline-block !important;
}

.mdlg .footer-text {
    margin-top: 24px !important;
    font-size: 12px !important;
    color: #94a3b8 !important;
    letter-spacing: 0.5px !important;
    line-height: 1.4 !important;
}

.mdlg .footer-gear {
    margin-top: 10px !important;
    opacity: 0.35 !important;
    font-size: 16px !important;
    line-height: 1 !important;
}

/* 手机端：场景等比缩小，避免平台/角色溢出 */
@media (max-width: 520px) {
    .mdlg .like-card { padding: 4px 0 8px !important; }
    .mdlg .logo-text { font-size: 24px !important; }
    .mdlg .scene { height: 240px !important; margin-bottom: 16px !important; }
    .mdlg .character { width: 120px !important; height: 133px !important; transform: translateX(-120px) !important; bottom: 58px !important; }
    .mdlg .character.attack { transform: translateX(-60px) !important; }
    .mdlg .mdm-block { width: 86px !important; height: 86px !important; bottom: 62px !important; transform: translateX(34px) !important; }
    .mdlg .platform { width: 320px !important; }
    .mdlg .cloud-left { width: 92px !important; }
    .mdlg .cloud-right { width: 78px !important; }
    .mdlg .crystal { width: 74px !important; height: 69px !important; transform: translateX(34px) scale(0.4); }
    .mdlg .like-btn img { width: 210px !important; }
}

/* ===== 玩家列表 / 每日上限提示（V237） ===== */
.mdlg .prompt:first-child { margin-top: 4px !important; }

.mdlg .mdlg-players {
    margin-top: 22px !important;
}

.mdlg .mdlg-players-title {
    font-size: 13px !important;
    color: #64748b !important;
    line-height: 1.4 !important;
}

.mdlg .mdlg-players-title b {
    color: #2563eb !important;
    font-weight: 700 !important;
}

.mdlg .mdlg-players-list {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin: 10px 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.mdlg .mdlg-players-list li {
    list-style: none !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
}

.mdlg .mdlg-players-list li img {
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
    border: 1px solid #dbeafe !important;
    background: #fff !important;
    object-fit: cover !important;
    display: block !important;
}

.mdlg .mdlg-players-list li.is-me img {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, .18) !important;
}

.mdlg .mdlg-hint {
    margin-top: 10px !important;
    font-size: 13px !important;
    color: #94a3b8 !important;
    line-height: 1.4 !important;
}

.mdlg.is-maxed .like-btn {
    opacity: .55 !important;
    cursor: not-allowed !important;
}

@media (max-width: 520px) {
    .mdlg .mdlg-players-list li img { width: 32px !important; height: 32px !important; }
}


/* ===== V238 游戏区放大（与卡片左右各留 14px 间隙）+ 游客注册提醒弹框 ===== */
.mdlg .like-card { max-width: none !important; padding: 4px 0 8px !important; }

.mdlg .scene { margin: 0 14px 20px !important; height: 322px !important; }

.mdlg .cloud-left  { width: 146px !important; top: 22px !important; left: 24px !important; }
.mdlg .cloud-right { width: 122px !important; top: 36px !important; right: 34px !important; }

.mdlg .character { width: 170px !important; height: 188px !important; bottom: 74px !important; transform: translateX(-188px) !important; }
.mdlg .character.attack { transform: translateX(-85px) !important; }

.mdlg .mdm-block { width: 120px !important; height: 120px !important; bottom: 82px !important; transform: translateX(48px) !important; }

.mdlg .crystal { width: 106px !important; height: 98px !important; bottom: 202px !important; transform: translateX(48px) scale(0.4); }
.mdlg .crystal.show { animation: mdlgCrystalFly2 1s cubic-bezier(0.22, 0.9, 0.3, 1) forwards !important; }

@keyframes mdlgCrystalFly2 {
    0%   { opacity: 0; transform: translateX(48px) translateY(15px) scale(0.3); }
    20%  { opacity: 1; transform: translateX(48px) translateY(-8px) scale(1.15); }
    55%  { opacity: 1; transform: translateX(48px) translateY(-30px) scale(1); }
    100% { opacity: 0; transform: translateX(48px) translateY(-75px) scale(0.65); }
}

.mdlg .platform { width: 465px !important; bottom: 14px !important; }

/* 游客注册提醒 */
.mdlg .mdlg-modal { position: fixed !important; inset: 0 !important; z-index: 99998 !important; display: none !important; }
.mdlg .mdlg-modal.is-open { display: block !important; }
.mdlg .mdlg-modal-mask { position: absolute !important; inset: 0 !important; background: rgba(15, 23, 42, 0.45) !important; }
.mdlg .mdlg-modal-box {
    position: relative !important;
    width: min(88vw, 360px) !important;
    margin: 16vh auto 0 !important;
    background: #fff !important;
    border-radius: 16px !important;
    padding: 26px 22px 20px !important;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.22) !important;
    text-align: center !important;
    box-sizing: border-box !important;
}
.mdlg .mdlg-modal-title { font-size: 17px !important; font-weight: 700 !important; color: #0f172a !important; line-height: 1.4 !important; }
.mdlg .mdlg-modal-text  { margin-top: 10px !important; font-size: 13px !important; line-height: 1.75 !important; color: #64748b !important; }
.mdlg .mdlg-modal-actions { margin-top: 18px !important; display: flex !important; gap: 10px !important; }
.mdlg .mdlg-btn-primary {
    flex: 1 !important; border: 0 !important; border-radius: 10px !important; padding: 11px 0 !important;
    font-size: 14px !important; font-weight: 600 !important; color: #fff !important;
    background: linear-gradient(180deg, #3b82f6, #2563eb) !important; cursor: pointer !important;
}
.mdlg .mdlg-btn-ghost {
    flex: 1 !important; border: 1px solid #dbeafe !important; border-radius: 10px !important; padding: 11px 0 !important;
    font-size: 14px !important; color: #2563eb !important; background: #f8fbff !important; cursor: pointer !important;
}

/* 手机端同步放大（放在最后，覆盖上面的基础值） */
@media (max-width: 520px) {
    .mdlg .scene { margin: 0 0 16px !important; height: 296px !important; }
    .mdlg .character { width: 132px !important; height: 146px !important; bottom: 66px !important; transform: translateX(-134px) !important; }
    .mdlg .character.attack { transform: translateX(-62px) !important; }
    .mdlg .mdm-block { width: 94px !important; height: 94px !important; bottom: 72px !important; transform: translateX(36px) !important; }
    .mdlg .crystal { width: 82px !important; height: 76px !important; bottom: 166px !important; transform: translateX(36px) scale(0.4); }
    .mdlg .platform { width: 345px !important; }
    .mdlg .cloud-left { width: 102px !important; }
    .mdlg .cloud-right { width: 86px !important; }
}


/* ===== V240 按钮与计数同一行，其余重排 ===== */
.mdlg .action-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px 22px !important;
    margin-top: 4px !important;
}

.mdlg .action-row .like-btn { margin: 0 !important; }

.mdlg .action-row .count-wrap {
    margin: 0 !important;
    padding: 9px 18px !important;
    white-space: nowrap !important;
}

.mdlg .mdlg-players { margin-top: 26px !important; }

@media (max-width: 520px) {
    /* 手机上也要保持「按钮 + 计数同一行」：把两者一起收窄（320px 内容宽里 172 + 10 + ~120） */
    .mdlg .action-row { gap: 10px !important; }
    .mdlg .action-row .like-btn img { width: 200px !important; }
    .mdlg .action-row .count-wrap { padding: 6px 10px !important; font-size: 12px !important; gap: 3px !important; }
    .mdlg .action-row .count-wrap .heart { font-size: 12px !important; }
    .mdlg .action-row .count-number { font-size: 14px !important; min-width: 20px !important; }
}