/* ── Full-screen Live Now / Starting Soon kiosk ──────────────────────────────
   Theme-aware via the shared --sakura-* CSS variables (works with all 12 themes).
   live = red accent, soon = amber accent layered over the active theme.            */

.kiosk-body {
    margin: 0;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--sakura-bg);
    color: #1d1d1f;
}

/* The HTML [hidden] attribute must win over the `display: flex` rules below,
   otherwise hidden columns / the empty box stay on screen. */
.kiosk-col[hidden],
.kiosk-empty[hidden] { display: none !important; }

/* Top bar: brand + clock */
.kiosk-topbar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: clamp(10px, 1.4vw, 22px) clamp(16px, 2vw, 40px);
    background: var(--sakura-gradient);
    color: #fff;
}
.kiosk-brand {
    font-size: clamp(1.2rem, 2.4vw, 2.4rem);
    font-weight: 800;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.kiosk-topbar-right {
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.5vw, 24px);
    flex: 0 0 auto;
}
.kiosk-clock {
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    font-size: clamp(1.6rem, 3.6vw, 4rem);
    letter-spacing: .02em;
    line-height: 1;
}
/* The global .language-switcher is position:absolute (pinned to the viewport
   corner). Inside the kiosk topbar it must flow inline next to the clock,
   otherwise it overlaps the clock. */
.kiosk-topbar .language-switcher {
    position: static;
    top: auto;
    right: auto;
}

/* Two-column body: Live | Soon.
   grid-template-rows: minmax(0, 1fr) bounds the row to the container height so the
   columns are height-constrained and their .kiosk-cards overflow *internally*
   (enabling the JS auto-scroll) instead of the whole grid spilling past the
   viewport and being clipped by .kiosk-body { overflow: hidden }. */
