/* ============================================
   Mobile Common Tips Banner Styles
   ============================================ */
/* 告知バナー土台（広告枠：黒に近いグレー背景＋薄い斜線ストライプ、標準50px高固定） */
.ad-banner {
    height: 50px !important;
    background: repeating-linear-gradient(
        -45deg,
        #1e1e1e,
        #1e1e1e 10px,
        #252525 10px,
        #252525 20px
    ) !important;
    border-bottom: 1.5px solid rgba(0, 188, 212, 0.25) !important;
}

/* PC用のlayout.cssの巨大スタイル干渉を完全に防ぐため、モバイル専用値を!importantで強制再定義 */
.tips-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
}

.tips-wrapper.fade-out {
    opacity: 0 !important;
    transform: translateX(-10px) !important;
}

.tips-wrapper.fade-in {
    animation: tipSlideInMobile 0.3s forwards !important;
}

@keyframes tipSlideInMobile {
    from {
        opacity: 0;
        transform: translateX(10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.tips-character {
    height: 40px !important;
    width: 40px !important;
    margin-right: 10px !important;
    flex-shrink: 0 !important;
    object-fit: contain !important;
    image-rendering: pixelated !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.tips-balloon {
    background: #ffffff !important;
    border: 1.5px solid #00bcd4 !important;
    border-radius: 10px !important;
    padding: 4px 10px !important;
    position: relative !important;
    max-width: calc(100% - 60px) !important;
    display: flex !important;
    align-items: center !important;
    box-shadow: 0 2px 6px rgba(0, 188, 212, 0.08) !important;
}

.tips-balloon::before {
    content: '' !important;
    position: absolute !important;
    left: -6px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    border-width: 4px 6px 4px 0 !important;
    border-style: solid !important;
    border-color: transparent #00bcd4 transparent transparent !important;
}

.tips-balloon::after {
    content: '' !important;
    position: absolute !important;
    left: -4px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    border-width: 3px 5px 3px 0 !important;
    border-style: solid !important;
    border-color: transparent #ffffff transparent transparent !important;
}

.tips-text {
    font-size: 0.65rem !important;
    font-weight: 900 !important;
    color: #006064 !important;
    line-height: 1.25 !important;
}