@font-face {
    font-family: 'Wizard';
    src: url('./fonts/Wizard.woff2') format('woff2'),
        url('./fonts/Wizard.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
/* 
    The FontStruction “Wizard”
    (https://fontstruct.com/fontstructions/show/1506403) by “Omegaville” is
    licensed under a Creative Commons Attribution Share Alike license
    (http://creativecommons.org/licenses/by-sa/3.0/).
    
    This font was created by “Omegaville”.
    This font has a homepage where this archive and other versions may be found:
    https://fontstruct.com/fontstructions/show/1505246
*/

/* CSSRESET */
:where(:not(html,iframe,canvas,img,svg,video,audio,summary):not(svg *,symbol *)){all:unset;display:revert}*,::after,::before{box-sizing:border-box}a,button{cursor:revert}menu,ol,ul{list-style:none}img{max-inline-size:100%;max-block-size:100%}table{border-collapse:collapse}input,textarea{-webkit-user-select:auto}textarea{white-space:revert}meter{-webkit-appearance:revert;appearance:revert}:where(pre){all:revert}::placeholder{color:unset}::marker{content:initial}:where([hidden]){display:none}:where([contenteditable]:not([contenteditable=false])){-moz-user-modify:read-write;-webkit-user-modify:read-write;overflow-wrap:break-word;-webkit-line-break:after-white-space;-webkit-user-select:auto}:where([draggable=true]){-webkit-user-drag:element}:where(dialog:modal){all:revert}
/* END CSSRESET */
::selection { color: white; background: var(--ally); }
body {
    font-family: "Wizard";
    background: var(--background);
    color: var(--body);
    scroll-behavior: smooth;

    --enemy: crimson;
    --ally: teal;
    --body: #160024;
    --background: #fffef3;

    --life: limegreen;
    --earth: orange;
    --wind: navajowhite;
    --ice: cyan;
    --fire: red;
    --lightning: gold;
    --poison: darkseagreen;
}

.c-enemy        { color: var(--enemy) }
.c-ally         { color: var(--ally) }
.c-hp           { color: var(--life) }
.c-earth        { color: var(--earth) }
.c-wind         { color: var(--wind) }
.c-ice          { color: var(--ice) }
.c-fire         { color: var(--fire) }
.c-lightning    { color: var(--lightning) }
.c-poison       { color: var(--poison) }

#builder {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    width: 50vw;
    height: 100vh;
    overflow-y: auto;
    border-right: 1px solid var(--body);
}

#builder h2 {
    width: 100%;
}

#builder section {
    padding: 1em;
}

#builder section:not(.split) > * ~ * {
    margin-top: 1em;
    border: 1px solid var(--body);
    padding: 0.5em;
}

#builder section.split {
    display: flex;
    flex-wrap: wrap;
}

#builder .half {
    flex-basis: 40%;
    border: 1px solid;
    flex-grow: 1;
    display: flex;
    flex-direction: column; 
    justify-content: center;
    padding: 1em;
    margin-top: 1em;
}

#builder .half ~ .half {
    border-left: 0px;
    padding: 0;
}

.grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    border: 2px outset var(--body);
}

.item, .emptyslot {
    cursor: pointer;
    border: 2px dashed var(--body);
    border-radius: 100%;
}

.emptyslot {
    pointer-events: none;
    opacity: 0.25;
}

.emptynotice {
    position: absolute;
    background: var(--background);
    text-align: center;
    padding: 0.25em;
}

.grid .item, .grid .emptyslot {
    position: relative;
    height: 0;
    width: 80px;
    padding-top: 14%;
    flex-basis: 14%;
    overflow: hidden;
    margin: 1%;
}

.grid .item.selected {
    border: 2px solid var(--ally)
}

.cauldron-slot .item {
    width: 100%;
    height: 100%;
}

.cauldron-slot .item.selected {
    border: 2px solid var(--enemy);
}

