@font-face {
    font-family: 'Roboto';
    src: url('../font/Roboto/Roboto-Regular.ttf') format('truetype'),
    url('../font/Roboto/Roboto-Medium.ttf') format('truetype'),
    url('../font/Roboto/Roboto-Italic.ttf') format('truetype'),
    url('../font/Roboto/Roboto-Thin.ttf') format('truetype'),
    url('../font/Roboto/Roboto-Bold.ttf') format('truetype');
}

:root {
    --page-bg-start: #2b1b40;
    --page-bg-end: #46286a;
    --page-bg-alt: rgba(255, 255, 255, 0.08);
    --text-primary: #f5f3ff;
    --text-secondary: rgba(245, 243, 255, 0.65);
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    height: 100%;
}

body {
    font-family: 'Roboto', sans-serif;
    -webkit-font-smoothing: antialiased;
}

body.player-only {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 4vw, 48px);
    background: radial-gradient(circle at 20% -10%, rgba(255, 255, 255, 0.08), transparent 55%),
                linear-gradient(160deg, var(--page-bg-start), var(--page-bg-end));
    color: var(--text-primary);
    overflow: hidden;
}

.player-shell {
    width: min(100%, 420px);
    height: min(90vh, 760px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 32px;
    background: var(--page-bg-alt);
    backdrop-filter: blur(40px);
    box-shadow: 0 40px 90px rgba(13, 5, 33, 0.45);
    padding: clamp(18px, 3vw, 28px);
}

#smp_container {
    width: 100%;
    height: 100%;
}