/* input(309,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(367,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(437,5): run-time error CSS1035: Expected colon, found '{'
input(519,5): run-time error CSS1035: Expected colon, found '{'
input(647,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(666,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(684,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(721,2): run-time error CSS1035: Expected colon, found '{'
input(900,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(970,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(1055,30): run-time error CSS1047: Expected number or percentage value in rgb function, found 'from'
input(1055,52): run-time error CSS1046: Expect comma, found 'r'
input(1055,54): run-time error CSS1047: Expected number or percentage value in rgb function, found 'g'
input(1055,56): run-time error CSS1046: Expect comma, found 'b'
input(1055,58): run-time error CSS1047: Expected number or percentage value in rgb function, found '/'
input(1055,60): run-time error CSS1034: Expected closing parenthesis, found '.25'
input(1055,60): run-time error CSS1042: Expected function, found '.25'
input(1055,65): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
input(1113,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(1172,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&' */
html
{
    --amount: 100%;
}

@keyframes fadeIn
{
    0%
    {
        opacity: 0
    }

    100%
    {
        opacity: 1
    }
}

@keyframes slideUp
{
    0%
    {
        transform: translateY(calc( var(--amount) ));
    }

    100%
    {
        transform: translateY(0);

    }
}

@keyframes wiggle
{
    0%,100%
    {
        transform: rotate( calc( var(--rotation) * 4deg ) );
    }

    50%
    {
        transform: rotate(calc( var(--rotation) * -4deg ) );
    }
}

@keyframes bounceIn
{
    0%
    {
        -webkit-transform: scale3d(.3,.3,.3);
        transform: scale3d(.3,.3,.3)
    }

    20%
    {
        -webkit-transform: scale3d(1.1,1.1,1.1);
        transform: scale3d(1.1,1.1,1.1)
    }

    40%
    {
        -webkit-transform: scale3d(.9,.9,.9);
        transform: scale3d(.9,.9,.9)
    }

    60%
    {
        -webkit-transform: scale3d(1.03,1.03,1.03);
        transform: scale3d(1.03,1.03,1.03)
    }

    80%
    {
        -webkit-transform: scale3d(.97,.97,.97);
        transform: scale3d(.97,.97,.97)
    }

    100%
    {
        -webkit-transform: scale3d(1,1,1);
        transform: scale3d(1,1,1)
    }
}

@keyframes pulse
{
    0%,100%
    {
        transform: scale(calc( 100% - (var(--amount) * 0.2) ));
    }

    50%
    {
        transform: scale(1);
    }
}

@keyframes rotation
{
    from
    {
        transform: rotate(0) translateX(50%) rotate(0)
    }

    to
    {
        transform: rotate(360deg) translateX(50%) rotate(-360deg)
    }
}

@keyframes sideToSide
{
    0%,100%
    {
        transform: translate(100%,0)
    }

    50%
    {
        transform: translate(-100%,0)
    }
}

@keyframes zoomer
{
    0%
    {
        transform: scale(.3)
    }

    100%
    {
        transform: scale(1)
    }
}

@keyframes zoomerOut
{
    0%
    {
        transform: scale(1)
    }

    100%
    {
        transform: scale(0)
    }
}

@keyframes spinner
{
    from
    {
        transform: rotate(0)
    }

    to
    {
        transform: rotate(360deg)
    }
}

@keyframes shake
{
    0%,100%
    {
        transform: translateX(0)
    }

    16%,50%,83%
    {
        transform: translateX(-10px)
    }

    33%,66%
    {
        transform: translateX(10px)
    }
}

@keyframes barrelRoll
{
    from
    {
        transform: rotate(0)
    }

    to
    {
        transform: rotate(360deg)
    }
}

@keyframes pound
{
    to
    {
        transform: scale(1.2)
    }
}

@keyframes heartbeat
{
    0%,100%
    {
        transform: scale(1)
    }

    10%
    {
        transform: scale(1.2)
    }

    20%
    {
        transform: scale(1.4)
    }
}

@keyframes rollerRight
{
    0%
    {
        transform: translateX(-200px) rotate(0);
        opacity: 0
    }

    100%
    {
        transform: translateX(0) rotate(2turn);
        opacity: 1
    }
}