.cauldron-slot:empty {
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.cauldron-slot:empty::after {
    content: "Clay\A(empty)";
    text-align: center;
    font-size: 11px;
    white-space: pre;
    font-family: monospace;
}

.cauldron-slot.soul:empty::after {
    content: "Soulless\A(empty)";
}

#cauldron .item-graphic::before {
    content: var(--prefix);
    width: 100%;
}

.item[amt] .item-graphic {
    padding-bottom: 1em;
}

.item[amt]::after {
    content: "x" attr(amt);
    position: absolute;
    bottom: 0;
    text-align: center;
    width: 100%;
    background: var(--body);
    color: var(--background);
    padding: 0.1em;
    font-size: 8px;
}

.item[amt="0"] {
    opacity: 0.25;
    pointer-events: none;
}

.item-graphic {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    padding: 0.33em;
    border-radius: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 8px;
    pointer-events: none;
    background: radial-gradient(circle, transparent 25%, var(--element) 100%);
}

.critter-graphic {
    --soul_el: transparent;
    --head_el: transparent;
    --body_el: transparent;
    --left_arm_el: transparent;
    --right_arm_el: transparent;
    --left_leg_el: transparent;
    --right_leg_el: transparent;
    
    background-image: 
        radial-gradient(circle, rgba(0,0,0,0) 50%, var(--soul_el) 100%), /* soul */
        /* left arm */ linear-gradient(145deg, var(--left_arm_el) 0%, rgba(0,0,0,0) 50%),
        /* right arm */ linear-gradient(235deg, var(--right_arm_el) 0%, rgba(0,0,0,0) 50%),
        /* left leg */ linear-gradient(45deg, var(--left_leg_el) 0%, rgba(0,0,0,0) 50%),
        /* right leg */ linear-gradient(315deg, var(--right_leg_el) 0%, rgba(0,0,0,0) 50%),
        linear-gradient(180deg, var(--head_el) 0%, var(--body_el) 100%) /* head & body */
    ;

    background-size: auto;
    background-repeat: no-repeat;
    background-position: center, top, bottom, center;
}

.buttons {
    display: flex;
    gap: 0.25em;
    flex-wrap: wrap; 
}
        
button {
    border: 1px solid;
    padding: 0.25em;
    cursor: pointer;
}

button:hover, button:active {
    background: var(--body);
    color: var(--background);
}

button.disabled, .buttons.disabled button {
    opacity: 0.25;
    pointer-events: none;
}

.buttons .movers {
    margin-left: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

#cauldron .slots {
    height: 17vw;
    width: 100%;
    padding-top: 2vw;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

#cauldron .slots > * {
    position: absolute;
    width: 5vw;
    height: 5vw;
    border-radius: 100%;
}

#cauldron .slots > *:empty {
    border: 2px dotted var(--body);
}

.slots .head { transform: translateY(-125%); --prefix: "Head of" }
.slots .body { transform: translateY(-20%); --prefix: "Body of" }
.slots .left.leg { transform: translate(-60%, 100%); --prefix: "Leg of" }
.slots .right.leg { transform: translate(60%, 100%); --prefix: "Leg of" }
.slots .left.arm { transform: translate(-110%, -25%); --prefix: "Arm of" }
.slots .right.arm { transform: translate(110%, -25%); --prefix: "Arm of" }
.slots .soul {
    top: 0;
    right: 0;
    --prefix: "Soul of"
}

/* stat display */
.stats {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background: var(--body);
    color: var(--background);
}

.stats:empty {
    display: none;
}

.stats > .name {
    width: 100%;
    text-align: center;
    font-size: 16px;
    margin-bottom: 1em;
}

.stats > .name span {
    display: block;
    font-size: 8px;
}

.stats > .name ~ * {
    flex-basis: 50%;
}

.breakdown {
    font-size: 10px;
    padding: 1em;
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
}

