/* Game District lobby: the Sunnyside showcase banner (games/includes/hub-sunny-banner.php, behaviour in hub-sunny.js).
 * A .dashboard-game-card that spans the whole grid row: crossfading Sunnyside captures on the right, a dark scrim and
 * the copy on the left. Always dark (light text) in every theme, like the hero. On a phone the picture sits on top and
 * the copy below it. .is-moving = slow Ken Burns pan; .is-lite (lite mode) = crossfade only; .is-still (reduced motion) = no motion. */

.dashboard-game-card.hub-sunny {
    --sunny-bg: #1d1d24; /* codex-hubtone: illustrated marquee keeps its own dark ink. */
    --sunny-ink: #fff8ea;
    --sunny-soft: #e9e1fb;
    --sunny-gold: #ffc23d;
    grid-column: 1 / -1;
    display: block; position: relative; isolation: isolate; overflow: hidden;
    min-height: clamp(360px, 31vw, 440px);
    background-color: var(--sunny-bg);
    border: 1px solid color-mix(in srgb, var(--sunny-gold) 45%, transparent);
    border-radius: 24px;
    box-shadow: 0 18px 40px rgba(6, 2, 22, .35);
}
.dashboard-game-card.hub-sunny[hidden] { display: none; }
.dashboard-game-card.hub-sunny:hover, .dashboard-game-card.hub-sunny:focus-within {
    transform: none; border-color: var(--sunny-gold);
    box-shadow: 0 0 0 1px var(--sunny-gold), 0 18px 44px rgba(6, 2, 22, .45), 0 0 46px rgba(255, 194, 61, .22);
}

