:root {
    --danger: #CC3525;
    --danger-text: #461510;
    --success: #30AA65;
}

.as-link {
    display: inline;
    color: var(--accent);
    cursor: pointer;
}

.as-link:hover {
    color: var(--text);
}

.client-configs {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-top: 1.75rem;
    margin-bottom: 1.5rem;
    gap: 1rem;
}

.client-configs__wrapper {
    color: var(--text-light);
}

.client-configs__wrapper div > p:first-child {
    margin-top: 0;
}

.clickable {
    cursor: pointer;
}

button.secondary,
input[type=submit].secondary {
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
}

form .field.checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1rem 0;
}

form .field.checkbox input[type=checkbox] {
    margin: 0;
    height: 100%;
}

input[type=checkbox]:checked::after {
    content: " ";
    width: .1em;
    height: .25em;
    border-radius: 0;
    position: absolute;
    top: calc(50% - 0.05rem);
    left: 50%;
    background: 0 0;
    border-right: solid var(--bg) .08em;
    border-bottom: solid var(--bg) .08em;
    font-size: 1.8em;
    transform: translate(-50%, -50%) rotate(45deg);
}

h1 > a {
    text-decoration: none;
    background: var(--accent);
    color: var(--bg);
    padding: 0 1rem;
}

h1 > a:hover,
h1 > a:visited {
    text-decoration: none;
    color: var(--bg);
}

h1 > a:hover {
    color: var(--bg) !important;
}

header h1 .show-desktop {
    display: inline;
}

header h1 .show-mobile {
    display: none;
}

body {
    font-size: 0.9rem;
}

main {
    padding-top: 1rem;
}

body > header {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    position: relative;
}


.mascot {
    opacity: 1;
}

html:not(.currently-perverted) .show-for-perverts {
    display: none;
}

html.currently-perverted .show-for-nonperverts {
    display: none;
}

html:not(.current-mascot-ki) .show-for-ki {
    display: none;
}

html:not(.current-mascot-warren) .show-for-warren {
    display: none;
}

html:not(.current-mascot-taylor) .show-for-taylor {
    display: none;
}

body > header h1 span {
    position: relative;

    .mascot__under-cover {
        position: absolute;
        z-index: 99999;
        opacity: 1;
        perspective: 100px;

        &.taylor {
            &.sfw {
                height: 72px;
                top: 41px;
                left: 32px;
                transform: rotate3d(1.5, 3.9, -0.6, 30deg);
            }

            &.nsfw {
                height: 72px;
                top: 34px;
                left: 32px;
                transform: rotate3d(0.5, 3.6, -0.2, 30deg);
            }
        }

        &.warren {
            &.sfw {
                height: 79px;
                top: 35px;
                left: 37px;
                transform: rotate3d(-0.3, 0.8, -0.1, 30deg);
            }

            &.nsfw {
                height: 79px;
                top: 37px;
                left: 60px;
                transform: rotate3d(1, 1.6, -0.2, 30deg);
            }
        }

        &.ki {
            &.sfw {
                height: 72px;
                top: 39px;
                left: 40px;
                transform: rotate3d(-1.3, 3.6, -0.5, 30deg);
            }

            &.nsfw {
                height: 97px;
                top: 53px;
                left: 16px;
                transform: rotate3d(-0.6, 2.5, -0.6, 30deg);
            }
        }
    }
}

body > header h1 span > .mascot {
    position: absolute;
    left: 50%;
    bottom: -50px;
    height: 190px;
    transform: translateX(calc(-50% - 149px));
    z-index: 0;

    clip-path: inset(0 0 33px 5px);
    transition: all 0.1s ease-out;
}

header .surrender-status {
    display: block;
    position: fixed;
    bottom: 0;
    left: 20px;
    max-width: 250px;
    z-index: 999999;
    background: var(--bg);
    border: 1px solid var(--border);
    border-bottom: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    padding: 1rem;
    box-shadow: 0 0 14px 7px var(--accent-bg);

    .surrender-status__status {
        display: flex;
        gap: 1rem;
        align-items: center;
        text-align: left;
    }

    .surrender-status__circle {
        flex: 0 0 30px;
        height: 30px;
        width: 30px;
        border-radius: 100%;
        color: var(--text);
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 24px;

        &.surrender-status__circle--active {
            color: var(--danger-text);
            background: var(--danger);
        }

        &.surrender-status__circle--pending {
            background: var(--marked);
            color: var(--marked);
            border: 1px solid var(--text);

            & > * {
                filter: brightness(0.3);
            }
        }

        &.surrender-status__circle--invalid {
            background: var(--success);
            color: var(--success);

            & > * {
                filter: brightness(0.3);
            }
        }
    }

    .accent-block__button {
        width: calc(100% + 2rem) !important;
        margin-left: -1rem !important;
        margin-right: -1rem !important;
        border-radius: 0;
        transform: translateY(1rem);
        padding: 0.5rem 0.2rem;
    }
}