.breakdown > * {
    display: flex;
    flex-direction: column;
    height: 100%;
    flex-basis: 50%;
}

.stats .specials::before {
    content: "Special";
}

.stats .passives::before {
    content: "Passives";
}

.breakdown span {
    margin-bottom: 1em;
    font-size: 14px;
    position: relative;
}

.misc > div {
    padding: 0.25em;
}

.misc > div > span {
    display: block;
    padding: 0.5em;
    border: 1px solid;
    margin: 0.25em;
    font-size: 12px;
    font-family: monospace;
    line-height: 1.5em;
}

.stats span .name {
    color: var(--background);
    font-family: "wizard";
}

.misc .specials .name {
    color: var(--lightning);
}

.misc .passives .name {
    color: var(--poison);
}

.stats span[stat]::after {
    font-size: 12px;
    font-family: monospace;
    margin: 0.25em;
    margin-left: 1em;
    white-space: pre-wrap;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--body);
    padding: 1em;
    border: 1px solid;
    transform: translateY(-100%);
    display: none;
    pointer-events: none;
}

.stats span[stat]:hover::after {
    display: block;
}

.stats span[stat="hp"] { color: var(--life); }
.stats span[stat="eva"] { color: var(--poison); }
.stats span[stat="res"] { color: var(--earth); }
.stats span[stat="acc"] { color: var(--ice); }
.stats span[stat="pow"] { color: var(--fire); }
.stats span[stat="crt"] { color: var(--lightning); }
.stats span[stat="spd"] { color: var(--wind); }

.stats span[stat="hp"]::after { content: "Toughness\A Min: 1"; }
.stats span[stat="eva"]::after { content: "Dodge chance\A against ACC\A Max: 90%"; }
.stats span[stat="res"]::after { content: "Damage Reduction\A Max: 90%"; }
.stats span[stat="acc"]::after { content: "Chance to Hit\A against EVA\A Min: 10%"; }
.stats span[stat="pow"]::after { content: "Attack Strength\A Min: 0.1"; }
.stats span[stat="crt"]::after { content: "Crit Chance\A (Double Damage)\A Max: 90%"; }
.stats span[stat="spd"]::after { content: "Attack Interval\A 2 = once every 2 seconds \ASmaller = better!\A Min: 0.1"; }


.makeup {
    position: absolute;
    top: 0.5em;
    left: 0.5em;
    width: 3em;
    height: 3em;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.stats .makeup.critter-graphic {
    --soul_el: black;
    --head_el: black;
    --body_el: black;
    --left_arm_el: black;
    --right_arm_el: black;
    --left_leg_el: black;
    --right_leg_el: black;
}

.makeup > * {
    position: absolute;
    width: 20%;
    height: 20%;
    border-radius: 100%;
    border: 1px solid #0000006b;
    background: black;
}

.makeup .soul {
    background: var(--soul_el);
    transform: translate(120%, -120%);
}

.makeup .body {
    background: var(--body_el);
}

.makeup .head {
    background: var(--head_el);
    transform: translateY(-100%);
}

.makeup .left.arm {
    transform: translateX(-100%);
    background: var(--left_arm_el);
}

.makeup .right.arm {
    transform: translateX(100%);
    background: var(--right_arm_el);
}

.makeup .left.leg {
    transform: translate(-50%, 100%);
    background: var(--left_leg_el);
}

.makeup .right.leg {
    transform: translate(50%, 100%);
    background: var(--right_leg_el);
}

#cauldron .stats {
    padding: 1em;
    align-items: stretch;
    flex-direction: column;
    flex-wrap: nowrap;
}

#cauldron .stats .name ~ * {
    flex-basis: initial;
}

#cauldron .buttons {
    padding: 1em;
}

#cauldron button {
    width: 100%;
    text-align: center;
    margin: 0.25em 0;
}


/* state-based styles */
.in_fight #builder, .readied #builder {
    opacity: 0.25;
    pointer-events: none;
}

