body {
    margin: 0px; /* Remove browser default margin around the edge of the page */
    touch-action: none; /* Prevent double-clicking to zoom on mobile, as often this happens while using the normal UI. */
    font-family: sans-serif;
    user-select: none; /* Otherwise for example clicking a lot can make the whole page blue */
    /* Even though most of our UI automatically scales to the viewport size, we can still have overflow
     * when the menu is open and space is limited, as the play/pause and seek buttons will
     * go off the bottom. We're happy to completely cut them off in this case to leave more space
     * for the menu - the user will simply have to close the menu to access them. */
    overflow: hidden;
    color: #6C63FF;
}

/* Welcome screen - shown separately from everything so is pretty much independent */
/* =============================================================================== */
#welcome-screen {
    /* Fill the screen */
    position: absolute;
    inset: 0px;

    /* Arrange children vertically */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#welcome-screen .title {
    font-size: 10vmin;
    margin: 0.5em;
    color: #6C63FF;
}
#welcome-screen .subtitle {
    font-size: 5vmin;
    margin: 0.5em;
    color: #B5179E;
    text-align: center;
}

/* 'Use spoiler-free controls' button - this is only shown if the user turns on the native
   controls, and shows as an overlay at the top right, where the menu button was.
  =============================================================================== */
#restore-normal-controls-button {
    display: none; /* Initially hidden until the "use native controls" button is clicked */
    position: absolute;
    top: 0px;
    right: 0px;
}

/* Player overlay - fullscreen container that overlays the video where all of our UI additions are */
/* =============================================================================== */
#player-overlay {
    position: absolute;
    inset: 0px;
    display: block; /* This is kind of irrelevant as all the children will be position absolutely anyway */
}

/* Video title etc. that we show at the top when paused. */
#top-info {
    display: flex;
    flex-direction: column;
    color: hsl(243, 100%, 85%);
    font-size: 5vmin;
}

/* Blocker elements - black boxes that cover up elements of the native player's UI */
/* =============================================================================== */
#blocker-full {
    background: black;
    position: absolute;
    display: none; /* Initially hidden - will be shown by javascript when needed */
    /* Full-screen */
    inset: 0px;
    /* Color and font-size for the message that we show here (end of video) */
    color: hsl(243, 100%, 85%);
    font-size: 5vmin;
}

/* Loading status - shows a message in the middle of the screen whilst a video is loading */
/* Note this needs to be shown above the blockers.
/* In order to centre the message, it is a child of a full-screen container and we center
    it using flexbox layout */
/* =============================================================================== */
#loading-status-container {
    position: absolute;
    inset: 0px;

    display: none; /* Will be shown as 'flex' when a video starts loading */
    align-items: center;
    justify-content: center;
}
#loading-status {
    background:white;
    border-radius: 1vmin;
    text-align: center;
    padding: 2vmin;
    font-size: 10vmin;
}

/* Player overlay controls - fullscreen container with our player controls.
 * Only visible when the user clicks on the video */
/* =============================================================================== */
#player-overlay-controls {
    position: absolute; /* So that the controls are on top of the blockers */
    inset: 0px;
    /* Initially displayed so that user can click Play etc.
       Children are arranged vertically in a flexbox with the free space placed inbetween
       the children. This means that the top, mid and bot sections are placed at
       the top, middle and bottom of the screen, but will nicely shuffle down when
       the menu is opened */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

/* Player overlay controls (top) - this is where the menu button and menu itself are */
/* =============================================================================== */
#player-overlay-controls-top {
    align-self: flex-end; /* Align to the right (override default align-items from parent flexbox), so the menu is in the top-right corner */
    /* Children (i.e. the menu button and optionally the menu itself) in a column, aligned to the right */
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    /* For when the menu is larger than the screen, we want the menu to scroll rather than this element */
    max-height: 100%;
    max-width: 100%;
}

#menu-button {
    width: 9vmin;
    aspect-ratio: 1;
    padding: 1.5vmin;
    border-radius: 1vmin;
    background:
        content-box url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-0.5 -0.5 6 6" fill="hsl(243, 100%, 70%)"><path d="M 0 0 l 5 0 a 0.5 0.5 0 0 1 0 1 l -5 0 a 0.5 0.5 0 0 1 0 -1 M 0 2 l 5 0 a 0.5 0.5 0 0 1 0 1 l -5 0 a 0.5 0.5 0 0 1 0 -1 M 0 4 l 5 0 a 0.5 0.5 0 0 1 0 1 l -5 0 a 0.5 0.5 0 0 1 0 -1" /></svg>'),
        border-box white;
}
#menu-button.open {
    /* Highlight the icon when the menu is open */
    background-color: hsl(243, 100%, 90%);
}

#menu {
    display: none; /* Initially hidden, will be shown as 'flex' by javascript when the menu is opened */
    flex-direction: column;

    background: white;
    border-radius: 1vmin;
    border: 0.1vmin solid #6C63FF;

    /* We want the horizontal scrollbar to be on the saved positions table, not the whole menu */
    max-width: 100%;
    /* We want the menu to have a vertical scrollbar when it's taller than the screen */
    overflow-y: auto;
}

#menu>* {
    padding: 0.5vmin 1vmin;
    border-bottom: 0.05vmin solid #6C63FF;
    border-top: 0.05vmin solid #6C63FF;
    font-weight: bold;
    font-size: max(2vmin, 1em);
}

#quality-select {
    /* For <select>s, these properties don't get inherited by default */
    font-size: inherit;
    color: inherit;
}
#set-favourite-qualities-button {
    font-size: 75%; /* Slightly smaller, as less important */
    margin-left: 1vmin;
}