@media screen and (max-width: 900px) {
    body > header h1 span > .mascot {
        left: 50%;
        bottom: -50px;
        height: 140px;
        transform: translateX(calc(-50% - 120px));
    }
}

@media screen and (max-width: 720px) and (min-width: 475px) {
    body > header h1 a {
        overflow: hidden;
    }

    body > header h1 span {
        position: relative;
        z-index: 1;
    }

    body > header h1 span > .mascot {
        height: 165px;
        transform: none;
        bottom: -80px;
        left: -61px;
        z-index: -1;
        opacity: 0.8;
    }
}

@media screen and (max-width: 475px) {
    body > header h1 {
        padding-left: 2rem !important;
    }

    body > header h1 span > .mascot {
        position: absolute;
        left: -70px;
        bottom: -50px;
        transform: none;
        height: 100px;
        clip-path: inset(0 0 38px 16px);
        z-index: -1;
    }
}

header .header__inner {
    position: relative;
    z-index: 99;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    max-width: 720px;
    margin: 0 auto;
    padding: 0 1rem;
}

header .header__age-warning {
    background: var(--bg);
    margin: -3px -8px 0 -8px;
    padding: 7px;
}

header .user-tools {
    flex: 1 1 320px;
}

header .user-tools .user-tools__nested {
    flex: 0 1 auto;
}

header .user-tools, header .user-tools .user-tools__nested {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
}

header .user-tools > a {
    white-space: nowrap;
}

header .user-tools > * + * {
    margin-left: 20px;
}

header h1 {
    display: flex;
    justify-content: flex-start;
    flex: 1 1 auto;
}

header a,
header a:hover,
header a:visited {
    text-decoration: none;
}

header a.username {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 110px;
}

header a.username,
header a:visited.username {
    color: var(--text);
}

header a:hover.username {
    color: var(--accent);
}

header a.pinged::after {
    content: '';
    display: inline-block;
    height: 0.5em;
    width: 0.5em;
    border-radius: 100%;
    background: var(--accent);
    margin-left: 0.25rem;
    transform: translateY(-0.5rem);
}

header a:hover {
    color: var(--text);
}

header a ion-icon {
    font-size: 1em;
}

header ion-icon.chat {
    color: var(--text);
}

header .notification-bell {
    color: var(--text);
    background: none;
    padding: 0;
    margin: 0 0 0 1rem;
}

header .notification-bell[data-has-notifs=true] {
    color: var(--accent);
}

@media screen and (max-width: 687px) {
    header h1 {
        justify-content: center;
    }
}

h2 {
    border-bottom: 1px solid var(--border);
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    font-size: 2.2rem;
    font-weight: normal;
    margin-top: 2rem;
}

h2.one-line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

h3:has(> small) {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: 0.6rem 1rem;
    background: var(--accent-bg);
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    font-weight: bold;

    & > small {
        flex: 1 1 auto;
        display: flex;
        justify-content: flex-end;
        font-size: 0.6em;
        color: var(--text);
        font-weight: normal;
    }
}

a span.beta-tag,
.as-link span.beta-tag,
h2 span.beta-tag,
h3 span.beta-tag {
    background: var(--danger);
    padding: 0.25em 0.4em 0.3em;
    color: #FFF;
    font-size: 0.7em;
    transform: translateY(-1.1em) translateX(0.4em);;
    display: inline-block;
    border-radius: 0.3rem;
}

h2 > .online {
    font-size: 1rem;
    transform: translateY(-0.9rem);
    display: inline-block;
}

h2 ion-icon {
    transform: translateY(0.05em);
    font-size: 0.8em;
}

h2 iconify-icon {
    font-size: 1em;
    height: 1em;
    width: 1em;
    transform: translateY(0.075em);
}

button iconify-icon {
    font-size: 1em;
    height: 1em;
    width: 1em;
    transform: translate(-0.05em, 0.075em) scale(1.3);
}

ion-icon.big {
    transform: translateY(0.15em);
    font-size: 1em;
}

h3 {
    font-size: 1.6rem;
    margin: 1.75rem 0 0.5rem;
    font-weight: normal;
}

