@layer reset;

@font-face {
    font-family: 'header';
    src: url('/assets/fonts/roundo/Roundo-Medium.otf') format('opentype');
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'main_font';
    src: url('/assets/fonts/pilcrow/PilcrowRounded-Regular.otf') format('opentype');
    font-style: normal;
    font-display: swap;
}


:root {

    /* Feedback states */
    --error: #864948;
    --warn: #b6a182;
    --success: #78a87a;
    --highlight: #e0d8ba;
    --selection: #c8d2d6;
    --focused: #a0a7a8;

    --font-family-base: "main_font", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

    --border-radius-base: 10px;

    * {
        color: white;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family: "header";
    }

    ::-webkit-scrollbar-button {
        display: none;
        height: 13px;
        border-radius: 0px;
        background-color: #AAA;
    }

    ::-webkit-scrollbar-button:hover {
        background-color: #AAA;
    }

    ::-webkit-scrollbar-thumb {
        background-color: #676767;
        border-radius: 100px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background-color: #353036;
        border-radius: 100px;
    }

    ::-webkit-scrollbar-track {
        background-color: #a9a1aa;
        border-radius: 100px;
    }

    ::-webkit-scrollbar-track:hover {
        background-color: #CCC;
        border-radius: 100px;
    }

    ::-webkit-scrollbar {
        width: 7px;
        height: 7px;
    }

    :disabled {
        filter: saturate(0);
        cursor: not-allowed;
        user-select: none;
        opacity: 0.8;
    }

    .wrapper {
        display: flex;
        /* Activates Flexbox */
        flex-direction: column;
        /* Stacks children vertically (standard for sections) */
        gap: 20px;
        /* Sets a consistent space between children */

        margin-inline: auto;
        max-width: 1000px;
        margin-top: 20px;
        margin-bottom: 100px;
        width: 100%;
    }



    .center {
        display: flex;
        margin-inline: auto;
    }

    /* Aside Stylings */

    aside {
        margin: 10px 0px;
        background-color: rgb(83, 83, 83);
        padding: 0px 0px 10px 0px;
        border-radius: calc(var(--border-radius-base) * 0.5);
        color: white;
        box-shadow: var(--shadow);
    }

    aside>h6 {
        color: rgb(214, 214, 214);
        font-size: clamp(16px, 1rem, 1em);
        font-weight: bold;
        background-color: rgb(46, 46, 46);
        margin: 0px;
        padding: 5px 10px;
        border-radius: calc(var(--border-radius-base) * 0.5) calc(var(--border-radius-base) * 0.5) 0px 0px;
        box-shadow: var(--shadow);
        user-select: none;
    }

    aside>p {
        margin: 5px 10px 0px 10px;
        padding: 0px;
    }

    aside.warning {
        background-color: #7f1d1c;
    }

    aside.warning>h6 {
        color: #ff9292;
        background-color: #b81c1d;
    }

    aside.warning>h6::before {
        content: "🛑";
        margin-right: 5px;
        color: #ff9292;
    }


    aside.caution {
        background-color: #733f12;
    }

    aside.caution>h6 {
        color: #ffc36e;
        background-color: #a16107;
    }

    aside.caution>h6::before {
        content: "⚠️";
        margin-right: 5px;
        color: #ffc36e;
    }

    aside.info {
        background-color: #1e3b8a;
    }

    aside.info>h6 {
        color: #a9c0ff;
        background-color: #1d4ed6;
    }

    aside.info>h6::before {
        content: "ⓘ";
        margin-right: 5px;
        color: #a9c0ff;
    }

    aside.tip {
        background-color: #15532f;
    }

    aside.tip>h6 {
        color: #56dd8a;
        background-color: #157f3d;
    }

    aside.tip>h6::before {
        content: "💡";
        margin-right: 5px;
        color: #56dd8a;
    }


    a.link-no-decor,
    .link-no-decor a {
        color: white;
        text-decoration: none;
        cursor: pointer;
    }
}