.part_selected .cauldron-slot:empty, 
.cauldron_selected #cauldron .cauldron-slot:empty {
    box-shadow: 2px 2px 5px var(--ally);
    cursor: pointer;
}

.part_selected .cauldron-slot,
.cauldron_selected #inventory .item,
.cauldron_selected #cauldron .cauldron-slot {
    box-shadow: 2px 2px 2px var(--enemy);
    cursor: pointer;
}

.requires-part, .requires-critter-selection, 
.requires-cauldronuse, .requires-cauldron {
    opacity: 0.25;
    pointer-events: none;
}

.part_selected .requires-part, 
.critter_selected .requires-critter-selection, 
.cauldron_selected .requires-cauldron, 
.valid_cauldron .requires-cauldronuse {
    opacity: 1;
    pointer-events: initial;
}

.requires-critter-not-first, 
.requires-critter-not-last {
    opacity: 0.25;
    pointer-events: none;
}

.critter-not-first .requires-critter-not-first, 
.critter-not-last .requires-critter-not-last {
    opacity: 1;
    pointer-events: initial;
}

/* FIGHT PANEL */
#fight {
    position: fixed;
    top: 0;
    left: 50vw;
    width: 50vw;
    height: calc(100% - 7em);
    padding: 1em;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    overflow-y: auto;
}

.teams {
    display: flex;
    flex-direction: column;
    padding: 1em 0;
}

.team {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    border: 1px solid;
    padding: 1em 0;
    margin: 0.5em 0;
}

.is_enemy .team#enemy {
    order: 2;
}

.team#enemy {
    --teamColor: var(--enemy);
    border-color: var(--enemy);
}

.team#player {
    --teamColor: var(--ally);
    border-color: var(--ally);
}

.team .member {
    padding: 0.5em;
    margin: 0 1em 1em;
    cursor: pointer;
    font-size: 10px;
    text-align: center;
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 1;
    border-radius: 100%;
    height: 6em;
    width: 6em;
    border: 3px solid transparent;
}

.team .member.dead {
    opacity: 0.5;
    order: 2;
    font-size: 6px;
}

.team .member .name {
    position: absolute;
    top: 0;
    transform: translateY(-75%);
    text-shadow: 1px 1px var(--teamColor);
    padding: 0.25em;
    margin: 0.25em;
    white-space: nowrap;
    text-align: center;
    background: linear-gradient(90deg, transparent 0%, var(--background) 50%, transparent 100%);
    letter-spacing: 1px;
    font-size: 8px;
}

.team .member.selected, .team .member:hover {
    border: 3px solid var(--body)
}

.member .makeup {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
}

.member .hp {
    position: absolute;
    bottom: 0;
    transform: translateY(75%);
}


#fight .stats, #fight .log, #fight .teams {
    width: 95%;
    max-height: calc(33vh - 2em);
    overflow-y: auto;
}

.log {
    display: flex;
    flex-direction: column-reverse;
    font-size: 0.75em;
    border: 1px solid;
    padding: 0.5em;
    margin: 0.5em;
}

.log .entry {
    display: block;
    margin-top: 0.5em;
    line-height: 1.5em;
}

.entry.status {
    font-family: monospace;
    font-size: 1.25em;
    margin-left: 2em;
    margin-top: 0;
}

.entry.attack, .entry.defeat {
    margin: 1em 0;
}

.entry.defeat {
    font-size: 1.5em;
    font-weight: 600;
}

.entry.big {
    font-size: 1.25em;
}

.entry > span[team] {
    text-decoration: underline;
    font-style: italic;
}

.entry > span[team="enemy"] {
    color: var(--enemy);
}

.entry > span[team="player"] {
    color: var(--ally);
}

.entry.prize {
    font-weight: 400;
    text-shadow: 1px 1px var(--lightning);
}

#fight .stats {
    padding: 1em;
}