h4 {
    text-align: center;
    margin-top: 5rem;
    margin-bottom: 0.25rem;
}

h4 + p {
    margin: 0 auto 2rem auto;
    max-width: 320px;
    text-align: justify;
}

strong {
    color: var(--accent);
}

.page-break {
    margin-top: 12rem;
}

.half-page-break {
    margin-top: 5rem;
}

blockquote p img {
    vertical-align: bottom;
}

blockquote > .byline {
    text-align: right;
    padding-right: 3rem;
}

.flashes {
    display: flex;
    flex-direction: column;
}

.tight {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
    margin-left: 0.5rem !important;
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}

.flashes .flash {
    background: var(--accent-bg);
    padding: 0.5rem 1rem 0.6rem;
    border: 1px solid var(--border);
    border-top: 0;
}

.flashes .unbounded {
    border-top: 1px solid var(--border);
    margin: 0.5rem 0;
}

.flashes .flash--success {
    color: var(--success);
}

.flashes .flash--success::before {
    content: "✅"
}

.flashes .flash--danger {
    color: var(--danger);
}

.flashes .flash--danger::before {
    content: "🚫"
}

.flashes > turbo-frame {
    display: contents;
}

p {
    line-height: 1.5rem;
}

.task-tools {
    display: flex;
    justify-content: space-between;
    height: 2.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.task-tools button ion-icon {
    transform: translateY(2px);
}

.task-tools.small {
    background: var(--border);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    margin-top: -16px;
    padding: 0 1rem;

    --accent-small-tools: var(--bg);
    --bg-small-tools: var(--accent);
    --text-small-tools: var(--bg);
}

.task-tools.small * {
    --accent: var(--accent-small-tools);
    --bg: var(--bg-small-tools);
    --text: var(--text-small-tools);
}

.task-tools.small button,
.task-tools.small input[type=submit] {
    font-size: 1em !important;
}

.task-tools .left {
    flex: 1 0 auto;
}

.task-tools .right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex: 1 1 320px;
    gap: 1.5rem;

    & .button-like {
        border: none;
        padding: 0.1rem 0.5rem;
    }

    & > a > iconify-icon {
        font-size: 1.3rem;
        transform: translateY(3px);
    }
}

.task-tools span > ion-icon {
    transform: translateY(0.2em);
}

.task-tools + h2 {
    margin-top: calc(3.25rem - 2.5rem);
}

.task-tools button,
.task-tools input[type=submit] {
    padding: 4px 13px;
    width: auto;
}

.task-tools .notice-right {
    animation: bounce-right 2s infinite;
}

@keyframes bounce-right {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(0);
    }
    40% {
        transform: translateX(8%);
    }
    60% {
        transform: translateX(4%);
    }
}

.mock-button {
    background: var(--accent);
    padding: 0px 8px;
    color: var(--bg);
    display: inline-block;
    border-radius: 4px;
}

.mock-link {
    padding: 0px 8px;
    color: var(--accent);
    display: inline-block;
    font-size: 1.1em;
}

.mock-online {
    display: inline-block;
    font-weight: bold;
    margin-left: 0.3rem;
    color: var(--success);
}

form.set-post-response div {
    display: flex;
    gap: 1rem;
}

.set-post-response__description {
    color: var(--text-light);
    padding: 1rem 0 0;
}

form.set-post-response input,
form.set-post-response select {
    height: 2.5rem;
}

form.set-post-response input {
    margin: 0;
}

form.set-post-response input[type=text] {
    flex: 1 1 90%;
}

form.set-post-response input[type=submit] {
    flex: 0 1 120px;
}

form.set-post-response select {
    flex: 0 1 auto;
    width: auto;
    padding-right: 45px;
}

form.set-post-id {
    max-width: 329px;
    margin: 1rem auto 0;
}

form.set-post-id input {
    width: 100%;
}

.masthead {
    width: 100%;
    height: 215px;
    display: flex;
    align-items: flex-end;
}

.masthead h3 {
    color: #FFF;
    margin: 1.5rem 2rem;
    padding: 0;
}

a.clean {
    text-decoration: none;
    color: inherit;
}

a > ion-icon,
.as-link > ion-icon {
    font-size: 1.3em;
    transform: translateY(0.175em);
}

a[download],
a[download]:hover,
a[download]:visited,
a.no-underline,
a.no-underline:hover,
a.no-underline:visited {
    text-decoration: none;
}

a[download] > ion-icon,
.no-underline > ion-icon {
    margin-right: 2px;
}