/* //// CSS RESET STYLING */
@layer reset {

    /* resetting CSS margin: remove default margin on text tags */
    * {
        margin: 0;
        padding: 0;
    }

    /*Use a more-intuitive box-sizing model.*/
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    /* remove built-in form typography
        margin: remove default margin on text tags
        */
    input,
    button,
    textarea,
    select {
        font: inherit;
        color: inherit;
    }

    button * {
        user-select: none;
        -webkit-user-select: none;
        pointer-events: none;
    }

    button>a {
        text-decoration: none;
        color: white;
    }

    /*Avoid text overflows*/
    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    code {
        overflow-wrap: break-word;
    }

    header,
    footer,
    main,
    section,
    article {
        container-type: inline-size;
    }

    /* //// SEMANTIC SAFETY WARNINGS */

    body h1:not(:first-of-type) {
        color: var(--error);
        text-decoration: underline;
    }

    html {
        font-size: 20px;
        /* 16px by Default */
        /*16px is the minimum size for IOS devices without auto-zooming on the page.*/
        font-family: var(--font-family-base);

        /* scroll-behavior: smooth; Moved to within Prefers-reduced-motion: no-preference media query. */

        /* Mobile specific features */
        /* Highlight color when interactive elements are clicked on Apple devices*/
        -webkit-tap-highlight-color: var(--focused);
        /* Prevent text size adjustment on orientation change */
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
        /* Better text rendering on mobile */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
        /* Allows text to stay aligned even when starting with punctuation. */
        hanging-punctuation: first last;
        /* Prevents a hidden scrollbar from changing the flow of elements on the page */
        scrollbar-gutter: stable;

        color-scheme: dark light;

        /*Allows properties to be animated/ transitioned too, even if they are words like 'auto'.*/
        interpolate-size: allow-keywords;
    }

    body {
        margin: 0;
        padding: 0;
    }


    ol {
        padding-left: 1.5em;
        margin: 0.5em 0;
    }

    li {
        margin: 0.25em 0;
    }

    ul {
        list-style: disc;
        padding-left: 1.5em;
    }

}

.hidden {
    display: none;
}

#show_all_files:has(~ :target) {
    display: block;
}

header {
    padding: 10px 20px;
    background-color: rgb(41, 3, 43);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    user-select: none;
}

.donate_button {
    padding: 5px;
    border-radius: 10px;;
    background-color: rgba(209, 0, 105, 1);
    display: flex;
    width: fit-content;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}

.donate_button > img {
    width: 20px;
    margin-right: 5px;
}

filesect {
    scroll-margin-top: 100px;
}



.section_con {
    margin-inline: auto;
    background-color: rgba(41, 3, 43, 0.8);
    padding: 20px;
    border-radius: 10px;
    width: 100%;
}

.file_con {
    max-width: 400px;
    margin-inline: auto;
    background-color: rgba(41, 3, 43, 0.8);
    padding: 0px;
    border-radius: 10px;
    width: 100%;
}

.file_con>header {
    border-radius: 10px 10px 0 0;
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: space-between;
}

.file_con>content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    padding-top: 5px;
}

content p:first-of-type {
    margin-top: 0px;
}


.banner-container {
    position: relative;
    display: inline-block;
    /* Keeps the container the same size as the image */
    width: 100%;
    /* Or whatever width your design needs */
    max-width: 600px;
    max-height: 130px;
    overflow: hidden;
}

.file_banner {
    width: 100%;
    display: block;
    /* Removes the tiny gap at the bottom of images */
    object-fit: cover;
    max-height: 130px;
    filter: brightness(0.5);
    transition: filter 0.2s;
}

.file_con:hover .file_banner {
    filter: brightness(0.9);
}

.banner-container .player_play {
    position: absolute;

    /* Position it in the center */
    bottom: 10px;
    left: 10px;

    transition: scale 0.2s;
}

.banner-container tag {
    position: absolute;

    /* Position it in the center */
    bottom: 10px;
    right: 10px;
}


.player_play:hover {
    scale: 1.1;
    filter: brightness(1.1);
}

p {
    margin-block: 15px;
    font-size: clamp(16px, 1rem, 1em);
    margin: 10px auto 5px;
    text-wrap: pretty;
    text-wrap-style: pretty;
}

h5 {
    margin-top: 10px;
    font-size: 16px;
}


button {
    cursor: pointer;
    padding: 10px;
    border-radius: 10px;
    border: none;
    background: rgba(209, 0, 105, 1);
    font-weight: bold;
    color: rgba(255, 255, 255, 0.95)
}


summary {
    font-family: "header";
    user-select: none;
    font-size: 1.7em;
    font-weight: bold;
    cursor: pointer;
}


dialog {
    flex-direction: column;
    margin: auto;
    width: 100%;
    height: 100%;
    min-width: 300px;
    min-height: 200px;
    max-width: 400px;
    max-height: 500px;
    padding-inline: 10px;
    border-radius: 20px;
    background-color: #953f9b;
    border: 3px solid #d3c3bd;
}

