/* universal elements 
   (well, almost) */

body {
    background-color: teal;
    font-size: 100%;
}

.main {
    max-width: 95%;
    width: max(80%, 800px);
    margin: auto;
    text-align: center;
    font-family: "Verdana", "Georgia", sans-serif;
    
    flex-direction: column;
}

img.cap {
    max-width: min(25%, 100px);
    margin: 5px;
}


/* reusables 
   (elements, then classes) */

button {
    margin: 1px;
    margin-top: 4px;
    border-radius: 8px;
}

input {
    margin: 1px;
}

summary, .sortable {
    user-select: none;
}

table {
    border-collapse: collapse;
}

th {
    padding: 5px;
    
    font-size: 1.5em;
    
    width: min-content;
}

td {
    padding: 3px;
}

th, td { 
    border-left: 1px solid;
    border-right: 1px solid;
}

th:first-child, td:first-child {
    border-left: 0px;
}

th:last-child, td:last-child {
    border-right: 0px;
}

img.splash {
    max-width: min(70%, 500px);
    height: auto;
    margin: min(30px, 5%);
}

button.big {
    padding: 6px;
    border-radius: 8px;
}

button.medium {
    font-size: 1.2em;
}

button.small {
    font-size: 0.8em;
    border-radius: 5px;
}

.toplevel, button.big {
    margin: 5px;
    padding: 10px;
    
    width: max-content;
    max-width: 100%;
    
    border-width: 3px;
    border-radius: 10px;
}

.toplevel {
    border-style: solid;
}

.midlevel {
    margin: 2px;
    padding: 5px;
    
    max-width: max-content;
    
    border-style: solid;
    border-radius: 5px;
    border-width: 2px;
}

.lowlevel {
    margin: 2px;
    padding: 1px;
    border-style: none;
}

.big {
    font-size: 1.8em;
}

.title {
    margin: 5px;
}

.nowrap {
    white-space: nowrap;
}

.text {
    font-size: 0.8em;
    margin: 1px;
    color: navy;
}

.tight {
    padding: 0px;
    overflow: clip;
    /* overflow-x: auto; */
    /* unfortunately we can't horizontally scroll while having a sticky element on the page's vertical scroll 
       so instead we'll have to control width and hope it doesn't get too fat 
       luckily, i was already planning on that! or, at least, the first half. */
}

.header, .header th, .header td {
    position: -webkit-sticky; /* required to work on Safari for some stupid reason */
    position: sticky;
    top: 0;
    z-index: 1;
}

.footer, .footer th, .footer td {
    position: -webkit-sticky; /* required to work on Safari for some stupid reason */
    position: sticky;
    bottom: 0;
    z-index: 1;
}

.header th, .header td, .footer th, .footer td {
    background-color: inherit;
}

/* flex arrangement */

.main, .flexrow, .flexcolumn, .flexrowrev {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
}

.flexrow {
    flex-flow: row wrap;
}

.flexrowrev {
    flex-flow: row-reverse wrap-reverse;
}

.flexcolumn {
    flex-flow: column nowrap;
}

.tight {
    align-items: stretch;
}

/* tooltips */

.hastip {
    position: relative;
    border-bottom: 1px dotted black;
}

.tip {
    visibility: hidden;
    position: absolute;
    display: inline-block;
    
    background-color: rgba(224, 255, 255, .95);

    padding: 5px;
    
    font-size: 0.9em;
    
    border-radius: 10px;
}

.down .tip, .up .tip {
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    
    width: min-content;
}

.wide .tip{
    max-width: 200px;
}

.up .tip {
    bottom: 120%;
}

.down .tip {
    top: 120%;
}

.right .tip, .left .tip {
    top: 40%; /* when the host is one line of text, this is somehow closer to center than 50% */
    transform: translateY(-50%);
    z-index: 1;
    
    width: max-content;
    max-width: 200px;
}

.right .tip {
    left: 110%;
}

.left .tip {
    right: 110%;
}


.hastip:hover .tip {
    visibility: visible;
}

/* auto-tooltips for small screens */
/* unfortunately due to the conditional nature they can't share code with manual tooltips */

/* large screens: */
@media screen and (min-width: 801px) {
    .short {
        display: none;
    }
}

/* small screens: */
@media screen and (max-width: 800px) {
    .shrinkable {
        position: relative;
        border-bottom: 1px dotted black;
    }
    
    .long {
        visibility: hidden;
        position: absolute;
        display: inline-block;
        
        background-color: rgba(224, 255, 255, .95);

        padding: 5px;
        
        font-size: 0.9em;
        
        border-radius: 10px;
    }
    
    .down .long, .up .long {
        left: 50%;
        transform: translateX(-50%);
        z-index: 1;
        
        width: min-content;
    }
    
    .wide .long{
        max-width: 200px;
    }
    
    .up .long {
        bottom: 120%;
    }
    
    .down .long {
        top: 120%;
    }
    
    .right .long, .left .long {
        top: 40%; /* when the short is one line of text, this is somehow closer to center than 50% */
        transform: translateY(-50%);
        z-index: 1;
        
        width: max-content;
        max-width: 200px;
    }
    
    .right .long {
        left: 110%;
    }
    
    .left .long {
        right: 110%;
    }
    
    
    .shrinkable:hover .long {
        visibility: visible;
    }
}

/* overrides */

.wide {
    width: max-content;
}

.narrow {
    width: min-content;
}
/* recommend setting a max-width for these (and maybe a min-width?) */

/* color schemes */

.primary {
    background-color: tomato;   
    border-color: #991700;
}

.primary .sortable:hover, button.primary:hover {
    background-color:#ff7d66;
    border-color: #e62200;
}

.secondary {
    background-color: burlyWood;
    border-color: #8c6026;
}

button.secondary:hover {
    background-color: #e4c49b;
    border-color: #a06e2c;
}

.tertiary {
    background-color: lightCoral;
    border-color: #ea4848;
}

.tertiary .sortable:hover {
    background-color: #f28d8d;
}

.game {
    background-color: darkSeaGreen;
    border-color: #609f60;
}

button.game:hover {  
    background-color: #9fc69f;
    border-color: darkSeaGreen;
}

tr.game:nth-child(odd) {
    background-color: #afcfaf;
}

.smallissue {
    background-color: orange;
    border-color: #CC8100;
}

tr.smallissue:nth-child(odd) {
    background-color: #FFB238;
}

button.smallissue:hover {
    background-color: #FFB238;
    border-color: orange;
}

.issue {
    background-color: fireBrick;
    border-color: #811818;
}

button.issue:hover {
    background-color: #c12525;
    border-color: fireBrick;
}

tr.issue:nth-child(odd) {
    background-color: #d62929;
}

td, th {
    border-color: inherit;
}

.action { 
    color: #330000;
    background-color: lightCyan;
    border-color: #ccffff;
}

.action:hover {
    background-color: #ccffff;
    border-color: #99ffff;
}

.action:disabled {
    background-color: #e6e6e6;
    border-color: gainsboro;
    color: #999999;
}

/* game chooser page */

.weight {
    font-size: 1.8em;
    margin: 2px;
}