button.no-underline > ion-icon {
    transform: translateY(0.1rem);
}

button.no-underline {
    margin-left: 0.5rem;
    padding: 0.4rem 0.7rem;
}

.no-margin {
    margin: 0;
}

button.secondary {
    background: var(--text);
    color: var(--bg);
}

a[download]:hover,
a.no-underline:hover {
    color: var(--text);
}

.space-between + .space-between {
    margin-left: 10px;
}

.inline,
form.button_to {
    display: inline;
}

.friendship {
    display: flex;
    align-items: center;
    padding: 0.1rem 1.7rem;
}

.friendship--pending {
    color: var(--border);
}

[data-controller=user-reference] > .flair:empty {
    display: none;
}

[data-controller=user-reference] > .flair {
    font-size: 0.8em;
    background: var(--accent-bg);
    padding: 0.25ex 1ex;
    margin-left: 0.5ex;
    border: 1px solid var(--border);
    border-radius: 4px;
}

.friendship--pending a[data-controller=user-reference] {
    color: var(--border);
}

.friendship__names {
    flex: 1 1 320px;
}

.friendship__names > ion-icon {
    transform: translateY(0.25em);
    font-size: 1.2em;
}

.friendship__actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;

    & > * {
        word-break: keep-all;
    }
}

label ion-icon {
    font-size: 1.1rem;
    transform: translateY(0.1rem);
}

/* Breakpoints */

@media screen and (min-width: 590px) {
    header h1 a {
        margin-right: 1rem;
    }
}

@media screen and (max-width: 475px) {
    header h1 {
        font-size: 1.5rem;
        margin: 0.5rem auto !important;
    }

    header h1 > a {
        padding: 0 6px !important;
    }

    header .user-tools {
        font-size: 0.8rem;
    }

    header .user-tools ion-icon:not(.dont-hide) {
        display: none;
    }

    header .user-tools > * + * {
        margin-left: 11px !important;
    }

    header .header__inner {
        padding: 0 0.5rem;
    }

    .friendship {
        padding: 0.1rem 0;
    }

    .friendship__names {
        flex: 1 1 100px;
    }

    .link {
        grid-template-columns: 1fr auto !important;
    }
}

@media screen and (max-width: 600px) {
    header .user-tools > * + * {
        margin-left: 16px;
    }

    header .header__inner {
        display: flex;
        flex-wrap: wrap;
    }

    header h1 {
        flex: 0 1 auto;
    }

    header h1 a {
        padding: 0 9px;
    }

    header h1 .show-desktop {
        display: none;
    }

    header h1 .show-mobile {
        display: inline;
    }

    header .user-tools {
        flex: 1 1 auto;
        padding: 8px 0;
    }

    .task-tools .right {
        gap: 0.9rem;
    }

    .task-tools button {
        padding: 4px 8px;
    }

    form.set-post-response div {
        flex-wrap: wrap;
    }

    form.set-post-response input[type=text] {
        flex: 1 1 90%;
    }

    form.set-post-response input[type=submit] {
        flex: 1 1 100px;
    }
}

.small {
    font-size: 0.85em;
}

a.small {
    text-decoration: none;
}

a.small:hover {
    filter: brightness(1.1);
}

.tight-top {
    margin-top: 0 !important;
}

.accent-block {
    background: var(--accent-bg);
    padding: 55px 1.5rem 1.5rem;
    border-radius: 8px;
    margin-top: 2.25rem;
    display: block;
    position: relative;

    &.no-charm {
        padding-top: 1rem !important;
        padding-bottom: 0.25rem !important;

        & > h3,
        & > a > h3 {
            margin: 0;
        }
    }
}

.accent-block > .scare-charm {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 110px;
    mix-blend-mode: multiply;
    color: #c2c2c2;
    opacity: 0.75;
}

.big-charm {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 110px;
    opacity: 0.25;
    color: var(--accent);
    z-index: -1;
}