@keyframes rollerLeft
{
    0%
    {
        transform: translateX(200px) rotate(0);
        opacity: 0
    }

    100%
    {
        transform: translateX(0) rotate(-2turn);
        opacity: 1
    }
}

@keyframes slideLeft
{
    0%
    {
        transform: translateX(150%);
        opacity: 0
    }

    100%
    {
        transform: translateX(0);
        opacity: 1
    }
}

@keyframes slideRight
{
    0%
    {
        transform: translateX(-150%);
        opacity: 0
    }

    100%
    {
        transform: translateX(0);
        opacity: 1
    }
}

@keyframes rotateIn
{
    0%
    {
        -webkit-transform: rotate3d(0,0,1,-720deg);
        transform: rotate3d(0,0,1,-720deg);
        opacity: 0
    }

    100%
    {
        -webkit-transform: none;
        transform: none;
        opacity: 1
    }
}


input, select, textarea, .border-input
{
    border: 1px solid var( --input-border );
    border-radius: 6px;
    padding: 0.6rem 0.75rem;
    font-weight: normal !important;
    font-family: "Sen";
    background-color: var( --input-bg );
    color: var( --input-text );
    transition: border-color 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;

    &:not( input[type=checkbox] )
    {
        width: 100%;
    }

    &:hover:not( :focus ):not( :disabled )
    {
        border-color: var( --input-border-hover );
    }

    &:focus
    {
        outline: none;
        border-color: var( --primary );
        background-color: var( --input-bg-focus );
        box-shadow: 0 0 0 3px var( --input-focus-ring );
    }

    &::placeholder
    {
        color: var( --input-placeholder );
    }
     
    &:disabled
    {
        opacity: 0.3;
        cursor: not-allowed;
    }

    &.modified
    {
        border-color: rgb( from var( --primary ) r g b / 0.6 );
    }

    &.invalid
    {
        background-color: var( --error );
        color: #fff;

        &::placeholder
        {
            color: #fff;
            opacity: 0.3;
        }
    }
}

select
{
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 2rem;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23647c7c' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M1 1.5l5 5 5-5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 11px 7px;

    &.input-validation-error
    {
        border-right: 0.5rem solid var( --error );
    }

    option, optgroup
    {
        background-color: #121927;
        color: #ADB3CB;
        padding: 2px 10px;
    }

    optgroup
    {
        padding: 20px;
        opacity: 0.3;
        color: white;
    }
}

.validation-message
{
    color: var( --error );
    font-size: 12px;
    padding: 0.5rem;
}

/* Hide native number-input spinners — they're inconsistent across browsers
   and we don't have a way to make them look right. */
