:root {
    --red: hsl(0, 100%, 63.3%);       /* #f44 */
    --green: hsl(120, 69.2%, 43.3%);  /* #2b2 */
    --blue: hsl(240, 100%, 70%);      /* #66f */
    --purple: hsl(270, 100%, 63.3%);
    --yellow: hsl(45, 80%, 53.3%);
    --cyan: hsl(180, 90%, 40%);
    --grey: hsl(0, 0%, 53.3%);
    --darkgrey: #555;
    --lightgrey: #888;
    --text-color: #666;
    --shadow-lvl1: 1px 1px 2px #0003,
                   0 0 3px #0003;
    --shadow-lvl2: 2px 2px 4px #0003,
                   0 0 6px #0003;
    --shadow-lvl3: 3px 3px 6px #0003,
                   0 0 9px #0003;
}
.card-red {
    --fg-color: var(--red);
    --bg-color: hsl(0, 100%, 95%); /* #fee */
    --highlight-color: hsl(0, 100%, 80%); /* #f99 */
}
#pattern-diagonal-hatch-red { stroke: var(--red); }
.shape-half.shape-red { fill: url(#pattern-diagonal-hatch-red); }

.card-green {
    --fg-color: var(--green);
    --bg-color: hsl(120, 69.2%, 95%); /* #efe */
    --highlight-color: hsl(120, 50%, 70%); /* #8c8 */
}
#pattern-diagonal-hatch-green { stroke: var(--green); }
.shape-half.shape-green { fill: url(#pattern-diagonal-hatch-green); }

.card-blue {
    --fg-color: var(--blue);
    --bg-color: hsl(240, 100%, 95%); /* #eef */
    --highlight-color: hsl(240, 100%, 80%); /* #bbf */
}
#pattern-diagonal-hatch-blue { stroke: var(--blue); }
.shape-half.shape-blue { fill: url(#pattern-diagonal-hatch-blue); }

.card-purple {
    --fg-color: var(--purple);
    --bg-color: hsl(270, 100%, 95%); /* #fdf */
    --highlight-color: hsl(270, 100%, 80%); /* #daf */
}
#pattern-diagonal-hatch-purple { stroke: var(--purple); }
.shape-half.shape-purple { fill: url(#pattern-diagonal-hatch-purple); }

.card-yellow {
    --fg-color: var(--yellow);
    --bg-color: hsl(45, 80%, 95%);
    --highlight-color: hsl(45, 80%, 70%);
}
#pattern-diagonal-hatch-yellow { stroke: var(--yellow); }
.shape-half.shape-yellow { fill: url(#pattern-diagonal-hatch-yellow); }

.card-cyan {
    --fg-color: var(--cyan);
    --bg-color: hsl(180, 80%,95%);
    --highlight-color: hsl(180, 60%, 70%);
}
#pattern-diagonal-hatch-cyan { stroke: var(--cyan); }
.shape-half.shape-cyan { fill: url(#pattern-diagonal-hatch-cyan); }

.card-grey {
    --fg-color: var(--grey);
    --bg-color: hsl(0, 0%,95%);
    --highlight-color: hsl(0, 0%, 80%);
}
#pattern-diagonal-hatch-grey { stroke: var(--grey); }
.shape-half.shape-grey { fill: url(#pattern-diagonal-hatch-grey); }






@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: local('Montserrat Regular'), local('Montserrat-Regular'),
       url('fonts/montserrat-v14-latin-700.woff2') format('woff2'),
       url('fonts/montserrat-v14-latin-700.woff') format('woff');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  src: local('Montserrat ExtraBold'), local('Montserrat-ExtraBold'),
       url('fonts/montserrat-v14-latin-800.woff2') format('woff2'),
       url('fonts/montserrat-v14-latin-800.woff') format('woff');
}

* {
    box-sizing: border-box;
    transition-property: color, background, opacity, border, box-shadow;
    transition-duration: .25s;
    user-select: none;
}
button,
input
{
    padding: 0;
    border: none;
    outline: none;
    line-height: inherit;
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
    color: inherit;
    background: transparent;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    -webkit-border-radius: 0;
}
button {
    cursor: pointer;
}
input {
    user-select: auto;
}

html, body {
    margin: 0;
    padding: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    font-size: 1.5vmax;
    text-align: center;

    /* Background pattern from Toptal Subtle Patterns (CC BY-SA 3.0)
     * https://www.toptal.com/designers/subtlepatterns/retina-wood/
     */
    background: #e8e8ee url('wood.png') repeat;
    color: var(--text-color);
    font-family: 'Montserrat', 'Nevada', sans-serif;
    font-weight: 700;
}
body {
    display: grid;
    grid-template-columns: [left sidebar] 16rem [sidebar-end main] 1fr [main-end right];
    grid-template-rows:
        [top title] max-content
        [title-end tools] max-content
        [tools-end players] 1fr
        [players-end info] max-content
        [info-end bottom];
    grid-column-gap: 1rem;
    padding: 1rem;
    align-items: stretch;
}
h1,
.game-over-text {
    font-weight: 800;
    -webkit-text-stroke: .033em white;
    text-shadow: .025em .025em .1em rgba(0, 0, 0, .5);
}
h1 {
    font-size: 3rem;
    margin: 0 1rem;
    grid-area: title / sidebar / title-end / sidebar-end;
}
#players {
    grid-area: players / sidebar / players-end / sidebar-end;
    display: flex;
    flex-direction: column;
}
#info {
    grid-area: info / sidebar / info-end / sidebar-end;
    display: flex;
    flex-direction: column;
}
#tools {
    grid-area: tools / sidebar / tools-end / sidebar-end;
    padding: .5em;
    display: flex;
    justify-content: center;
    gap: .5em;
}
#cards {
    grid-area: top / main / bottom / main-end;
}
@media (orientation: portrait) {
    body {
        display: flex;
        flex-direction: column;
    }
    #cards {
        flex-grow: 1;
    }
}

.svg-defs {
    position: fixed;
    height: 0;
    width: 0;
}

.paper,
button.paper {
    display: flex;
    margin: 1rem 0 0 0;
    padding: 1.5rem;
    line-height: 2rem;
    font-size: 1.2rem;
    justify-content: center;
    align-items: center;
    background: white;
    box-shadow: var(--shadow-lvl1);
    border-radius: 0.5vmin;
    opacity: 1;
}
@media (pointer: fine) {
    .paper,
    button.paper {
        line-height: 1.2rem;
    }
}
@media (any-hover) {
    button.paper:not(:disabled):hover {
        box-shadow: var(--shadow-lvl2);
        background: #ddf;
        color: #448;
    }
}
button.paper:not(:disabled):active,
.paper.selected {
    box-shadow: var(--shadow-lvl2);
    background: #ddf;
    color: #448;
}
.paper:disabled {
    color: #aaa;
    opacity: .5;
    cursor: default;
    pointer-events: none;
}
.paper input {
    min-width: 0;
    flex: 1 1 auto;
    box-shadow: 0 4px 0 -2px #ccc;
}
.player-input {
    justify-content: stretch;
}

button.player {
    justify-content: space-between;
}
.player-name {
    margin-right: .5rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
button.add-player-button,
button.remove-player-button {
    font-family: 'Arial', sans-serif;
    font-weight: normal;
}
button.add-player-button {
    border-radius: 100%;
    font-size: 2.5rem;
    padding: 0;
    height: 4rem;
    width: 4rem;
    vertical-align: middle;
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: center;
}
button.remove-player-button {
    font-size: 2rem;
    padding-left: .5rem;
}

.modal {
    z-index: 100;
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #0005;
}
.modal > .paper {
    position: relative;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    font-size: 16px;
    padding: 2em;
    margin: 0;
    line-height: 1.4em;
    max-height: 90%;
    max-width: 90%;
}
.modal header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 2em;
}
.modal header h2 {
    margin: 0;
}
.modal header  .close-button {
    font-size: 2em;
}

.modal > .paper > div {
    margin-top: 2em;
    height: 100%;
    max-height: 100%;
    overflow: auto;
}
.modal p, ul {
    margin: .5em 0;
}
.modal h4 {
    margin: 1em 0 0 0;
}

#cards {
    overflow: hidden;
    display: grid;
    place-content: center;
    padding: 1%;
}
.game-preparation {
    grid-template-rows: auto auto;
    grid-template-columns: auto auto auto;
}
.game-preparation .card {
    cursor: default;
    pointer-events: none;
    transform-origin: 50% 250%;
}
@keyframes tiltLeft {
    from { transform: translateX( 100%); }
    to { transform: translateX( 100%) rotate(-16deg); }
}
@keyframes tiltRight {
    from { transform: translateX(-100%); }
    to { transform: translateX(-100%) rotate(16deg); }
}
.game-preparation .card:first-of-type {
    animation: .5s tiltLeft forwards;

}
.game-preparation .card:nth-of-type(3) {
    animation: .5s tiltRight forwards;

}
.game-preparation .start-button {
    grid-area: 2 / 1 / 3 / 4;
    font-size: 1.5rem;
    width: 6em;
    place-self: center;
}
#cards.game-started,
#cards.game-over
{
    grid-auto-flow: column;
    grid-template-rows: auto auto auto;
    grid-auto-columns: auto;
    place-content: center;
    grid-gap: 1%;
}
.game-over {
    position: relative;
}
.game-over-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 3em;
}

@keyframes fade {
    from { opacity: 1; }
    to { opacity: .5; }
}
#cards.game-over .card {
    animation: .5s fade forwards;
}
@keyframes appear {
    from { opacity: 0; }
    to { opacity: 1; }
}
.game-over-screen {
    animation: .5s appear forwards;
}

body .card {
    --card-inner-glow: inset 0 0 .12em;
    --card-inner-border: inset 0 0 0 .033em;
    margin: 0;
    height: 1em;
    width: .667em;
    padding: .0667em;

    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    border: 1px solid transparent;
    border-radius: .02em;
    box-shadow: var(--shadow-lvl1),
                var(--card-inner-glow) #eee;
}
@media (any-hover) {
    .card:hover {
        background: var(--bg-color) !important;
        box-shadow: var(--shadow-lvl1),
                    var(--card-inner-glow) var(--highlight-color) !important;
    }
}
.card.selected {
    background: var(--bg-color) !important;
    box-shadow: var(--shadow-lvl1),
                var(--card-inner-border) var(--highlight-color) !important;
}

.settings-choices {
    display: flex;
    flex-flow: row wrap;
    gap: .5em;
    padding: .5em;
}

.example {
    display: flex;
    flex-flow: row wrap;
    gap: .5em;
    margin: .5em 0;
}
.example ul {
    list-style-type: none;
    padding-left: 1em;
}
.card .svg-inline--fa {
    position: absolute;
    top: 3%;
    right: 7%;
    width: 12%;
    height: 11%;
    color: var(--fg-color);
}

.card svg {
    width: 100%;
    height: 31%;
}

.shape {
    stroke-width: 2;
    stroke: var(--fg-color);
}
.shape-full {
    fill: var(--fg-color);
}
.shape-empty { fill: none; }