.kiosk-main {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: minmax(0, 1fr);
    gap: clamp(16px, 2vw, 40px);
    padding: clamp(16px, 2vw, 40px);
}
.kiosk-col {
    min-height: 0;
    display: flex;
    flex-direction: column;
    border-radius: 18px;
    padding: clamp(14px, 1.6vw, 28px);
    overflow: hidden;
}
.kiosk-col-live { background: rgba(229, 57, 53, .07); border: 2px solid rgba(229, 57, 53, .35); }
.kiosk-col-soon { background: rgba(245, 158, 11, .09); border: 2px solid rgba(245, 158, 11, .40); }
.kiosk-col-title {
    margin: 0 0 clamp(10px, 1.2vw, 20px);
    font-size: clamp(1.2rem, 2.2vw, 2.4rem);
    font-weight: 800;
    line-height: 1.1;
}
.kiosk-col-live .kiosk-col-title { color: #c62828; }
.kiosk-col-soon .kiosk-col-title { color: #c2410c; }

/* Card list (fills the column, hides overflow so a TV shows no scrollbars) */
.kiosk-cards {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1.2vw, 20px);
    /* Real scroll container (so JS scrollTop always works) with the scrollbar
       hidden — the kiosk drives scrolling via makeAutoScroller(). */
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* old Edge/IE */
}
.kiosk-cards::-webkit-scrollbar { width: 0; height: 0; display: none; }
.kiosk-card {
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.2vw, 20px);
    background: #fff;
    border: 1px solid var(--sakura-dark-10);
    border-left: 6px solid var(--sakura-medium);
    border-radius: 14px;
    padding: clamp(12px, 1.4vw, 24px) clamp(14px, 1.6vw, 28px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}
.kiosk-card-live { border-left-color: #e53935; }
.kiosk-card-soon { border-left-color: #f59e0b; }

.kiosk-badge {
    flex: 0 0 auto;
    width: clamp(12px, 1vw, 18px);
    height: clamp(12px, 1vw, 18px);
    border-radius: 50%;
    background: #e53935;
    box-shadow: 0 0 0 0 rgba(229, 57, 53, .6);
    animation: kioskPulse 1.4s infinite;
}
@keyframes kioskPulse {
    0%   { box-shadow: 0 0 0 0 rgba(229, 57, 53, .6); }
    70%  { box-shadow: 0 0 0 14px rgba(229, 57, 53, 0); }
    100% { box-shadow: 0 0 0 0 rgba(229, 57, 53, 0); }
}

.kiosk-card-body { flex: 1 1 auto; min-width: 0; }
.kiosk-card-title {
    font-size: clamp(1.1rem, 1.8vw, 2.1rem);
    font-weight: 800;
    line-height: 1.2;
    color: #1d1d1f;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.kiosk-card-artist {
    margin-top: 2px;
    font-size: clamp(.95rem, 1.3vw, 1.5rem);
    font-weight: 600;
    color: var(--sakura-deep);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kiosk-card-venue {
    margin-top: 2px;
    font-size: clamp(.85rem, 1.1vw, 1.25rem);
    color: #777;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kiosk-card-time {
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
    font-size: clamp(1rem, 1.5vw, 1.8rem);
    font-weight: 700;
    color: var(--sakura-deep);
}
.kiosk-card-time-local { font-size: .72em; font-weight: 400; font-style: italic; color: #999; }
.kiosk-card-countdown {
    margin-top: 2px;
    font-size: clamp(.9rem, 1.2vw, 1.5rem);
    font-weight: 800;
}
.kiosk-card-live .kiosk-card-countdown { color: #e53935; }
.kiosk-card-soon .kiosk-card-countdown { color: #c2410c; }

.kiosk-watch {
    flex: 0 0 auto;
    text-decoration: none;
    font-size: clamp(.9rem, 1.2vw, 1.4rem);
    font-weight: 800;
    color: #fff;
    background: #e53935;
    padding: clamp(8px, .9vw, 14px) clamp(14px, 1.3vw, 22px);
    border-radius: 999px;
    white-space: nowrap;
}
.kiosk-watch:hover { background: #c62828; }

/* Message shown inside a column that has no programs but should keep its frame */
.kiosk-col-empty {
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 0;
    padding: clamp(20px, 3vw, 40px);
    font-size: clamp(1rem, 1.8vw, 2rem);
    font-weight: 700;
    opacity: .5;
    color: inherit;
}

/* Empty state: friendly message + next-up fallback */
.kiosk-empty {
    grid-column: 1 / -1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    overflow: hidden;
}
.kiosk-empty-msg {
    margin: clamp(20px, 4vh, 60px) 0 clamp(14px, 2vh, 28px);
    font-size: clamp(1.4rem, 3vw, 3rem);
    font-weight: 800;
    color: var(--sakura-deep);
}
.kiosk-upcoming-title { text-align: center; }
.kiosk-empty .kiosk-cards {
    flex: 0 1 auto;
    width: min(900px, 100%);
    align-items: stretch;
}

/* Upcoming events list in global kiosk mode — full-width, one card per event */
.kiosk-event-list {
    width: 100% !important;
    max-width: 100% !important;
}
.kiosk-event-card {
    display: flex;
    align-items: center;
    gap: clamp(16px, 2vw, 36px);
    padding: clamp(18px, 2.2vw, 36px) clamp(24px, 3vw, 48px);
    background: #fff;
    border: 1px solid var(--sakura-dark-10);
    border-left: 6px solid var(--sakura-medium);
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
    text-decoration: none;
    color: inherit;
    transition: filter .15s;
}
.kiosk-event-card:hover { filter: brightness(.97); }
.kiosk-event-card-body {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
}
.kiosk-event-card-name {
    font-size: clamp(1.4rem, 2.8vw, 3.4rem);
    font-weight: 800;
    color: #1d1d1f;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kiosk-event-card-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(3px, .5vw, 8px);
    margin-top: clamp(4px, .6vw, 10px);
}
.kiosk-event-card-venue {
    font-size: clamp(.95rem, 1.5vw, 1.9rem);
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kiosk-event-card-time {
    font-size: clamp(.95rem, 1.5vw, 1.9rem);
    font-weight: 700;
    color: var(--sakura-deep);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.kiosk-event-card-arrow {
    flex: 0 0 auto;
    font-size: clamp(1.2rem, 2.2vw, 2.8rem);
    color: var(--sakura-medium);
    line-height: 1;
}

/* Responsive: stack to one column on narrow / portrait displays */
@media (max-width: 900px), (orientation: portrait) {
    .kiosk-body { overflow: auto; height: auto; min-height: 100vh; }
    .kiosk-main { grid-template-columns: 1fr; }
    .kiosk-cards, .kiosk-col { overflow: visible; }
}

@media (prefers-reduced-motion: reduce) {
    .kiosk-badge { animation: none; }
}