/* Sikshya Pro – SCORM/H5P Interactive Player shell.
 * Light, native-feeling chrome around an iframe / H5P embed.
 * Variables fall back to Sikshya core tokens when present.
 */
.sik-player {
    --sik-player-radius: 14px;
    --sik-player-border: var(--sikshya-color-border, #e2e8f0);
    --sik-player-bg: var(--sikshya-color-surface, #ffffff);
    --sik-player-fg: var(--sikshya-color-text, #1f2937);
    --sik-player-muted: var(--sikshya-color-text-muted, #475569);
    --sik-player-accent: var(--sikshya-color-primary, #0f766e);
    --sik-player-error: #b91c1c;
    --sik-player-warn: #b45309;

    margin: 1.5rem 0;
    border: 1px solid var(--sik-player-border);
    background: var(--sik-player-bg);
    border-radius: var(--sik-player-radius);
    color: var(--sik-player-fg);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .06), 0 4px 16px rgba(15, 23, 42, .04);
}

.sik-player__bar {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--sik-player-border);
    background: var(--sikshya-color-surface-muted, #f8fafc);
    flex-wrap: wrap;
}

.sik-player__chip {
    display: inline-flex;
    align-items: center;
    padding: .15rem .5rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    background: var(--sik-player-accent);
    color: #ffffff;
    border-radius: 999px;
}

.sik-player__chip--h5p {
    background: #6d28d9;
}

.sik-player__title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    flex: 1 1 auto;
    color: var(--sik-player-fg);
}

.sik-player__sub,
.sik-player__status {
    font-size: .8rem;
    color: var(--sik-player-muted);
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.sik-player__status-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #94a3b8;
}

.sik-player[data-state-status="in_progress"] .sik-player__status-dot { background: #f59e0b; }
.sik-player[data-state-status="passed"] .sik-player__status-dot,
.sik-player[data-state-status="completed"] .sik-player__status-dot { background: #16a34a; }
.sik-player[data-state-status="failed"] .sik-player__status-dot { background: #dc2626; }

.sik-player__actions {
    display: flex;
    gap: .5rem;
    align-items: center;
}

.sik-player__hint {
    padding: .5rem 1rem;
    font-size: .8rem;
    color: var(--sik-player-muted);
    background: #f1f5f9;
}

.sik-player__frame {
    position: relative;
    width: 100%;
    background: #0b1120;
    /* Flex column so the iframe gets a real block height (percent height on the iframe
       is unreliable when this box only has min-height). */
    display: flex;
    flex-direction: column;
    min-height: 240px;
}

.sik-player__iframe {
    display: block;
    width: 100%;
    flex: 1 1 auto;
    min-height: 240px;
    border: 0;
}

.sik-player__h5p {
    padding: 1rem;
}

.sik-player__notice {
    padding: .75rem 1rem;
    border-radius: 8px;
    background: #fef3c7;
    color: #92400e;
    font-size: .9rem;
}

.sik-player__state {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    text-align: center;
    padding: 2rem;
    color: #f8fafc;
    background: rgba(15, 23, 42, .85);
    backdrop-filter: blur(2px);
}

.sik-player__state[hidden] { display: none; }

.sik-player__state-title { margin: 0; font-size: 1.05rem; font-weight: 600; }

.sik-player__state-body { margin: 0; max-width: 38rem; line-height: 1.5; }

.sik-player__spinner {
    width: 2rem; height: 2rem; border-radius: 999px;
    border: 3px solid rgba(248, 250, 252, .3);
    border-top-color: #f8fafc;
    animation: sik-player-spin 1s linear infinite;
}

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

.sik-player--state-error {
    border-color: #fecaca;
}

.sik-player--state-error .sik-player__state {
    background: #fef2f2;
    color: #7f1d1d;
    position: relative;
}

@media (max-width: 720px) {
    .sik-player__bar { flex-wrap: wrap; }
    .sik-player__title { width: 100%; }
    .sik-player__actions { width: 100%; }
}

.sik-player.is-fullscreen {
    position: fixed;
    inset: 0;
    margin: 0;
    border-radius: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
}

.sik-player.is-fullscreen .sik-player__frame {
    flex: 1 1 auto;
    min-height: 0;
}

.sik-player.is-fullscreen .sik-player__iframe {
    min-height: 0;
    flex: 1 1 auto;
}