/* Bujinkan Liveticker — bujinkan-taikai.com design */

:root {
    --blt-blue:       #456990;
    --blt-blue-dark:  #2d4a66;
    --blt-gold:       #f7ca62;
    --blt-gold-light: #e5d1b5;
    --blt-bg:         #ffffff;
    --blt-text:       #141617;
    --blt-muted:      #6b7280;
    --blt-border:     #e2e4e8;
    --blt-red:        #d31100;
    --blt-green:      #65bc7b;
    --blt-shadow:     0 2px 12px rgba(0,0,0,0.10);
}

.blt-wrapper {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    max-width: 680px;
    margin: 0 auto;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--blt-shadow);
    border: 1px solid var(--blt-border);
}

/* ─── Header ─────────────────────────────────────── */

.blt-header {
    background: var(--blt-blue);
    color: #fff;
    padding: 14px 16px 12px;
}

/* Row 1: LIVE badge + title */
.blt-header-main {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 9px;
}

.blt-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255,255,255,0.15);
    border-radius: 4px;
    padding: 3px 8px 3px 7px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.2px;
    flex-shrink: 0;
}

.blt-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--blt-gold);
    flex-shrink: 0;
    animation: blt-pulse 1.8s ease-in-out infinite;
}

@keyframes blt-pulse {
    0%, 100% { opacity: 1;   transform: scale(1); }
    50%       { opacity: 0.4; transform: scale(0.7); }
}

.blt-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* NO text-transform: uppercase — prevents wrapping on mobile */
}

/* Row 2: status + push button */
.blt-header-sub {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 24px;
}

.blt-status {
    font-size: 11px;
    color: rgba(255,255,255,0.58);
    white-space: nowrap;
    flex: 1;
}

/* ─── Push button ────────────────────────────────── */

.blt-push-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.3);
    color: rgba(255,255,255,0.9);
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
    line-height: 1.4;
}

.blt-push-btn:hover {
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.55);
}

.blt-push-btn.blt-push-active {
    background: rgba(247,202,98,0.18);
    border-color: var(--blt-gold);
    color: var(--blt-gold);
}

.blt-push-btn.blt-push-blocked {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ─── Intro bar ──────────────────────────────────── */

.blt-intro {
    background: #f0f4f8;
    border-bottom: 1px solid var(--blt-border);
    padding: 9px 16px;
    font-size: 13px;
    color: #4a5568;
    line-height: 1.5;
}

/* ─── Feed ───────────────────────────────────────── */

.blt-feed {
    background: var(--blt-bg);
    /* No fixed max-height — grows with content on mobile */
    min-height: 120px;
    overflow-y: auto;
    scroll-behavior: smooth;
}

/* On desktop: cap height so it doesn't fill the whole page */
@media (min-width: 769px) {
    .blt-feed {
        max-height: 600px;
    }
}

.blt-feed::-webkit-scrollbar       { width: 4px; }
.blt-feed::-webkit-scrollbar-thumb { background: var(--blt-border); border-radius: 2px; }

/* Loading */
.blt-loading {
    text-align: center;
    padding: 40px 20px;
    color: var(--blt-muted);
    font-size: 14px;
}

.blt-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid var(--blt-border);
    border-top-color: var(--blt-blue);
    border-radius: 50%;
    animation: blt-spin 0.7s linear infinite;
    vertical-align: middle;
    margin-right: 6px;
}

@keyframes blt-spin { to { transform: rotate(360deg); } }

/* ─── Entry ──────────────────────────────────────── */

.blt-entry {
    display: flex;
    border-bottom: 1px solid var(--blt-border);
    animation: blt-slide-in 0.3s ease;
}

.blt-entry:last-child { border-bottom: none; }

@keyframes blt-slide-in {
    from { opacity: 0; transform: translateY(-5px); }
    to   { opacity: 1; transform: translateY(0); }
}

.blt-entry.blt-new { background: #fffbee; }

/* Time column */
.blt-time-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 13px 10px 13px 14px;
    min-width: 60px;
    border-right: 1px solid var(--blt-border);
    flex-shrink: 0;
}

.blt-time {
    font-size: 13px;
    font-weight: 700;
    color: var(--blt-blue);
    line-height: 1;
}

.blt-date {
    font-size: 10px;
    color: var(--blt-muted);
    margin-top: 3px;
}

.blt-category-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--blt-border);
    margin-top: 8px;
}

.blt-category-dot[data-cat="result"] ,
.blt-category-dot[data-cat="ergebnis"] { background: var(--blt-gold); }
.blt-category-dot[data-cat="match"]  ,
.blt-category-dot[data-cat="kampf"]   { background: var(--blt-red); }
.blt-category-dot[data-cat="info"]    { background: var(--blt-green); }
.blt-category-dot[data-cat="alert"]  ,
.blt-category-dot[data-cat="wichtig"] { background: var(--blt-red); }