.accent-block--warning {
    background-image: linear-gradient(45deg, #ffb300 25%, #d0a536 25%, #d0a536 50%, #ffb300 50%, #ffb300 75%, #d0a536 75%, #d0a536 100%);
    background-size: 56.57px 56.57px;
    color: #212121;
    text-shadow: 0 0 2px #ffb300;
    font-weight: bold;
    --highlight: #f1cf7b;

    & h4 {
        margin-top: 1rem;
    }

    & ul li a:link, & ul li a:visited, & ul li a:hover {
        color: #212121;
        text-shadow: 0 1px 0 var(--highlight), 0 -1px 0 var(--highlight), 1px 0 0 var(--highlight), -1px 0 0 var(--highlight);
    }
}

.notification-actions {
    border-radius: 0 !important;
    margin-left: 0 !important;
    background: none;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    margin-top: 0.5rem !important;

    .accent-block__button {
        border-radius: 0 !important;
        transform: unset !important;


        &.accent-block__button--right {
            background: var(--accent-bg);
            color: var(--accent);

        }
    }
}

.accent-block .accent-block__button {
    width: calc(100% + 3rem) !important;
    margin: 0 -1.5rem 0 -1.5rem !important;
    transform: translateY(1.5rem);
    border-top-right-radius: 0;
    border-top-left-radius: 0;

    &.accent-block__button--left,
    &.accent-block__button--right {
        width: calc(50% + 0.5rem) !important;
    }

    &.accent-block__button--left {
        border-bottom-right-radius: 0;
    }

    &.accent-block__button--right {
        border-bottom-left-radius: 0;
        position: absolute;
        right: 1.5rem;
    }
}

@media screen and (max-width: 600px) {
    .accent-block .accent-block__button {
        &.accent-block__button--left,
        &.accent-block__button--right {
            width: calc(100% + 3rem) !important;
        }

        &.accent-block__button--left {
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 0;
        }

        &.accent-block__button--right {
            border-bottom-left-radius: 5px;
            position: static;
        }
    }
}

.accent-block .accent-block__button--force-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
}

.accent-block--warning strong, .accent-block--warning .accent-block__charm {
    color: inherit;
}

.accent-block > p {
    margin: 0;
}

.accent-block.danger {
    border: 2px solid var(--danger);
    padding-bottom: calc(1.5rem - 2px);
}

.accent-block.danger > p {
}

.accent-block.danger .accent-block__charm {
    color: var(--danger);
}

.accent-block.danger button {
    background: var(--danger);
    color: #FFF;
    border: none;
}

.accent-block button.main-action {
    margin: 1rem 0 0;
}

.accent-block.spaced {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.accent-block.only_charm {
    padding: 1.8rem 1.5rem;
}

.accent-block:has(> .inline) {
    padding: 0.25rem 1.5rem;
}

.accent-block__charm {
    color: var(--border);
    display: flex;
    align-items: center;
    gap: 7px;
    position: absolute;
    top: 0;
    height: 55px;

    &.inline {
        position: initial;
        flex-wrap: wrap;
        gap: 0.5rem;
        min-height: 35px;
        height: initial;
        padding: 10px 0;
    }

    & .right-side {
        flex: 1 1 auto;
        display: flex;
        justify-content: flex-end;
    }
}

.accent-block__charm--accordion {
    color: var(--text-light);
}

.accent-block__charm--accordion > div > p {
    margin-top: 0;
    margin-bottom: 1rem;
}

.accent-block__charm--accordion[aria-expanded=false] {
    padding-bottom: 0;
}

.accent-block__charm--accordion-header {
    cursor: pointer;
    width: calc(100% - 3rem); /* 3rem is a magic value, twice the parent element L+R padding */
}

.accent-block__charm--accordion-header:hover {
    color: var(--text);
}

.accent-block__charm--accordion[aria-expanded=true] .accent-block__charm--accordion-header__indicator {
    transform: rotate(180deg);
}

.accent-block__charm ion-icon {
    font-size: 1.2em;
}

.accent-block h2:first-of-type {
    margin-top: 0;
}

footer small a {
    text-decoration: none;
}

.modal {
    height: auto;
    opacity: 0;
    display: grid;
    color: var(--text);
    border-radius: 0.3rem;
    box-shadow: 0px 10px 30px 20px rgb(15, 15, 15);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--border);
    min-width: 320px;
    padding: 1rem;
    border: none;
    z-index: 9999;
    margin: 0;
    grid-template-rows: 24px 1fr;
    grid-template-areas: 'header'
                         'content';
    transition: opacity 0.3s;
    pointer-events: none;
}

.modal::after {
    content: '';
    position: fixed;
    top: 50%;
    left: 50%;
    background: var(--bg);
    z-index: -1;
    display: block;
    height: 100vh;
    width: 100vw;
    transform: translate(-50%, -50%);
    opacity: 0.8;
}

.modal__header {
    text-align: right;
    grid-area: header;
}

.modal__close-button {
    display: inline-block;
    margin: 0;
    background: none;
    color: var(--text);
    font-size: 1.5rem;
    padding: 0;
    line-height: 1rem;
}