dialog::backdrop {
    background: rgba(32, 9, 51, 0.5);
}

.modal_close {
    position: absolute;
    right: 20px;
    margin-left: auto;
    margin-right: 5px;
    display: flex;
    border-radius: 0px 0px 10px 10px;
}

.rank_locked {
    filter: blur(5px) saturate(0);
    user-select: none;
    touch-action: none;
    pointer-events: none;
}

.darkened {
    position: relative;
    user-select: none;
    touch-action: none;
    pointer-events: none;
}

.darkened::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    /* semi-transparent black */
    pointer-events: none;
    /* allows clicks to pass through */
}

.file_row {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 10px;
}

.file_row>button {
    aspect-ratio: 1/1;
    width: 60px;
    height: 60px;
    font-size: 25px;
}

.share_button {
    background-color: transparent;
    aspect-ratio: 1/1;
    width: 24px;
    padding: 5px;
    display: flex;
    margin-right: 10px;
}

.share_button img {
    margin: auto;
}


.player_con {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px;
    grid-template-areas:
        "player info"
        "transcript transcript";
    margin-top: 5px;
}

audiocontrol {
    position: fixed;
    bottom: 10px;
    width: 100%;
    background-color: rgba(35, 16, 15, 0.6);
    padding: 10px 20px;
    max-width: 600px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 10px;
    backdrop-filter: blur(10px);
    box-shadow: 0px 0px 10px black;

    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto;
    grid-column-gap: 20px;
    grid-row-gap: 5px;

    user-select: none;
    -webkit-user-select: none;
}


.player_track {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.player_track input[type="range"] {
    margin-block: auto;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
}

input[type="range"] {
    -webkit-appearance: none;
    /* Needed for Chrome/Safari/Edge */
    appearance: none;
    background: transparent;
    /* Allows us to set our own background */
    width: 100%;
}

/* Chrome, Safari, Edge, Opera */
input[type="range"]::-webkit-slider-runnable-track {
    height: 8px;
    background: #861cb7;
    border-radius: 4px;
}

/* Firefox */
input[type="range"]::-moz-range-track {
    height: 8px;
    background: #861cb7;
    border-radius: 4px;
}

/* Chrome, Safari, Edge, Opera */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: #e600ff;
    cursor: pointer;
    margin-top: -6px;
    /* Centers the thumb on the track */
    display: none;
}

/* Firefox */
input[type="range"]::-moz-range-thumb {
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: #e600ff;
    cursor: pointer;
    border: none;
    display: none;
}

player {
    display: flex;
    flex-direction: column;
    background-color: rgb(116, 18, 99);
    width: fit-content;
    padding: 20px;
    border-radius: 10px;
    aspect-ratio: 1/1;
    margin-block: 10px;
    max-width: 237px;
    user-select: none;

    grid-area: player;
}

player>button,
.player_play,
#master_play {
    margin: auto;
    width: 50px;
    height: auto;
    min-height: 50px;
    min-width: 50px;
    aspect-ratio: 1/1;
    font-size: 1em;

    display: flex;
    align-items: center;
    justify-content: center;
}

#master_now_playing {
    height: 20px;
    max-width: 300px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#master_progress_con {
    width: 100%;
    height: 7px;
    background-color: #513a5e;
    border-radius: 10px;
    /* Capsule shape */
    overflow: hidden;
    /* Clips the inner bar */
}

#master_progress {
    height: 100%;
    width: 0%;
    /* Will be updated by JS */
    background: linear-gradient(90deg, #af2fc6 0%, #dd00ff 100%);
    transition: width 0.3s ease-in-out;
    /* Smooth growth */
}

player>timer {
    display: block;
    margin-top: auto;
}

playerrow {
    margin-inline: auto;
    display: grid;
    width: fit-content;
    grid-template-columns: repeat(2, auto);
    grid-column-gap: 5px;
    grid-row-gap: 5px;
    background-color: #27100f;
    padding: 10px;
    border-radius: 10px;
    user-select: none;
    -webkit-user-select: none;
}

playerrow .player_play {
    grid-area: 1 / 1 / 3 / 2;
}

playerrow timer {
    display: block;
    margin: auto;
}

controls {
    display: flex;
    gap: 5px;
}

controls button {
    display: flex;
    justify-content: center;
    width: 50px;
}

button.toggled {
    background-color: rgb(48, 198, 96);
}

details.styled_details {
    margin-top: 5px;
    grid-area: transcript;
}

details.styled_details>section {
    background-color: rgba(0, 0, 0, 0.3);
    padding: 5px 10px;
    border-radius: 5px;
    max-height: 200px;
    overflow-y: auto;
}

