/* YamPlay design tokens — shared with templates/remote.html */
:root {
    --color-bg: #000000;
    --color-surface: #0a0a0a;
    --color-surface-raised: #121212;
    --color-card: #161616;
    --color-border: #2a2a2a;
    --color-border-accent: rgba(253, 185, 19, 0.4);
    --color-text-primary: #00ff41;
    --color-text-secondary: #00cc33;
    --color-text-muted: #448855;
    --color-accent: #fdb913;
    --color-accent-soft: rgba(253, 185, 19, 0.15);
    --space-1: 8px;
    --space-2: 12px;
    --space-3: 16px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --touch-min: 48px;
    --remote-inline-pad: clamp(10px, 4vw, 28px);
    --remote-shell-max: 100%;
}

@media (min-width: 480px) {
    :root {
        --remote-shell-max: min(100vw - 2 * var(--remote-inline-pad), 640px);
    }
}

@media (min-width: 768px) {
    :root {
        --remote-shell-max: min(100vw - 2 * var(--remote-inline-pad), 820px);
    }
}

@media (min-width: 1100px) {
    :root {
        --remote-shell-max: min(100vw - 40px, 1000px);
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html {
    height: 100%;
}

html,
body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--color-bg);
    color: var(--color-text-primary);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

@supports (height: 100dvh) {
    body {
        min-height: 100dvh;
    }
}