.modal[data-open=true] {
    opacity: 1;
    pointer-events: all;
}

.modal > h4 {
    margin-top: 0;
}

.modal > p {
    padding: 0px 0.5rem;
}

.modal > form > .inset {
    max-width: 320px;
    padding: 0px 0.5rem;
}

.modal__buttons {
    display: flex;
    justify-content: flex-end;
    background: var(--accent);
    margin: 0 -1rem -1rem;
    border-bottom-left-radius: 0.3rem;
    border-bottom-right-radius: 0.3rem;
    padding: 0.5rem 1rem;
    gap: 0.5rem;
}

.modal textarea.full-span {
    width: 100%;
}

.modal__buttons input[type=submit] {
    padding: 0.4rem 0.7rem !important;
}

.modal__buttons > a,
.button-like {
    border: none;
    border-radius: 5px;
    background: var(--bg);
    color: var(--text);
    padding: .5rem .9rem;
    margin: 0.2rem 0;
}

.center-button {
    text-align: center;
    max-width: 180px;
    margin: 1.5rem auto;
    display: block !important;

    &:hover {
        background: var(--accent-bg);
    }
}

.modal__buttons > a:hover {
    color: var(--text-light);
}

.button-like {
    display: inline-block;
    border: 1px solid var(--accent);
}

@media screen and (max-width: 475px) {
    .modal {
        background: var(--accent-bg);
        bottom: 0;
        top: initial;
        left: 0;
        box-sizing: border-box;
        width: 100%;
        transform: translate(0, 100%);
        transition: all 0.2s;
    }

    .modal[data-open=true] {
        opacity: 1;
        pointer-events: all;
        transform: translate(0, 0);
    }

    .modal::after {
        top: 0;
        left: 0;
        transform: translate(0, -100%);
    }
}

.subdued {
    color: var(--border);
}

.center {
    text-align: center;
}

.notifications__popover {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 320px;
    background: var(--accent);
    font-size: 0.9rem;
    text-align: left;
    z-index: 999999999;
    transform: translate(-0.5rem, 0.75rem);
}

.notifications__popover[data-open=true] {
    display: block;
}

.notifications__popover::before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: 0.7rem solid transparent;
    border-bottom: 0.7rem solid var(--accent);
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(0, -0.7rem);
}

.notifications__popover > form,
.notifications__list > form {
    display: flex;
    justify-content: center;
}

.notification {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    color: var(--bg);
}

.notifications__popover .notification:hover {
    background: var(--accent-bg);

    time {
        color: var(--accent);
    }
}

.notifications__list .notification {
    border: 1px solid var(--border);
    border-radius: 0.3rem;
    padding: 0.8rem 0.9rem;
    margin-bottom: 0.5rem;
    color: var(--text);
    text-decoration: none;
    background: var(--accent-bg);

    time {
        color: var(--accent);
    }
}

.notification p {
    margin: 0;
}

.notification time {
    display: block;
    color: var(--accent-bg);
    font-size: 0.8em;
    line-height: 1em;
    margin-bottom: 0.4em;
}

.notification > ion-icon {
    font-size: 1.1rem;
    min-width: 18px;
}

.notification > iconify-icon {
    font-size: 1.2rem;
}

.notification > p {
    line-height: 1.2rem;
}

.notifications ion-icon {
    display: block !important;
}

header .user-tools turbo-frame {
    display: block;
    position: relative;
    font-size: 1.1rem;
    height: 1.3rem;
    margin: 0 !important;
    width: 32px;
}

.notifications__empty {
    padding: 1rem;
    text-align: center;
    color: var(--bg);
    font-weight: bold;
    font-size: 1.1rem;
}

@media screen and (max-width: 475px) {
    .notifications__popover {
        width: 100vw;
        transform: none;
        left: 0;
        position: fixed;
        top: 0;
    }

    .notification-bell {
        margin: 0 0 0 0.2rem !important;
    }
}

turbo-cable-stream-source {
    display: none;
}

.text-charm {
    display: inline-flex;
    align-items: center;
    margin-left: 0.25em;
    text-decoration: none;
}

.text-charm__reporter {
    gap: 0.25rem;
    font-size: 1em;
    color: var(--text);
    align-items: center;
    transform: translateY(1px);

    & > ion-icon {
        transform: scale(0.9) translateY(1px);
    }
}

.text-charm__online {
    background: var(--success);
    border-radius: 100%;
    width: 0.5rem;
    height: 0.5rem;
}