input[type="number"]
{
    -moz-appearance: textfield;
    appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button
{
    -webkit-appearance: none;
    margin: 0;
}

/* Native date/time picker icons are barely visible on a dark theme. Recolor + show. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator
{
    filter: invert( 0.9 );
    opacity: 0.5;
    cursor: pointer;
    padding: 0.25rem 0;
    transition: opacity 0.15s ease;
}

input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="datetime-local"]:hover::-webkit-calendar-picker-indicator,
input[type="time"]:hover::-webkit-calendar-picker-indicator,
input[type="month"]:hover::-webkit-calendar-picker-indicator,
input[type="week"]:hover::-webkit-calendar-picker-indicator
{
    opacity: 1;
}

.file-upload
{
    position: relative;

    input
    {
        cursor: pointer;
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        opacity: 0;
    }

    &:after
    {
        content: "upload_file";
        font-family: "Material Symbols Rounded";
        font-size: 2rem;
        color: white;
        padding: 0.5rem;
        border-radius: 5px;
        position: absolute;
        bottom: 20px;
        right: 20px;
        pointer-events: none;
        transition: all 0.2s ease;
    }

    &:hover
    {
        &:after
        {
            font-size: 3rem;
        }
    }

    &.noimage
    {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 200px;
        border: 2px dashed #ffffffaa;
        border-radius: 10px;

        &:after
        {
            position: initial;
        }

        &.is-drag-hovered
        {
            border: 2px solid #5cf350;
            background-color: #5cf35022;

            &:after
            {
                color: #5cf350;
            }
        }

        &.is-drag-dropped
        {
            opacity: 0.5;
            border: 2px solid #80c8ff;
            background-color: #80c8ff11;

            &:after
            {
                color: #80c8ff;
            }
        }
    }
}

table
{
    width: 100%;
    border-radius: 8px;
    border-spacing: 0px;
    overflow: hidden;

    thead
    {
        background-color: #0e141f;
        font-size: 11px;
        letter-spacing: 1px;
        overflow: hidden;
    }

    th, thead td
    {
        padding: 8px;
        font-size: 0.7rem;
        color: #fff7;
    }

    tr
    {
        background-color: rgba( 37, 46, 63, 0.2 );

        &:nth-of-type(odd)
        {
            background-color: rgba( 37, 46, 63, 0.3 );
        }

        td, th
        {
            padding: 6px 12px;
            font-size: 13px;
            border: 1px solid #0e141f66;
            color: #9db2d8;

            &.grow
            {
                width: 100%;
            }
        }

        &:hover
        {
            background-color: rgb( from var( --primary ) r g b / 0.2 );
            color: #fff;
        }
    }


    thead
    {
        tr, tr:hover, tr:nth-of-type(odd)
        {
            background-color: #2c61c452;

            td, th
            {
                color: #5d89db;
            }
        }
    }


    .faded
    {
        opacity: 0.5;
    }
}

::-webkit-scrollbar-corner
{
	display: none;
	border: none;
}

::-webkit-resizer
{
	border: none;
}

::-webkit-scrollbar-button
{
	border: none;
	display: none;
}

::-webkit-scrollbar-track
{
	border-radius: 4px;
	background-color: transparent;
	border: none;
}

::-webkit-scrollbar
{
	background-color: transparent;
	height: 16px;
	overflow: visible;
	width: 8px;
	border: none;
	position: absolute;
}

::-webkit-scrollbar-thumb
{
	border-radius: 2px;
	background-color: rgb( 255 255 255 / 0.4 );
	border: none;
}

#components-reconnect-modal
{
    transition: all 2s linear;
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: #1110;
}

#components-reconnect-modal.components-reconnect-show
{
    background-color: #111d;
    z-index: 10000;
    backdrop-filter: blur( 10px ) grayscale( 50% );
    display: flex;
    align-items: center;
    justify-content: center;
    animation: reconnect-appear 0.5s;
    animation-iteration-count: 1;

    &:after
    {
        content: 'Reconnecting..';
        font-size: 1rem;
        font-family: Poppins;
    }
}

#components-reconnect-modal.components-reconnect-rejected, #components-reconnect-modal.components-reconnect-failed
{
    background-color: #111d;
    z-index: 10000;
    backdrop-filter: blur( 10px ) grayscale( 50% );
    display: flex;
    align-items: center;
    justify-content: center;
    animation: reconnect-appear 0.5s;
    animation-iteration-count: 1;

    &:after
    {
        white-space: pre;
        content: 'Site updated';
        text-align: center;
        font-size: 20px;
        font-family: Poppins;
        border-radius: 10px;
        border: 2px solid #444;
        padding: 2rem;
        background-color: #4442;
    }
}

#components-reconnect-modal.components-reconnect-failed
{
    background-color: #311d;

    &:after
    {
        content: 'Failed to connect';
    }
}

@keyframes reconnect-appear
{
    from
    {
        opacity: 0;
    }

    to
    {
        opacity: 1;
    }
}
code, pre
{
	font-family: "Cascadia Code", monospace;
	tab-size: 4;
}

pre
{
	background: rgba( 0, 0, 0, 0.35 );
	border: 1px solid rgba( 255, 255, 255, 0.15 );
	border-radius: 5px;
	padding: 16px;
}

.code
{
	color: #ccc;

	a
	{
		text-decoration: none;
	}

	.keyword
	{
		color: #5397cc;
	}
}
pre code.hljs
{
    display: block;
    overflow-x: auto;
    padding: 1em;
    border-radius: 3px;
}

code.hljs
{
    padding: 3px 5px
}
/*

Visual Studio-like style based on original C# coloring by Jason Diamond <jason@diamond.name>

*/
.hljs
{
    background: #1e1e1e;
    color: #ccc;
}

.hljs-comment,
.hljs-quote,
.hljs-variable
{
    color: #57a64a;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-built_in,
.hljs-name,
.hljs-tag
{
    color: #5699bd;
}


.hljs-title,
.hljs-section,
.hljs-attribute,
.hljs-literal,
.hljs-template-tag,
.hljs-template-variable,
.hljs-type,
.hljs-addition
{
    color: #dcdcaa;
}

.hljs-string
{
    color: #d69d85;
}

.hljs-deletion,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-meta
{
    color: #4ec9af;
}

.hljs-doctag
{
    color: #57a64a;
}

.hljs-attr
{
    color: #f00
}

.hljs-symbol,
.hljs-bullet,
.hljs-link
{
    color: #00b0e8
}

.hljs-emphasis
{
    font-style: italic
}

.hljs-strong
{
    font-weight: bold
}


.particlecanvas
{
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: clip;
    pointer-events: none;
}

.particle
{
    animation-direction: normal;
    animation-iteration-count: 1;
    animation-fill-mode: both;
    position: absolute;
}


.particle.spark
{
    animation-name: particle-spark-anim;
    background-color: white;
    box-shadow: 0px 0px 10px cyan;
    width: 5px;
    height: 5px;
    border-radius: 100px;
    --duration: 0.3 0.6;
    --velocity: 500 600;
    --damping: 0.1 0.1;
}

@keyframes particle-spark-anim
{
    0%
    {
        transform: scale( 0 );
        opacity: 0;
    }

    2%
    {
        transform: scale( 1 );
        opacity: 1;
    }

    50%
    {
        transform: scale( 0.5 );
    }

    100%
    {
        transform: scale( 0.0 );
        opacity: 0;
    }
}


.particle.rating
{
    animation-name: particle-rating-anim;
    animation-timing-function: ease-in;
    border-radius: 4px;
    filter: drop-shadow( 2px 2px 10px rgba( 0, 0, 0, 0.4 ) );
    backdrop-filter: blur( 200px );
    background-color: #08f6;
    padding: 4px 6px;
    --duration: 8 10;
    --velocity: 0 0;
    --damping: 0.1 0.1;
    --angle: -6 6;
    --angle-velocity: -6 6;
    transform-origin: center center;
    pointer-events: all;
    cursor: pointer;
    user-select: none;

    &:hover
    {
        background-color: #08fa;
    }

    img
    {
        width: 18px;
        height: 18px;
        border-radius: 4px;

        &.avatar
        {
            margin-right: 5px;
        }
    }

    .username
    {
        font-size: 10px;
        text-align: center;
        color: white;
    }
}

@keyframes particle-rating-anim
{
    0%
    {
        transform: translateX( -50% ) translateY( -50% ) scale( 0 ) rotate( var( --rotation ) );
        opacity: 0;
    }

    2%
    {
        transform: translateX( -50% ) translateY( 20px ) scale( 1 ) rotate( var( --rotation ) );
        opacity: 1;
    }

    80%
    {
        opacity: 1;
    }

    95%
    {
        transform: translateX( -50% ) translateY( 40px ) scale( 1 ) rotate( var( --rotation ) );
    }

    100%
    {
        transform: translateX( -50% ) translateY( -300px ) scale( 1 ) rotate( var( --rotation ) );
        opacity: 0;
    }
}


.particle.play
{
    animation-name: particle-play-anim;
    animation-timing-function: ease-in;
    filter: drop-shadow( 2px 2px 2px black );
    border-radius: 100px;
    --duration: 2 2;
    --velocity: 10 20;
    --damping: 0.01 0.01;
    --angle: -15 15;
    --angle-velocity: -10 10;
    transform-origin: center center;

    &:before
    {
        font-family: "Material Symbols Rounded";
        content: 'sports_esports';
        font-size: 24px;
    }
}

@keyframes particle-play-anim
{
    0%
    {
        transform: translateX( -50% ) translateY( -50% ) scale( 1.3 ) rotate( var( --rotation ) );
        opacity: 0;
        color: white;
    }

    2%
    {
        transform: translateX( -50% ) translateY( -50% ) scale( 0.8 ) rotate( var( --rotation ) );
        opacity: 1;
    }

    80%
    {
        opacity: 1;
        transform: translateX( -50% ) translateY( -50% ) scale( 1 ) rotate( var( --rotation ) );
    }

    100%
    {
        transform: translateX( -50% ) translateY( -50% ) scale( 0.2 ) rotate( var( --rotation ) );
        opacity: 0;
    }
}

@charset "utf-8";

html
{
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    overflow-y: scroll;
    --primary: #3273EB;
    --primary-alt: #fff;
    --error: #b72d4f;
    --warning: #f59e0b;
    --warning-alt: #fff;
    --success: #4db649;
    --success-alt: #fff;
    --text-color: #ADB3CB;
    --site-background-color: #181f2f;
    --site-background-color-dark: #080f1f;
    --site-header-height: 60px;
    --site-header-color: #04131c;
    --site-sidebar-secondary: color-mix( in srgb, var( --site-header-color ) 66%, var( --site-background-color ) );
    --site-sidebar-third: color-mix( in srgb, var( --site-header-color ) 33%, var( --site-background-color ) );
    background-color: var( --site-background-color );
    --scroll: 0;
    color: var( --text-color );
    --menu-background: #111;
    --menu-border: 1px solid #244051;
    --menu-option-color: #869bb3;
    --menu-option-colorbg: transparent;
    --menu-option-color-hover: #fff;
    --menu-option-colorbg-hover: #24405155;
    --menu-option-color-active: #fff;
    --menu-option-colorbg-active: #08f;
    --admin: #c4214f;
    --admin-alt: #fff;
    --code-text: #ccc;
    --code-keyword: #569cd6;
    --code-namespace: #dcdcdc;
    --code-typename: #4ec9b0;
    --code-comment: #608b4e;
    --code-bracket: #efb839;
    --form-surface: rgb( 255 255 255 / 0.02 );
    --form-divider: rgb( 255 255 255 / 0.06 );
    --form-label-color: #d9deec;
    --input-bg: rgb( 0 0 0 / 0.35 );
    --input-bg-focus: rgb( 0 0 0 / 0.45 );
    --input-border: rgb( 255 255 255 / 0.18 );
    --input-border-hover: rgb( 255 255 255 / 0.32 );
    --input-text: #e4ecff;
    --input-placeholder: rgb( 255 255 255 / 0.2 );
    --input-focus-ring: rgb( from var( --primary ) r g b / 0.25 );

    /* Generic "panel" surfaces — the light-inner + light-outline pattern we use for
       thread rows, post bodies, forum cards, the hero, etc. Distinct from input
       chrome (which sits darker on the page). */
    --surface-bg:         rgb( 255 255 255 / 0.04 );
    --surface-bg-fade:    rgb( 255 255 255 / 0.015 );
    --surface-bg-hover:   rgb( 255 255 255 / 0.08 );
    --surface-line:       rgb( 255 255 255 / 0.1 );
    --surface-line-hover: rgb( 255 255 255 / 0.2 );

    /* Layout */
    --container-max-width: 1100px;
    --column-gap: 0.75rem;
}


html, body
{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    min-width: 320px;
}

.container
{
    flex-grow: 1;
    margin: 0 auto;
    width: auto;
    max-width: var( --container-max-width );
}

body
{
    position: relative;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}


*, *:before, *:after
{
    box-sizing: inherit;
}

h1, h2, h3, h4, h5
{
    color: #ffffff;
}

a
{
    color: var( --primary );
    text-decoration: none;

    &:hover
    {
        color: #fff;
    }
}

i
{
    font-family: 'Material Symbols Rounded';
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    font-feature-settings: 'liga';
    font-variation-settings: "FILL";
    -webkit-font-smoothing: antialiased;
}

.title
{
    font-family: 'Poppins', sans-serif;
}

.subtitle
{
    color: #fff;
    font-family: 'Poppins', sans-serif;
}

.nowrap
{
    white-space: nowrap;
}

.rating-parent .rating-button-container
{
    opacity: 0;
    transform: translateX( -8px );
}


.rating-parent:hover .rating-button-container
{
    opacity: 1;
    transition: all 0.2s ease;
    transform: translateX( 0px );
}


video:not( .playing )
{
    opacity: 0.8;
    cursor: pointer;

    &:hover
    {
        opacity: 1;
    }
}

video.playing
{
    opacity: 1;
}