#fight .stats .misc {
    max-height: 20vh;
    overflow-y: auto;
    flex-grow: 1;
    border: 1px solid;
    border-right: 5px dashed;
    padding: 0.25em;
}

/* controls */
#options {
    position: fixed;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 2;
    bottom: 0;
    right: 0;
    width: 50vw;
    height: 7em;
    padding: 1em;
    border-top: 1px solid var(--body);
    border-bottom: 1px solid var(--body);
    text-align: center;
}

#autoFight[autofight="true"]::after {
    content: " ON";
    color: var(--poison);
}

#autoFight[autofight="false"]::after {
    content: " OFF";
    color: var(--fire);
}

.notice  {
    display: block;
    margin: 0.5em;
    font-family: monospace
}

.totalfights > * {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding-top: 1em;
}

.totalfights > *::after {
    content: "";
    position: absolute;
    transform: translateY(-100%)
}

.totalfights .fights::after { content: "T"}
.totalfights .wins::after { content: "W"}
.totalfights .losses::after { content: "L"}

#toggleReady[ready="false"] { box-shadow: 3px 3px var(--fire); }
#toggleReady[ready="false"]::after { content: "?"; }
#toggleReady[ready="true"] { box-shadow: -3px -3px var(--life); }
#toggleReady[ready="true"]::after { content: "!!"; }

.expiry {
    position: absolute;
    top: 0;
    transform: translateY(-150%);
    font-size: 8px;
    opacity: 0.5;
    pointer-events: none;
}

.expiry.close {
    transform: translateY(-100%);
    font-size: 16px;
}

/* state-based fight styles */
.in_fight #startfight, 
.in_fight #toggleReady,
body:not(.has_critters) #options button, 
body:not(.in_fight) #forfeitfight {
    opacity: 0.25;
    pointer-events: none;
}

.has_critters .critter-notice {
    display: none;
}

.needcritters.notice { display: none; }
.has_critters .needcritters.notice { display: block; }

/* instructions */
#instructions.hide h1 ~ * {
    display: none;
}

#instructions {
    background: var(--body);
    color: var(--background);
    font-size: 12px;
    line-height: 1.5em;
    z-index: 10;
}

#instructions h1 {
    cursor: pointer;
    font-size: 16px;
}

.question {
    display: block;
    margin: 1em;
    padding: 1em;
    border: 1px solid;
    text-align: justify;
    letter-spacing: 1px;
}

.question ::selection {
    background: transparent;
    color: inherit
}

.question:not([open]):hover {
    background-color: var(--background);
    color: var(--body)
}

.question > summary {
    font-size: 16px;
    line-height: 2em;
    cursor: pointer
}

.question > summary {
    text-decoration: underline;
}

.elementname {
    font-family: wizard;
    font-size: 0.5em;
}

.question ul {
    list-style: disclosure-closed;
    padding-left: 1em;
}

.question div > * ~ *:not(ul), .question ul li {
    margin-top: 1em;
}

.question div > * {
    font-size: 16px;
    font-family: monospace;
}

/* dark time */
.darktoggle {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 5000;
}

body.darkmode {
    --body: #d8d8d8;
    --background: #181818;
    text-shadow: 1px 1px black;
}

.darkmode .stats {
    color: inherit;
    background: var(--background);
}

.darkmode #fight .stats {
    border: 1px solid;
}

.darkmode .stats .breakdown span .name {
    color: inherit;
}

.darkmode .stats span[stat]::after {
    background: var(--background);
}

.darkmode .team .member .name {
    background: transparent;
}

.darkmode #instructions {
    color: #529600;
    background: black;
}

.darkmode .member .hp {
    color: white;
}