.text-charm__medal {
    transform: translateY(0.2em);
    background: var(--accent-bg);
    padding: 0.175em 0.4em;
    border-radius: 0.4em;
    font-size: 1em;
    cursor: zoom-in;
    transition: transform 80ms cubic-bezier(0.16, 1, 0.3, 1);
    text-decoration: none;
}

.text-charm__medal:hover {
    transform: translateY(0.2em) scale(1.75);
}

.text-charm__medal > ion-icon {
    pointer-events: none;
}

.text-charm > small {
    font-size: 0.5em;
    text-decoration: none;
}

.text-charm__medal-driftwood {
    background: darkolivegreen;
    color: white;
}

.text-charm__medal-tin {
    background: dimgrey;
    color: white;
}

.text-charm__medal-bronze {
    background: saddlebrown;
    color: white;
}

.text-charm__medal-silver {
    background: silver;
    color: black;
}

.text-charm__medal-gold {
    background: goldenrod;
    color: black;
}

.text-charm__medal-platinum {
    background: lightsteelblue;
    color: black;
}

.text-charm__medal-uranium {
    background: greenyellow;
    color: black;
}

.text-charm__medal-ruby {
    background: indianred;
    color: white;
}

.text-charm__medal-jade {
    background: mediumspringgreen;
    color: black;
}

.text-charm__medal-regal-purple {
    background: rebeccapurple;
    color: white;
}

.text-charm__medal-green {
    background: green;
    color: white;
}

.text-charm__medal-cum {
    background: lightgoldenrodyellow;
    color: black;
    border: var(--border) 1px solid;
}

a[data-controller=user-reference] {
    overflow: visible !important;
}

ol {
    counter-reset: orderedlist;
    padding: 0;
}

ol > li {
    padding: 0.5em 1em;
    display: flex;
    gap: 1.5em;
}

ol > li::marker {
    content: "";
}

ol > li::before {
    content: "#" counter(orderedlist);
    counter-increment: orderedlist;
    display: inline-block;
    min-width: 3ch;
}

ol > li:nth-child(2n+1) {
    background: var(--accent-bg);
}

ol > li > * {
    flex: 1 1 100%;
}

ol > li > *:last-child {
    flex: auto;
    white-space: nowrap;
}

/* Sections are for document-like pages, like /help */
section {
    border: none;
    margin: 0;
    padding: 0;
}

section + section {
    padding-top: 1rem;
}

section ul {
    line-height: 1.6rem;
    list-style-type: square;
}

section ul.task-list {
    padding-left: 0;
    list-style-type: none;
}

section ul.task-list li + li {
    margin-top: 1rem;
}

section ul li {
    margin-bottom: 1.2rem;
}


section p ion-icon,
section li ion-icon {
    transform: translateY(1px);
    margin-left: 0.25em;
}

section img {
    display: block;
    margin-top: 1rem;
    border: 1px solid var(--preformatted);
    max-width: 420px;
    width: 100%;
}

section img.small {
    max-width: 240px;
    margin-left: auto;
    margin-right: auto;
}

section h4 {
    text-align: left;
    margin-top: 2.1rem;
    background: var(--border);
    color: var(--bg);
    display: inline-block;
    padding: 0.2rem 1rem;
    border-radius: 0.6rem;
    margin-bottom: 0.7rem;
    font-size: 1rem;
}

section h4 + p {
    margin: 0;
    max-width: initial;
}

section h4 + div {
    padding: 0.1rem 1.5rem;
    border-radius: 0.6rem;
    background: var(--accent-bg);
}

section li blockquote {
    margin-top: 1rem;
}

section h5 {
    margin-bottom: 0;
    font-size: 1em;
    color: var(--border);
    font-weight: normal;
    border-bottom: 1px solid currentColor;
}

section .then {
    display: block;
    color: var(--border);
    font-size: 1.5rem;
    font-weight: bold;
    margin: 2.5rem 0 1rem;
}

.accordion__trigger {
    margin: 1.5rem auto 0;
    display: block;
    background: var(--bg);
    color: var(--text)
}

.accordion__trigger ion-icon {
    transform: translateY(2.5px);
}

.one-col {
    margin: 1rem 0;
}

.two-col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