#saved-positions {
    /* Horizontal scrollbar on just the saved positions table, when it's wider than the screen */
    overflow-x: auto;
    /* Even though we're only setting overflow-x, this will implicitly set overflow-y to auto as well
     * (quirk of CSS), which results in the unwanted effect of this element scrolling vertically rather
     * than the whole menu. We fix this by preventing this element from shrinking vertically,
     * so that it is always the full height of its contents and doesn't scroll */
    flex-shrink: 0;
}

#saved-positions-table {
    color: black;
    font-size: inherit; /* Not inherited by default */
    border-collapse: collapse;
}
#saved-positions-table td,
#saved-positions-table th {
    border: 0.05vmin solid hsl(243, 100%, 90%);
    padding: 0.25vmin;
}
/* Highlight saved positions for the current video etc.*/
#saved-positions-table tr.highlight {
    background-color: hsl(320, 86%, 80%);
}

.spinner {
    width: 2.5vmin;
    margin: 1vmin;
    aspect-ratio: 1;
    border-top: 1px black solid;
    border-radius: 50%;
    animation-name: spin;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

#use-native-player-controls-button {
    display: none; /* Hidden until a video is loaded */
}

/* Player overlay controls (mid) - this is where the play/pause and fullscreen buttons are */
/* =============================================================================== */
#player-overlay-controls-mid {
    display: none; /* Initially hidden until a video is loaded. Will be shown as 'flex' by javascript */
    /* Children (the two buttons) arranged in a row, with a small gap between them */
    flex-direction: row;
    column-gap: 1vmin;
}
/* Buttons in the mid row */
#player-overlay-controls-mid>div {
    height: 20vmin;
    aspect-ratio: 1;
    border-radius: 1vmin;
}

.icon-play {
    background:
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="hsl(243, 100%, 70%)"><polygon points="4,4 4,20 20,12 "/></svg>'),
        white;
}
.icon-pause {
    background:
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="hsl(243, 100%, 70%)">    <g>       <rect x="6" y="5" width="5" height="14" />       <rect x="13" y="5" width="5" height="14" />     </g> </svg>'),
        white;
}

#fullscreen-button {
    background:
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="hsl(243, 100%, 70%)">    <g fill="none" stroke-width="2">    <path d="M4 10l0 -6l6 0" />    <path d="M20 10l0 -6l-6 0" />    <path d="M4 14l0 6l6 0" />    <path d="M20 14l0 6l-6 0" />    </g> </svg>'),
        white;
}

/* Player overlay controls (bot) - this is where the seek buttons are */
/* =============================================================================== */
#player-overlay-controls-bot {
    display: none; /* Initially hidden until a video is loaded. Will be shown as 'flex' by javascript */
    /* Arrange children in a row with a small gap between them and aligned to the bottom of the screen */
    flex-direction: row;
    align-items: flex-end;
    column-gap: 1vmin;

    font-size: 5vmin; /* For all children to inherit, rather than setting on each one */
}
.seek-button {
    background: white;
    border-radius: 1vmin;
    padding: 0.2vmin;
}
#player-overlay-controls-bot-mid {
    /* Vertical column of controls in the middle at the bottom */
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 1vmin;
}
#speed-select {
    color: inherit; /* Not inherited by default */
    font-size: 3.5vmin; /* Make this font smaller, as this control is less used than the others */
}
#current-time-span {
    background-color: white;
    border-radius: 1vmin;
    padding: 0.2vmin;
}
#current-time-span.seeking {
    background-color: #B5179E;
}

/* Lock controls slider */
/* =============================================================================== */
#lock-controls-slider {
    display: none; /* Initially hidden until a video is loaded */
    /* Middle-left side of the screen */
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-50%);

    height: 7vmin;
    aspect-ratio: 1;
    border-radius: 1vmin;
    /* Hint to the user that they should drag this. Will be updated by javascript whilst dragging.
     * This won't achieve anything on mobile though, which is where this feature is most useful... */
    cursor: grab;
}
#lock-controls-slider.glow {
    /* Glow effect which is turned on when the slider is dragged all the way to the right */
    box-shadow: 0 0 20px #B5179E, 0 0 30px #B5179E, 0 0 40px #B5179E;
}
.icon-locked {
    background:
        content-box url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25" width="50" height="50" stroke="hsl(243, 100%, 70%)">    <g fill="none" stroke-width="2">      <rect x="5" y="11" width="14" height="10" rx="2"/>      <path d="M8 11V7a4 4 0 1 1 8 0v4"/>      <circle cx="12" cy="16" r="1"/>    </g>  </svg>'),
        border-box white;
    background-size: cover;
}
.icon-unlocked {
    background:
        content-box url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="2 0 25 25" width="50" height="50" stroke="hsl(243, 100%, 70%)">    <g fill="none" stroke-width="2">      <rect x="5" y="11" width="14" height="10" rx="2"/>      <path d="M16 11V7a4 4 0 1 1 8 0v4"/>      <circle cx="12" cy="16" r="1"/>    </g>  </svg>'),
        border-box white;
    background-size: cover;
}

/* Shared styles (can be applied to various elements throughout the app) */
/* =============================================================================== */
.clickable {
    cursor: pointer /* Indicate as clickable */
}
.clickable[data-state="disabled"] {
    /* Style used on buttons etc. when the controls are locked */
    opacity: 50%;
    pointer-events: none;
}
@media(hover: hover) and (pointer: fine) {
    /* Highlight buttons etc. when mouse is hovered over them, but only on platforms with a mouse.
     * On mobile, using :hover behaves weirdly so we disable it */
    .clickable:hover {
        background-color: hsl(243, 100%, 90%) !important; /* Needs to override the default background color set directly on the element */
    }
}