/* Content column */
.blt-content-col {
    flex: 1;
    padding: 12px 16px;
    min-width: 0;
}

.blt-category-label {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 2px 7px;
    border-radius: 3px;
    background: #fef3d0;
    color: #7a5a00;
    margin-bottom: 5px;
}

.blt-category-label[data-cat="match"]  ,
.blt-category-label[data-cat="kampf"]  { background: #fde8e8; color: var(--blt-red); }
.blt-category-label[data-cat="info"]   { background: #e6f7ec; color: #2d7a4a; }
.blt-category-label[data-cat="alert"]  ,
.blt-category-label[data-cat="wichtig"]{ background: #fde8e8; color: var(--blt-red); }

.blt-message {
    font-size: 14px;
    line-height: 1.55;
    color: var(--blt-text);
    margin: 0;
    word-break: break-word;
}

.blt-sender {
    font-size: 11px;
    color: var(--blt-muted);
    margin-top: 5px;
}

/* ─── Update banner ─────────────────────────────── */

.blt-update-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--blt-blue);
    color: #fff;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 6px;
    margin-bottom: 8px;
    animation: blt-slide-in 0.3s ease;
}

.blt-update-btn {
    background: var(--blt-gold);
    color: #1a1a1a;
    border: none;
    border-radius: 4px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}

.blt-update-btn:hover { opacity: 0.9; }

/* ─── iOS install banner ─────────────────────────── */

.blt-ios-banner {
    max-width: 680px;
    margin: 10px auto 0;
    background: #fff;
    border: 1px solid var(--blt-border);
    border-left: 4px solid var(--blt-gold);
    border-radius: 6px;
    box-shadow: var(--blt-shadow);
    animation: blt-slide-in 0.25s ease;
}

.blt-ios-inner {
    position: relative;
    padding: 16px 18px 14px;
}

.blt-ios-close {
    position: absolute;
    top: 10px;
    right: 12px;
    background: none;
    border: none;
    font-size: 20px;
    color: var(--blt-muted);
    cursor: pointer;
    line-height: 1;
    padding: 0;
}

.blt-ios-title {
    display: block;
    font-size: 14px;
    color: var(--blt-text);
    margin-bottom: 4px;
    padding-right: 24px;
}

.blt-ios-sub {
    font-size: 12px;
    color: var(--blt-muted);
    margin: 0 0 10px;
}

.blt-ios-steps {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    color: var(--blt-text);
    line-height: 1.8;
}

.blt-ios-icon {
    display: inline-block;
    font-size: 11px;
    background: var(--blt-blue);
    color: #fff;
    border-radius: 4px;
    padding: 1px 4px;
    vertical-align: middle;
}

/* ─── Images ─────────────────────────────────────── */

.blt-image-link {
    float: right;
    margin: 0 0 6px 12px;
    flex-shrink: 0;
}

.blt-image {
    display: block;
    width: 120px;
    height: 90px;
    object-fit: cover;
    border-radius: 4px;
    cursor: zoom-in;
}

.blt-content-col::after {
    content: '';
    display: table;
    clear: both;
}

@media (max-width: 480px) {
    .blt-image { width: 90px; height: 68px; }
}

/* ─── Empty / Error states ───────────────────────── */

.blt-empty {
    text-align: center;
    padding: 48px 20px;
    color: var(--blt-muted);
}

.blt-empty-icon { font-size: 30px; margin-bottom: 10px; }
.blt-empty p    { margin: 0; font-size: 14px; }

.blt-error {
    text-align: center;
    padding: 20px;
    color: var(--blt-red);
    font-size: 13px;
}

/* ─── New updates badge ──────────────────────────── */

.blt-new-badge {
    display: none;
    position: sticky;
    top: 0;
    z-index: 10;
    text-align: center;
    padding: 8px 12px;
    background: var(--blt-blue);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.blt-new-badge:hover { background: var(--blt-blue-dark); }

/* ─── Mobile ─────────────────────────────────────── */

@media (max-width: 480px) {
    .blt-wrapper { border-radius: 6px; }

    .blt-header { padding: 12px 14px 10px; }

    .blt-title { font-size: 15px; }

    .blt-live-badge {
        padding: 3px 7px 3px 6px;
        font-size: 9px;
    }

    .blt-intro {
        font-size: 12px;
        padding: 8px 14px;
    }

    .blt-time-col {
        min-width: 50px;
        padding: 11px 8px 11px 10px;
    }

    .blt-time  { font-size: 12px; }
    .blt-date  { display: none; }
    .blt-category-dot { display: none; }

    .blt-content-col { padding: 11px 12px; }
    .blt-message     { font-size: 14px; }
    .blt-sender      { font-size: 11px; }
}