:root{
    --relative-size-ratio:1.25;
    --relative-size-fraction:calc(1 / var(--relative-size-ratio));
    --edge-default:#9c9c9c;
    --edge-default-medium:#808080;
    --edge-default-light:#aaa;
    --fg-default:#000000;
    --fg-default-passive:rgb(51, 53, 94);
    --fg-default-active:rgb(94, 51, 51);
    --bg-default:#e0e0e0;
    --bg-default-bad:#daa;
    --bg-default-light:#f0f0f0;
    --bg-default-header:#ebddb6;
    --bg-default-cap:#bbbbff;
    --bg-default-alternate-1:var(--bg-default);
    --bg-default-alternate-2:#d0d0d0;
    --bg-default-alternate-3:#909090;
    --edge-wiki:#c8aa6e;
    --fg-wiki:#ebdda6;
    --fg-wiki-link:#c8aa6e;
    --bg-wiki:#061f36;
    --fg-darkmode:#fff;
    --fg-darkmode-low:#999;
    --fg-darkmode-link:#c8aa6e;
    --fg-darkmode-passive:hsl(240 30% 60%);
    --fg-darkmode-passive-name:hsl(240 25% 68%);
    --fg-darkmode-active:hsl(0 30% 60%);
    --fg-darkmode-active-name:hsl(0 32% 65%);
    --bg-darkmode:#061828; /* hsl(200 30 10) */
    --bg-darkmode-darker:hsl(200 25% 9%);
    --bg-darkmode-bad:#522;
    --bg-darkmode-light:#162838;
    --bg-darkmode-lightest:#1d3040;
    --bg-darkmode-header:#102040;
    --bg-darkmode-alt1:#102028;
    --bg-darkmode-alt2:#202830;
    --bg-darkmode-alt3:#283038;
    --edge-darkmode:rgb(163 120 60);
    --edge-darkmode-medium:rgb(123 80 20);
    --edge-darkmode-light:rgb(203 160 100);
    --edge-darkmode-select:hsl(200 30% 30%);
    --fg-current:var(--fg-darkmode);
    --fg-current-low:var(--fg-darkmode-low);
    --fg-current-link:var(--fg-darkmode-link);
    --fg-current-passive:var(--fg-darkmode-passive);
    --fg-current-passive-name:var(--fg-darkmode-passive-name);
    --fg-current-active:var(--fg-darkmode-active);
    --fg-current-active-name:var(--fg-darkmode-active-name);
    --bg-current:var(--bg-darkmode);
    --bg-current-darker:var(--bg-darkmode-darker);
    --bg-current-bad:var(--bg-darkmode-bad);
    --bg-current-light:var(--bg-darkmode-light);
    --bg-current-lightest:var(--bg-darkmode-lightest);
    --bg-current-header:var(--bg-darkmode-header);
    --bg-current-cap:var(--bg-darkmode-cap);
    --bg-current-alternate-1:var(--bg-darkmode-alt1);
    --bg-current-alternate-2:var(--bg-darkmode-alt2);
    --bg-current-alternate-3:var(--bg-darkmode-alt3);
    --edge-current:var(--edge-darkmode);
    --edge-current-medium:var(--edge-darkmode-medium);
    --edge-current-light:var(--edge-darkmode-light);
    --edge-current-select:var(--edge-darkmode-select);
}
html{
    padding:0px;
    margin: 5px 0px 0px 5px;
    height: calc(100svh - 10px);
    width: calc(100svw - 10px);
    overscroll-behavior-y: none;
}
body{
    background-color: var(--bg-current);
    color: var(--fg-current);
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
    overflow:hidden;
    font-family:sans-serif;
    text-size-adjust: none;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    overscroll-behavior-y: none;
    /* touch-action: pan-x pan-y; */
}
button{
    background-color: var(--bg-current-lightest);
    color:var(--fg-current-link);
    cursor: pointer;
}
td,th{
    align-content: start;
}
label{
    color: var(--fg-current-low);
    font-size: calc(1em * var(--relative-size-fraction));
}
select{
    background-color: var(--bg-current);
    color: var(--fg-current-link);
    border-color: var(--edge-current);
}
a{
    color:#c8aa6e;
    color: var(--fg-current-link);
}
caption{
    caption-side: bottom;
}
.border-box{
    box-sizing: border-box;
}
.absolute{
    position: absolute;
}
.relative{
    position: relative;
}
.item-table{
    width: 100%;
    margin-inline: auto;
    margin-block: 2px;
    table-layout: fixed;
}
.temp-icon{
    /*background-color:#000;*/
    border-radius:2px;
    padding:1px;
    height:1em;
    box-sizing: border-box;
}
.icon-main{
    width:64px;
    height:64px;
    /* margin-inline:auto; */
    /* display:block; */
}
.pixelated{
    image-rendering: pixelated;
}
.i-block{
    display:inline-block;
}
.block{
    display:block;
}
.flex-row{
    display:flex;
    flex-direction: row;
    align-items: stretch;
}
.flex-col{
    display:flex;
    flex-direction: column;
    align-items: stretch;
}
.row-cell{
    padding-inline: 4px;
    vertical-align: middle;
}
.v-align-top{
    vertical-align:top;
}
.builder{
    /* display:grid; */
    grid-template-columns: auto auto auto;
}
.builder-item{
    /* width: fit-content; */
    display: inline-block;
    /* --text-width:20ch; */
    margin-right:1ch;
    /* margin-inline: calc(max(0.5ch,(20ch - var(--text-width)) / 2)); */
    /* width: max-content; */
    /* border: 1px solid var(--bg-current); */
    text-align: center;
    align-content: center;
}
.first-cell{
    width:96px;
}
.fill-height{
    height:100%;
}
.fill-width{
    width:100%;
}
.i-border{
    border-inline-style: solid;
}
.b-border{
    border-block-style: solid;
}
.all-border{
    border-style: solid;
}
.edge-color-default{
    border-color: var(--edge-current);
}
.edge-color-medium{
    border-color: var(--edge-current-medium);
}
.edge-thin{
    border-width: 1px;
}
.edge-wide{
    border-width: 2px;
}
.edge-cell{
    border-style: solid;
    border-width: 1px;
    border-color: var(--edge-current);
}
.edge-below{
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: var(--edge-current-light);
}
.edge-title{
    border-block-style: dashed;
    border-block-width: 1px;
    border-block-color: #fff4;
    margin-block: 4px;
    background-color: var(--bg-current);
}
.sticky-top{
    position:sticky;
    top:0px;
}
.anchor-top-right{
    position: absolute;
    right: 0px;
    top:0px;
}
.bg-header{
    background-color:var(--bg-current-header);
}
.bg-cap{
    background-color: var(--bg-current-cap);
}
.bg-alternate{
    background-color: var(--bg-current-alternate-1);
}
.bg-alternate:nth-child(even){
    background-color: var(--bg-current-alternate-2);
}
.collapse-border{
    border-collapse: collapse;
}
.no-border-space{
    border-spacing: 0;
}
.larger{
    font-size:calc(1em * var(--relative-size-ratio));
}
.root-size{
    font-size: 1rem;
}
.smaller{
    font-size:calc(1em * var(--relative-size-fraction));
}
.smaller-2{
    font-size:calc(1em * var(--relative-size-fraction) * var(--relative-size-fraction))
}
.smaller-3{
    font-size:calc(1em * var(--relative-size-fraction) * var(--relative-size-fraction) * var(--relative-size-fraction))
}
.grow-1{
    flex:1;
}
.fg-default{
    color:var(--fg-current);
}
.fg-low{
    color: var(--fg-current-low);
}
.fg-stat{
    color:var(--fg-current);
}
.fg-gold{
    /* color:#bf9410; */
    color:#a37a00;
}
.fg-build-from{
    color:hsl(0 8% 65%);
}
.fg-build-from:nth-child(even){
    color:hsl(12 15% 55%);
}
.fg-build-to{
    color:hsl(120 8% 65%);
}
.fg-build-to:nth-child(even){
    color:hsl(90 15% 55%);
}
.fg-link{
    color:var(--fg-current-link);
}
.fg-efficiency{
    color:hsl(120 50% 40%);
}
.fg-aspect-passive{
    color:var(--fg-current-passive);
}
.fg-aspect-active{
    color:var(--fg-current-active);
}
.fg-aspect-passive [data-aspect-name]{
    color:var(--fg-current-passive-name);
}
.fg-aspect-active [data-aspect-name]{
    color:var(--fg-current-active-name);
}
[data-aspect-name]{
    font-weight: bold;
}
.fg-warn{
    color:#F00;
}
.fade{
    opacity:.5;
}
.bold{
    font-weight:bold;
}
.italic{
    font-style: italic;
}
.z-one{
    z-index: 1;
}
.scroll{
    overflow: scroll;
}
.text-align-center{
    text-align: center;
}
.scroll-auto{
    overflow: auto;
}
.line-height-more{
    line-height: 1.5;
}
.pad{
    padding: 2px;
}
.space{
    margin:2px;
}
.dry-error{
    /*clamp min(max(value, low), high)*/
    height: clamp(2lh, 15svh, 8lh);
    overflow-y: scroll;
    border-bottom: solid 1px var(--edge-current);
}
.dot-underline{
    text-decoration-line: underline;
    text-decoration-color: var(--edge-current);
    text-decoration-style: dotted;
    cursor: pointer;
}
.text-decoration-warn{
    text-decoration-line: underline;
    text-decoration-color: rgb(139, 84, 64);
    text-decoration-style:dotted;
    text-decoration-thickness: 1px;
    cursor: pointer;
}
.text-decoration-canceled{
    text-decoration-line:line-through;
    text-decoration-color: rgb(255, 68, 0);
    text-decoration-style:solid;
    text-decoration-thickness: 2px;
}
.font-monospace{
    font-family: monospace;
}
.white-space-pre-wrap{
    white-space: pre-wrap;
}
.all-controls{
    --controls-item-space: 0.3em;
    --site-header-width:30ch;
    --all-controls-border-width:1px;
    padding-top: var(--controls-item-space);
    border-width:var(--all-controls-border-width);
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}
.control-item{
    display: inline-block;
    box-sizing: border-box;
    padding-inline: var(--controls-item-space);
    margin-bottom: var(--controls-item-space);
    vertical-align: text-top;
}
.program-panel-container{
    max-width: max-content;
    width:calc(100% - var(--site-header-width) - var(--all-controls-border-width) * 2);
}
.site-header{
    width: var(--site-header-width);
}
.control-topside{
    width: 100%;
    text-align: center;
}
@media(aspect-ratio <= 1)
{
    .site-header{
        display:block;
        margin-inline:auto;
    }
    .program-panel-container{
        display: block;
        width:auto;
    }
}
.stamp{
    font-variant: small-caps;
    font-family: serif;
}
.program-panel{
    display:flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    text-align: center;
    background-color: var(--bg-current-darker);
    border: 1px solid var(--edge-current-select);
}
.panel-group{
    display:inline-block;
    vertical-align: top;
    padding:var(--controls-item-space);
}
.program-panel>*{
}
.hintText{
    /* max-width: fit-content; */
    /* width:15ch; */
}
/* @media (aspect-ratio > 1)
{
    .hintText{
        width:15ch;
    }
} */
.custom-select{
    --item-margin:2px;
    --item-height:1.3lh;
    --item-vert:calc(var(--item-height) + var(--item-margin) * 2);
    --max-items-y:6;
    --min-items-y:1;
    --desired-max-height:20svh;
    display: inline-flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    min-height: calc(var(--item-vert) * var(--min-items-y));
    max-height:calc(min(var(--desired-max-height), var(--item-vert) * var(--max-items-y)));
    border:1px solid var(--edge-current-select);
    overflow-x: auto;
    cursor: default;
    box-sizing: border-box;
    padding-inline: 0.25ch;
    background-color: var(--bg-current-darker);
}
.stat-select{
    --min-items-y:2;
}
@media (aspect-ratio > 1)
{
    .stat-select{
        /* --desired-max-height:17svh; */
    }
}
.tag-select{
    --desired-max-height:10svh;
}
.my-select{
    font-size: smaller;
    /* width: max-content; */
    max-width: 100%;
    overflow-y:hidden;
}
.select-container{
    display:block;
}
.custom-option{
    /* width:100px; */
    /* height:100px; */
    display:inline-flex;
    border:1px solid var(--edge-current);
    box-sizing:border-box;
    margin:var(--item-margin);
    height:var(--item-height);
    background-color: var(--bg-current-alternate-1);
    position:relative;
    /* height:calc(100% / 7); */
}
.custom-option[data-custom-selected=true]{
    background-color: var(--bg-current-alternate-3);
    border-color: var(--edge-current-light);
    border-width: 2px;
    border-style: ridge;
}
.custom-option[data-custom-incompatible=true]{
    background-color: var(--bg-current-bad);
}
[data-option-button]{
}
.clamp-text{
    overflow:hidden;
    text-overflow:ellipsis;
    width:min-content;
    /*white-space:nowrap;*/
}
/*hidden may require high specificity*/
.hidden{
    display:none;
}
/*NOTE: flex bug workaround #14, column wrap does not shrink-to-fit contents properly on some devices (safari).  https://github.com/philipwalton/flexbugs*/
.column-wrap-bug-fix{
    flex-flow: row wrap;
    writing-mode: vertical-lr;
}
:where(.column-wrap-bug-fix>*){
    writing-mode: initial;
}