@media screen and (max-width: 760px) {
    .two-col {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

.mod_tool__result {
    padding: 1rem;
    text-align: center;
    font-size: 1.2rem;
}

.mod_tool__result--success::before {
    content: '';
    display: block;
    height: 2px;
    width: 100%;
    background: var(--success);
    margin-bottom: 1rem;
}

.mod_tool__result--fail::before {
    content: '';
    display: block;
    height: 2px;
    width: 100%;
    background: var(--danger);
    margin-bottom: 1rem;
}

.mod_tool__result--success ion-icon {
    color: var(--success);
}

.mod_tool__result--fail ion-icon {
    color: var(--danger);
}

.float-right {
    float: right;
}

.float-left {
    float: left;
}

.hang {
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
    gap: 1rem;
    font-size: 0.7rem;
}

.hang a, .hang > div {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 0.25rem;
    text-decoration: none;
    cursor: pointer;
    color: var(--accent);
    border: 1px solid var(--accent);
    border-top: none;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    padding: 0.2rem 0.35rem 0.25rem;
}

.mascot-picker {
    display: flex;
    gap: 0.5rem;
}

.mascot-picker button {
    display: flex;
    justify-content: center;
    align-content: center;
    margin: 0;
    font-size: 0.8rem;
    height: 23px;
    align-items: flex-start;
    gap: 0.25rem;
    text-decoration: none;
    border: 1px solid var(--accent);
    border-top: none;
    border-radius: 0;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    padding: 0.2rem 0.35rem 0.25rem;
    background: none;
    color: var(--accent);
}

.mascot-picker button ion-icon {
    font-size: 1rem;
}

.mascot-picker em {
    display: flex;
    align-items: center;
}

pre code.hljs {
    background: transparent !important;
}

.accent-block > pre {
    padding: 0;
    border: 0;
    margin: 0;
}

.important {
    font-size: 1.5em;
    text-align: center;
    background: var(--accent);
    padding: 1rem;
    color: var(--bg) !important;
    text-shadow: none !important;

    strong {
        text-decoration: underline;
    }
}

.spacer {
    height: 30px;
}

.reports {
    & pre {
        overflow: scroll;
        width: auto;
        white-space: break-spaces;
        max-height: 300px;
    }
}

#report_button {
    display: inline-block;

    & form {
        display: inline-block;
    }

    & input[type=submit] {
        width: initial;
    }
}

.history, .history ul {
    list-style-type: none;
    padding: 0;
}

.history > li > .accent-block > ul > li {
    & h4 {
        margin-top: 0;
        font-size: 1.2rem;
    }

    & > ul {
        display: grid;
        grid-template-columns: repeat(3, max-content);
        justify-content: center;
        gap: 1ex 1rem;
        padding: 1.25rem 0 2rem 1rem;

        & > li {
            grid-column: 1 / -1;
        }
    }
}

.history__record {
    display: grid;
    grid-template-columns: subgrid;
    justify-items: center;
}

.split {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
}

.profile_selector {
    margin-top: 0 !important;
}

.profile_renamer {
    margin-bottom: 1.5rem !important;
}

.profile_selector,
.profile_renamer {
    position: relative;

    & > form {
        display: contents;

        & select,
        & input[type=submit],
        & input[type=text] {
            height: 42px;
        }

        & select {
            margin: 0;
            flex: 1 1 100%;
        }

        & input[type=submit],
        & input[type=text] {
            margin: 0;
        }

        & input[type=text] {
            flex: 1 1 auto;
        }

        & .secondary {
            background: var(--accent-bg);
            border-color: var(--accent);
            flex: 0 0 min-content;
        }
    }
}

main.full-width {
    grid-column: 1 / span 3;
    display: grid;
    grid-template-columns: subgrid;
}

.chyron {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--accent-bg);
    box-shadow: 0 0 15px rgba(43, 41, 37, 0.24);
    z-index: 999999;
    transform: translateY(100%);
    animation-name: chyronappear;
    animation-duration: 0.45s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-play-state: running;
}

.centred {
    text-align: center;
    margin: 1rem auto;
    display: block;
}

.WTN-logo {
    font-family: "Josefin Sans", sans-serif;
    font-weight: 700;
    font-style: italic;
    font-size: 1.5em;
    line-height: 23px;
    padding: 9px 9px 5px 9px;
    color: var(--bg);
    background: var(--accent);
}

@keyframes chyronappear {
    0% {
        transform: translateY(100%);
    }

    100% {
        transform: translateY(0);
    }
}

.video-bg {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 4;
    pointer-events: none;
    mix-blend-mode: hard-light;
    opacity: 0.3;
    object-fit: cover;
    height: 100dvh;
    width: 100dvw;
}

.master-row {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 1rem;
    margin: 0 -1rem;

    &:nth-child(odd) {
        background: var(--accent-bg);
    }
}