/* ------------------------------------------------------------------ pictures */
.hub-sunny .hub-sunny-stage {
    position: absolute; inset: 0 0 0 30%; z-index: 0; aspect-ratio: auto;
    /* until the first picture arrives: a soft sunny sky */
    background: linear-gradient(180deg, #8fd3ff 0%, #c9ecff 52%, #f6e3a8 53%, #f0cf86 100%);
}
.hub-sunny .hub-sunny-stage::after { display: none; }
.hub-sunny-slides { position: absolute; inset: 0; overflow: hidden; }
.hub-sunny-slide {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; display: block;
    opacity: 0; transition: opacity 1.4s ease; transform-origin: var(--kb-ox, 50%) var(--kb-oy, 60%);
}
.hub-sunny-slide.is-on { opacity: 1; }
.hub-sunny.is-moving .hub-sunny-slide.is-on, .hub-sunny.is-moving .hub-sunny-slide.is-off { animation: hubSunnyKB 9s ease-out forwards; }
.hub-sunny-slide.is-off { opacity: 0; }
.hub-sunny.is-paused .hub-sunny-slide { animation-play-state: paused !important; }
@keyframes hubSunnyKB {
    from { transform: scale(1.03) translate(0, 0); }
    to { transform: scale(1.13) translate(var(--kb-x, -2%), var(--kb-y, -1%)); }
}
.hub-sunny.is-still .hub-sunny-slide, .hub-sunny.is-lite .hub-sunny-slide { animation: none !important; transform: none; }

/* scrims: fade the picture into the copy side and the bottom edge */
.hub-sunny-scrim {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
        linear-gradient(90deg, var(--sunny-bg) 0%, rgba(27, 16, 54, .82) 12%, rgba(27, 16, 54, .35) 30%, rgba(27, 16, 54, 0) 48%),
        linear-gradient(0deg, rgba(27, 16, 54, .55) 0%, rgba(27, 16, 54, 0) 32%);
}
.hub-sunny .hub-card-state { left: auto; bottom: auto; right: 14px; top: 14px; }

/* place name, dots and pause, bottom right over the picture */
.hub-sunny-nav {
    position: absolute; right: 14px; bottom: 12px; z-index: 3; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end;
    max-width: calc(100% - 28px);
}
.hub-sunny-place {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px;
    background: rgba(14, 8, 34, .74); color: #fff; font-weight: 900; font-size: .78rem; letter-spacing: .01em;
    border: 1px solid rgba(255, 255, 255, .22); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.hub-sunny-place i { color: var(--sunny-gold); }
.hub-sunny-dots { display: inline-flex; align-items: center; padding: 0 4px; border-radius: 999px; background: rgba(14, 8, 34, .6); }
.hub-sunny-dot {
    width: 22px; height: 26px; padding: 0; border: 0; background: transparent; cursor: pointer; display: inline-grid; place-items: center;
}
.hub-sunny-dot::before {
    content: ''; width: 8px; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .55);
    transition: width .25s, background .25s;
}
.hub-sunny-dot:hover::before { background: #fff; }
.hub-sunny-dot[aria-pressed="true"]::before { width: 18px; background: var(--sunny-gold); }
.hub-sunny-dot:focus-visible, .hub-sunny-pause:focus-visible { outline: 2px solid var(--sunny-gold); outline-offset: 1px; border-radius: 8px; }
.hub-sunny-pause {
    width: 32px; height: 32px; border-radius: 999px; display: inline-grid; place-items: center; padding: 0; cursor: pointer;
    background: rgba(14, 8, 34, .74); color: #fff; border: 1px solid rgba(255, 255, 255, .22);
}
.hub-sunny .hub-sunny-pause { color: #fff; }   /* the day theme turns plain buttons dark: this one sits on a dark chip in every theme */
.hub-sunny .hub-sunny-pause:hover { border-color: var(--sunny-gold); color: var(--sunny-gold); }
.hub-sunny.is-still .hub-sunny-pause { display: none; }

/* ------------------------------------------------------------------ copy */
.hub-sunny .hub-sunny-copy {
    position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px;
    min-height: inherit; width: min(600px, 54%); padding: clamp(22px, 2.6vw, 36px); color: var(--sunny-ink);
}
.hub-sunny-live {
    display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 10px; border-radius: 999px;
    background: rgba(95, 227, 161, .14); border: 1px solid rgba(95, 227, 161, .45); color: #b9f7d6; font-weight: 900; font-size: .8rem;
}
.hub-sunny-pulse { position: relative; width: 9px; height: 9px; border-radius: 50%; background: #5fe3a1; flex: 0 0 auto; }
.hub-sunny-pulse::after {
    content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #5fe3a1; opacity: 0;
    animation: hubSunnyPulse 2.2s ease-out infinite;
}
.hub-sunny-live[data-count="0"] { background: rgba(255, 194, 61, .14); border-color: rgba(255, 194, 61, .5); color: #ffe4a3; }
.hub-sunny-live[data-count="0"] .hub-sunny-pulse { background: var(--sunny-gold); }
.hub-sunny-live[data-count="0"] .hub-sunny-pulse::after { border-color: var(--sunny-gold); }
.hub-sunny.is-still .hub-sunny-pulse::after, .hub-sunny.is-lite .hub-sunny-pulse::after { animation: none; }
@keyframes hubSunnyPulse { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.8); opacity: 0; } }

.hub-sunny .dashboard-game-topline { gap: 10px 12px; align-items: center; }
.hub-sunny .dashboard-game-topline > strong {
    flex: 0 1 auto; font-family: var(--font-display); font-weight: 400; letter-spacing: .02em; line-height: 1;
    font-size: clamp(2rem, 3.4vw, 2.9rem); color: #fff2bf;
    text-shadow: 0 3px 0 #7a3b00, 0 0 26px rgba(255, 190, 70, .45);
}
.hub-sunny .dashboard-game-topline .retro-showcase-badge { color: #1a1030; background: var(--sunny-gold); border-color: transparent; font-weight: 900; }
.hub-sunny .dashboard-game-topline .retro-showcase-badge i { color: #1a1030; }
.hub-sunny .dashboard-favorite-toggle { margin-left: 0; background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .25); color: #fff; }
.hub-sunny .dashboard-favorite-toggle.is-active { color: var(--sunny-gold); border-color: var(--sunny-gold); background: rgba(255, 194, 61, .16); }
.hub-sunny .dashboard-favorite-icon { color: inherit; stroke: currentColor; }   /* the day theme paints the star outline dark gold, dim on the dark banner */
.hub-sunny-head { margin: 0; font-family: var(--font-body, inherit); font-weight: 900; font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.2; color: #fff; text-wrap: balance; }
.hub-sunny .hub-sunny-copy > p {
    margin: 0; color: var(--sunny-soft); font-size: .96rem; line-height: 1.5; max-width: 56ch; -webkit-line-clamp: 3;
}
.hub-sunny-social, .hub-sunny-feats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.hub-sunny-social li, .hub-sunny-feats li { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; font-weight: 800; line-height: 1.1; }
.hub-sunny-social li { padding: 6px 12px; font-size: .86rem; background: rgba(255, 194, 61, .16); border: 1px solid rgba(255, 194, 61, .55); color: #ffe7ad; }
.hub-sunny-social i { color: var(--sunny-gold); }
.hub-sunny-feats li { padding: 4px 10px; font-size: .78rem; background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .18); color: #f1eafd; }
.hub-sunny-feats i { color: #8fd8ff; }
.hub-sunny .hub-card-progress { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); color: var(--sunny-soft); }
.hub-sunny .dashboard-action-row { align-items: center; gap: 12px; margin-top: 4px; }
.hub-sunny .dashboard-action-row .retro-button { flex: 0 0 auto; }
:root .dashboard-game-card.hub-sunny .retro-button.hub-sunny-play {
    min-height: 52px; padding: 11px 26px; font-size: 1.06rem; font-weight: 900;
    background: linear-gradient(180deg, #ffe58a, #ffc23d 55%, #ffa51f); color: #1a1030 !important; border-color: #8a4a00;
    box-shadow: 0 4px 0 #8a4a00, 0 0 26px rgba(255, 194, 61, .35);
}
:root .dashboard-game-card.hub-sunny .retro-button.hub-sunny-play:hover { background: linear-gradient(180deg, #fff0b3, #ffd05a 55%, #ffb43a); transform: translateY(-1px); }
:root .dashboard-game-card.hub-sunny .retro-button.hub-sunny-play:active { transform: translateY(2px); box-shadow: 0 1px 0 #8a4a00; }
.hub-sunny-free { display: inline-flex; align-items: center; gap: 6px; color: var(--sunny-soft); font-weight: 800; font-size: .82rem; }
.hub-sunny-free i { color: #5fe3a1; }

/* high-contrast theme: plain black, white lines */
:root[data-theme="contrast"] .dashboard-game-card.hub-sunny { --sunny-bg: #000; --sunny-soft: #fff; border-color: #fff; }
:root[data-theme="contrast"] .hub-sunny-scrim { background: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .85) 14%, rgba(0, 0, 0, .3) 34%, rgba(0, 0, 0, 0) 50%), linear-gradient(0deg, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0) 32%); }
:root[data-theme="contrast"] .hub-sunny-feats li, :root[data-theme="contrast"] .hub-sunny-social li { background: #000; border-color: #fff; color: #fff; }

/* ------------------------------------------------------------------ narrower */
@media (max-width: 1100px) {
    .hub-sunny .hub-sunny-stage { left: 24%; }
    .hub-sunny .hub-sunny-copy { width: min(560px, 62%); }
}
/* phone and narrow tablet: picture on top, copy below (the copy overlaps the picture's faded bottom edge) */
@media (max-width: 720px) {
    .dashboard-game-card.hub-sunny { min-height: 0; border-radius: 20px; }
    .hub-sunny .hub-sunny-stage { position: relative; inset: auto; aspect-ratio: 4 / 3; max-height: 62vh; width: 100%; }   /* taller than the 16:9 shots: the crowd in the middle comes out bigger */
    .hub-sunny-scrim {
        background: linear-gradient(0deg, var(--sunny-bg) 0%, rgba(27, 16, 54, .7) 16%, rgba(27, 16, 54, 0) 42%);
    }
    :root[data-theme="contrast"] .hub-sunny-scrim { background: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, .7) 16%, rgba(0, 0, 0, 0) 42%); }
    .hub-sunny-nav { top: 10px; bottom: auto; right: 10px; }
    .hub-sunny .hub-card-state { top: 10px; left: 10px; right: auto; }
    .hub-sunny .hub-sunny-copy { width: auto; min-height: 0; margin-top: -36px; padding: 0 16px 18px; gap: 9px; }
    .hub-sunny .dashboard-game-topline > strong { font-size: 2rem; }
    .hub-sunny .hub-sunny-copy > p { font-size: .92rem; -webkit-line-clamp: 3; }
    .hub-sunny-free { display: none; }
    .hub-sunny-social li { padding: 5px 10px; font-size: .8rem; }
    .hub-sunny .dashboard-action-row { width: 100%; }
    .hub-sunny .dashboard-action-row .retro-button { flex: 1 1 100%; justify-content: center; }
    .hub-sunny-place { font-size: .72rem; padding: 4px 10px; }
}
@media (max-width: 420px) {
    .hub-sunny-dots { display: none; }
}