details.styled_details summary {
    font-size: 20px;
    background-color: rgba(0, 0, 0, 0.8);
    padding: 5px;
    border-radius: 5px;
}



/*TAG CONS*/
tagcon {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

tag {
    display: block;
    padding: 2px 5px;
    border-radius: 5px;
    background-color: gray;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
}

tag.duration {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    white-space: nowrap;
    width: fit-content;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 5px;
    background-color: #353036;
}

tag.duration img {
    display: block;
    width: auto;
    height: 1em;
}

tag.sfw {
    background-color: rgb(0, 78, 0);
}

tag.gentle {
    background-color: rgb(7, 71, 132);
}

tag.calming {
    background-color: rgb(121, 42, 117);
}

tag.trigger_installation {
    background-color: rgb(137, 80, 27);
    border: 2px solid white;
}

tag.corruption {
    background-color: rgb(137, 27, 27);
}

tag.blank {
    background-color: rgb(68, 56, 81);
}

tag.mindless {
    background-color: rgb(187, 7, 184);
}

tag.loopable,
tag.repeatable {
    background-color: rgb(0, 173, 20);
}

tag.thought_elimination {
    background-color: rgb(10, 159, 146);
}

tag.IQ_reduction {
    background-color: rgb(60, 141, 10);
}

tag.dumbification {
    background-color: rgb(171, 88, 158);
}

tag.conditioning {
    background-color: rgb(62, 60, 60);
}

tag.brainwashing {
    background-color: rgb(27, 29, 137);
}

tag.addiction {
    background-color: rgb(152, 112, 75);
}

tag.time_dilation {
    background-color: rgb(6, 96, 1);
}

tag.fractionation {
    background-color: rgb(45, 29, 85);
}

tag.identity_takeover {
    background-color: rgb(108, 0, 108);
}

tag.trance_item {
    background-color: rgb(104, 0, 164);
    border: 2px solid white;
}

tag.drop_trigger_required,
tag.nsfw,
tag.permanent {
    background-color: rgb(206, 3, 0);
    border: 2px solid white;
}

tag.touch_trigger_required {
    background-color: rgb(0, 103, 206);
    border: 2px solid white;
}



/* HTML: <div class="loader"></div> */
.custom-loader {
  --R: 15px;
  --g1: #514b82 96%, #0000;
  --g2: #eeeeee 96%, #0000;
  width: calc(2*var(--R));
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  -webkit-mask: linear-gradient(#000 0 0);
  animation: l30 2s infinite linear;
  margin: auto;
}
.custom-loader::before,
.custom-loader::after{
  content:"";
  grid-area: 1/1;
  width: 50%;
  background:
    radial-gradient(farthest-side,var(--g1)) calc(var(--R) + 0.866*var(--R) - var(--R)) calc(var(--R) - 0.5*var(--R)   - var(--R)),
    radial-gradient(farthest-side,var(--g1)) calc(var(--R) + 0.866*var(--R) - var(--R)) calc(var(--R) - 0.5*var(--R)   - var(--R)),
    radial-gradient(farthest-side,var(--g2)) calc(var(--R) + 0.5*var(--R)   - var(--R)) calc(var(--R) - 0.866*var(--R) - var(--R)),
    radial-gradient(farthest-side,var(--g1)) 0 calc(-1*var(--R)),
    radial-gradient(farthest-side,var(--g2)) calc(var(--R) - 0.5*var(--R)   - var(--R)) calc(var(--R) - 0.866*var(--R) - var(--R)),
    radial-gradient(farthest-side,var(--g1)) calc(var(--R) - 0.866*var(--R) - var(--R)) calc(var(--R) - 0.5*var(--R)   - var(--R)),
    radial-gradient(farthest-side,var(--g2)) calc(-1*var(--R))  0,
    radial-gradient(farthest-side,var(--g1)) calc(var(--R) - 0.866*var(--R) - var(--R)) calc(var(--R) + 0.5*var(--R)   - var(--R));
   background-size: calc(2*var(--R)) calc(2*var(--R));
   background-repeat :no-repeat;
}
.custom-loader::after {
 transform: rotate(180deg);
 transform-origin: right;
}

@keyframes l30 {
  100% {transform: rotate(-1turn)}
}


@media (max-width: 600px) {
#master_now_playing {
    max-width: 100px;
    font-size: 13px;
}

    #master_timer {
        margin-top: 5px;
        font-size: 14px;
    }
}