/* MOBILE JANK */
@media only screen and (max-width: 1100px) {
    #builder #cauldron {
        display: block;
        border: 1px solid;
    }

    #cauldron .slots > * {
        width: 10vw;
        height: 10vw;
    }

    #cauldron .slots {
        height: 32vw;
    }

    .team .member {
        font-size: 8px;
    }

    .team .member.dead {
        opacity: 0.75;
        order: 2;
        font-size: 6px;
    }

    .grid .item, .grid .emptyslot {
        padding-top: 20%;
        flex-basis: 20%;
    }

    .stats {
        padding: 1em;
        flex-direction: column;
        flex-wrap: nowrap;
    }

    #fight .stats {
        max-height: unset;
        height: unset;
    }
}

@media only screen and (max-width: 800px) {
    body {
        padding-bottom: 7em;
    }

    .darktoggle {
        top: 4rem;
        right: 1em;
        font-family: monospace;
    }

    .question {
        text-align: left;
    }

    .question > span {
        text-decoration: none;
    }

    #builder {
        position: relative;
        width: 100%;
        height: auto;
        border: 0;
    }

    .movers {
        margin: auto;
    }

    #options {
        width: 100%;
        background: var(--background);
    }

    #options button {
        font-family: monospace;
        font-size: 12px;
    }

    .needcritters.notice {
        font-size: 10px;
    }

    #builder .half {
        border: 1px solid;
    }

    .grid .item, .grid .emptyslot {
        padding-top: 25%;
        flex-basis: 25%;
    }

    #cauldron .slots {
        height: 75vw;
    }

    #cauldron .slots > * {
        width: 20vw;
        height: 20vw;
    }

    #fight {
        position: relative;
        width: 100%;
        top: unset;
        left: unset;
        border-top: 10px dashed var(--fire);
    }

    .stats {
        align-items: stretch;
    }

    .stats > .name ~ * {
        flex-basis: unset;
    }

    .breakdown > * {
        justify-content: space-between;
    }

    #fight .stats .misc {
        max-height: unset;
    }

    .entry.status {
        line-height: 2em;
    }

    #fight .log, #fight .teams {
        max-height: 50vh;
    }

    #critters button {
        width: 100%;
        padding: 0.5em;
        text-align: center;
        margin: 0.25em 0;
    }
}

/* WELCOME SCREEN */
.fullnotice {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: var(--background);
    color: var(--body);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1em;
}

.loading #welcome::after {
    content: "LOADING 1 SEC ☺";
    position: absolute;
    background: var(--background);
    padding: 8em;
    border: 1px solid;
}

.fullnotice aside {
    max-width: 100%;
    width: 400px;
    text-align: center;
    display: flex;
    flex-direction: column;
    padding: 1em;
    background: var(--background);
    border-radius: 20px;
}

.fullnotice h1 {
    font-size: 2em;
}

.fullnotice .credit {
    margin: 0;
    font-style: italic;
}

.fullnotice .credit a {
    color: var(--ally);
}  

.fullnotice .buttons {
    display: flex;
    flex-direction: column;
}

.fullnotice .buttons * ~ * {
    margin-top: 1em;
}

.fullnotice .buttons button {
    padding: 1em;
}

.fullnotice .buttons span {
    font-family: monospace;
}

.fullnotice #loadGame {
    opacity: 0.5;
    pointer-events: none;
}

.has-save .fullnotice #loadGame {
    opacity: 1;
    pointer-events: initial;
}

.fullnotice .critter-graphic {
    position: absolute;
    z-index: -1;
    width: 90vmax;
    height: 100vmax;
    border-radius: 100%;
    animation: SPIN 30s linear infinite;
}

.fullnotice input {
    border: 1px solid;
    padding: 0.5em;
}

.fullnotice.hide {
    display: none;
}

.fullnotice.show {
    display: flex;
}

#multiwait {
    z-index: 101;
}

body:not(.server_available) .multienter > * {
    display: none;
}

body:not(.server_available) .multienter::after {
    content: "The multiplayer server is currently not accepting new games.";
    font-size: 8px;
}  

@keyframes SPIN {
    0% { transform: rotate(0deg) }
    100% { transform: rotate(360deg) }
}