@import url("responsive.css");

:root {
    --wicked-black: #050307;
    --wicked-surface: #110b18;
    --wicked-surface-raised: #1b1028;
    --wicked-border: #4d2a6b;
    --wicked-purple: #b777e6;
    --wicked-bright: #d9a7ff;
    --wicked-pale: #f0e2ff;
    --wicked-muted: #ab97bc;
}

html,
body {
    min-height: 100%;
    background: radial-gradient(circle at 50% -20%, #241033 0, var(--wicked-black) 42%, #020103 100%) fixed;
    color: var(--wicked-pale) !important;
    font-family: Inter, "Segoe UI", Arial, sans-serif;
}

body {
    background-image:
        radial-gradient(circle at 50% -20%, rgba(121, 56, 167, .32), transparent 42%),
        linear-gradient(145deg, #070409, #020103 70%);
    scrollbar-color: var(--wicked-purple) transparent;
}

::-webkit-scrollbar-thumb {
    border: 0;
    border-radius: 999px;
    background: linear-gradient(var(--wicked-bright), #6c338d);
}

a,
a:link,
a:visited {
    color: var(--wicked-bright);
    text-decoration-color: rgba(217, 167, 255, .4);
    text-underline-offset: 3px;
}

a:hover,
a:focus-visible {
    color: #fff;
    text-decoration-color: var(--wicked-bright);
}

header {
    box-sizing: border-box;
    height: auto;
    min-height: 122px;
    padding: 5px 12px 15px;
    background: linear-gradient(180deg, rgba(28, 14, 40, .96), rgba(8, 4, 12, .92));
    border-bottom: 1px solid var(--wicked-border);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}

.contact {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 28px;
    min-height: 28px;
    padding: 4px 8px 8px;
    line-height: 1.35;
    position: relative;
    z-index: 2;
}

.contact .motd,
.contact .unreadmotd {
    box-sizing: border-box;
    width: auto;
    min-width: 120px;
    max-width: none;
    margin: 0;
    padding: 3px 10px;
    white-space: normal;
}

.title,
.pageheader,
.navhead,
.charhead,
.header {
    color: var(--wicked-bright) !important;
    text-shadow: 0 0 16px rgba(183, 119, 230, .35);
}

.navigation .navhead,
.rightPanel .charhead,
.charbuffhead {
    display: block;
    box-sizing: border-box;
    margin: 12px 0 7px;
    padding: 7px 9px;
    color: #f7edff !important;
    background: linear-gradient(90deg, rgba(126, 61, 169, .95), rgba(66, 28, 91, .72));
    border: 1px solid rgba(217, 167, 255, .58);
    border-left: 4px solid var(--wicked-bright);
    border-radius: 7px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .32), inset 0 1px rgba(255, 255, 255, .1);
    font-size: .92rem;
    font-weight: 800;
    letter-spacing: .055em;
    line-height: 1.2;
    text-align: left;
    text-shadow: 0 1px 4px #190923;
}

.banner {
    background-image: url("../images/wicked-realms-icon.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    filter: drop-shadow(0 0 8px rgba(183, 119, 230, .45));
}

main,
nav,
.rightPanel,
.characterCreation,
.discordContainer {
    box-sizing: border-box;
    background: linear-gradient(145deg, rgba(27, 16, 40, .94), rgba(9, 5, 13, .96));
    border: 1px solid var(--wicked-border);
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .36), inset 0 1px rgba(255, 255, 255, .025);
}

main {
    padding: 16px 18px 100px;
}

nav,
.rightPanel {
    margin-top: 3px;
    padding: 8px;
}

li.nav,
.navhelp {
    border-radius: 7px;
    padding: 5px 8px;
    transition: background-color .16s ease, color .16s ease, transform .16s ease;
}

li.nav:hover,
li.nav:focus-within {
    background: linear-gradient(90deg, rgba(126, 61, 169, .55), rgba(126, 61, 169, .12));
    color: #fff;
    transform: translateX(2px);
}

.charstat,
.chardata {
    border-bottom-color: rgba(183, 119, 230, .18) !important;
}

.chardata {
    color: var(--wicked-bright) !important;
}

input,
select,
textarea,
button,
.button {
    color: var(--wicked-pale) !important;
    background-color: #0c0711 !important;
    border: 1px solid var(--wicked-border) !important;
    border-radius: 7px;
    padding: 7px 10px;
    box-shadow: inset 0 1px rgba(255, 255, 255, .03);
}

button,
.button,
input[type="submit"] {
    cursor: pointer;
    background: linear-gradient(180deg, #713d91, #45225e) !important;
    font-weight: 700;
}

button:hover,
.button:hover,
input[type="submit"]:hover {
    border-color: var(--wicked-bright) !important;
    background: linear-gradient(180deg, #8e50b5, #562b74) !important;
}

input:focus,
select:focus,
textarea:focus,
button:focus-visible {
    outline: 2px solid rgba(217, 167, 255, .45);
    outline-offset: 2px;
}

table,
td,
th {
    border-color: rgba(183, 119, 230, .22) !important;
}

tr.trlight td,
tr.trdark td,
.commentaryRoll,
.commentaryRollModified {
    background-color: rgba(13, 7, 18, .88);
}

tr.trlight:hover td,
tr.trdark:hover td,
.commentaryRoll:hover,
.commentaryRollModified:hover {
    border-color: var(--wicked-purple) !important;
    background-color: rgba(44, 22, 61, .82);
}

.alerts {
    background: linear-gradient(90deg, #4d2668, #8e50b5, #4d2668);
    color: #fff;
}

.wicked-login-brand {
    display: flex;
    justify-content: center;
    margin: 4px auto 14px;
}

.wicked-logo {
    width: min(320px, 88vw);
    height: auto;
    filter: drop-shadow(0 0 18px rgba(183, 119, 230, .3));
}

.copyright {
    color: var(--wicked-muted);
}

@media only screen and (max-width: 1024px) {
    main {
        margin: 8px 5px 10px;
        padding: 14px 12px 72px;
    }

    nav,
    .rightPanel {
        margin-top: 6px;
        border-radius: 10px;
    }

    .contact {
        box-sizing: border-box;
        gap: 5px 10px;
        padding: 8px 6px 18px;
    }

    .contact .motd,
    .contact .unreadmotd {
        min-width: 29%;
        padding: 4px 5px;
    }
}

@media only screen and (max-width: 620px) {
    nav,
    .rightPanel {
        width: calc(50% - 8px);
        padding: 5px;
    }

    main {
        width: calc(100% - 8px);
        min-width: 0;
    }

    header {
        min-height: 132px;
        padding-right: 5px;
        padding-left: 5px;
    }

    .contact {
        font-size: .78rem;
    }

    /* Administrative and settings pages need the full phone viewport. */
    body:has(.mobile-admin-page) main {
        display: block;
        float: none;
        width: calc(100vw - 8px);
        min-width: 0;
        max-width: calc(100vw - 8px);
        margin: 8px 0 10px;
    }

    body:has(.mobile-admin-page) nav,
    body:has(.mobile-admin-page) .rightPanel {
        display: block;
        float: none;
        clear: both;
        width: calc(100vw - 8px);
        max-width: calc(100vw - 8px);
        margin: 7px 0;
    }

    body:has(.mobile-admin-page) .game-content {
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        overflow-wrap: normal;
        word-break: normal;
    }

    body:has(.mobile-admin-page) .game-content > table,
    .game-content form table {
        display: block;
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    li.nav,
    .charstat,
    .chardata {
        font-size: .92rem;
    }
}