@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@500');
@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@700');
    
:root {
    --back: #1e1d21;
    --dark: #151418;
    --text: #e5e3f8;
    --acnt: #493792;

    --pc-0: #db5a5a;
    --pc-1: #db6b5a;
    --pc-2: #dba75a;
    --pc-3: #5a9f56;
    --pc-4: #5488b9;
    --pc-5: #c06a8f;

    --c-back: #29272f;
    --c-1: #9c2183;
    --c-2: #eb7925;
    --c-3: #0061a8;
    --c-4: #d81813;
    --c-5: #f62f93;
    --c-6: #45b548;
    --c-7: linear-gradient(45deg,#b58913 0, #e6c879 60%, #b58913 100%);
    --c-8: #3a8962;
    --c-9: #b81c4b;
    --c-10: #e6b407;
    --c-11: #6bb912;
    --c-12: #29b5bd;
    

    --md: 0.5rem;
    --lg: 1rem;
    --cardheight: 68px;
    --cardwidth: 48px;
    --gap: 2px;
}

* {
    box-sizing: border-box;
    font-size: inherit;
    font-family: inherit;
}

body {
    background: var(--back);
    color: var(--text);
    width: 100dvw;
    height: 100dvh;
    margin: 0;
    font-size: small;
    user-select: none;
    font-family: 'Inconsolata';
}

input {
    background: var(--dark);
    color: var(--text);
    border: none;
    padding: var(--md);
    border-radius: var(--md);
}

button {
    padding: var(--md);
    border-radius: var(--md);
    border: none;
    background: var(--acnt);
    color: inherit;
    width: 100%;
    cursor: pointer;
}

button:hover { background: color-mix(in oklab, var(--acnt) 100%, var(--dark) 10%); }
button:active { background: color-mix(in oklab, var(--acnt) 100%, var(--dark) 20%); }

.icon-button {
    background: color-mix(in oklab, var(--back) 100%, var(--text) 5%);
    display: flex;
    padding: var(--md);
    border-radius: var(--md);
    cursor: pointer;
}

.icon {
    display: flex;
}

.icon-button:hover { background: color-mix(in oklab, var(--back) 100%, var(--text) 10%); }
.icon-button:active { background: color-mix(in oklab, var(--back) 100%, var(--text) 20%); }

svg {
    height: var(--lg);
    width: var(--lg);
}

h2 {
    margin: 0;
    text-transform: uppercase;
    color: color-mix(in oklab, var(--text) 100%, var(--back) 30%);
    font-weight: bold;
}

.gap {
    display: flex;
    gap: var(--md);
}

.col {
    display: flex;
    flex-direction: column;
}

.setup-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.text-right { text-align: right }
.fullwidth { width: 100%; }
.fullheight { height: 100%; }

.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.swatch {
    width: var(--lg);
    height: var(--lg);
    border-radius: var(--lg);
    transition: opacity 0.2s ease-in-out;
}

.swatch:not(.selected) {
    opacity: 0.4;
    cursor: pointer;
}

u { cursor: pointer; }
u:hover { text-decoration: none; }

#seednotif {
    position: fixed;
    top: calc(-1 * var(--md));
    left: 50dvw;
    transform: translateX(-50%);
    background: var(--acnt);
    display: flex;
    gap: var(--md);
    padding: var(--md);
    border-radius: var(--md);
    z-index: 2;
    opacity: 0;
    transition: opacity 0.2s ease-in-out, top 0.1s ease-in-out;
}

#seednotif, .next-button, .newgame-button {
    box-shadow: 0 2px 4px #0004;
}

#seednotif.vis {
    opacity: 1;
    top: var(--md);
}

.game {
    display: grid;
    grid-template-columns: 1fr 2fr;
    height: 100%;
}

.card-list {
    display: flex;
    gap: var(--md);
    flex-wrap: wrap;
}

.table {
    padding: var(--md);
    height: 100%;
}

.table-cards {
    width: calc(var(--rowsize) * var(--cardwidth) + var(--md) * var(--rowsize) - var(--md));
}

.player-list {
    background: var(--dark);
    height: 100%;
    padding: var(--md);
    min-height: 0;
    overflow-y: auto;
}

.player-area {
    background: var(--back);
    padding: var(--md);
    flex-grow: 1;
    position: relative;
    border-radius: var(--md);
    border-left: 3px solid var(--back);
}

.player-area.active {
    border-left-color: var(--pc);
}

.newgame-button {
    position: fixed;
    bottom: calc(var(--md) * 2);
    right: calc(var(--md) * 2);
    padding: var(--md);
    border-radius: 100dvh;
    background: var(--c-back);
    cursor: pointer;
    animation: waft 1s ease infinite alternate;
}

.next-button {
    color: var(--pc);
    box-sizing: content-box;
    width: var(--lg);
    height: var(--lg);
    padding: var(--md);
    border-radius: 100%;
    cursor: pointer;
    background: var(--c-back);
    display: flex;
    transition: background 0.2s ease-in-out;
    position: absolute;
    bottom: var(--md);
    right: var(--md);
}

.next-button > svg {
    animation: waft 1s ease infinite alternate;
}

.next-button:hover, .newgame-button:hover {
    background: color-mix(in oklab, var(--c-back) 100%, var(--text) 5%);
}

.next-button:active, .newgame-button:active {
    background: color-mix(in oklab, var(--c-back) 100%, var(--text) 10%);
}

@keyframes waft {
    0% {transform: translateY(-3px);}
    100% {transform: translateY(3px);}
}

.player-header {
    display: flex;
    gap: var(--md);
    align-items: center;
}

.player-name {
    color: var(--pc);
}

.player-badges {
    display: flex;
    gap: var(--md);
    align-items: center;
    flex-wrap: wrap;
}

.badge {
    --bwidth: var(--lg);
    width: var(--bwidth);
    height: var(--bwidth);
    display: flex;
    background: var(--c);
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    transition: opacity 0.2s ease-in-out;
}

.badge.available {
    cursor: pointer;
    opacity: 0.6;
}

.badge:not(.available, .owned) {
    opacity: 0.2;
}

.card {
    transform-style: preserve-3d;
    position: relative;
    width: var(--cardwidth);
    height: var(--cardheight);
    transition: transform 0.2s ease-in-out;
}

.player-hand > .card.face-down {
    cursor: not-allowed;
}

.face {
    width: var(--cardwidth);
    height: var(--cardheight);
    border-radius: var(--md);
    position: absolute;
    background: var(--c);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: xx-large;
}

.front-face {
    transform: scale(0.98) translateZ(-1px);
}

.card.face-down > .back-face {
    background: color-mix(in oklab, var(--c-back) 100%, var(--dark) 50%);
}

.card.face-up {
    transform: rotate3d(1, 0, 0, 180deg) scaleY(-1);
    cursor: default;
}

.card.claimed {
    transform: scale(0.6) rotate(5deg);
    cursor: default;
}

.player-hand > .card:not(.face-down) + .card.face-down,
.player-hand > .card.face-down:first-child,
.player-hand > .card.face-down:has(+ .card:not(.face-down)),
.player-hand > .card.face-down:last-child,
.table-cards > .card.face-down,
.client-card {
    cursor: pointer;

    &:hover {
        animation: cardtilt 0.3s ease-in-out;
    }

    & > .back-face {
        background: var(--c-back);
    }
}

.client-card, .client-card > .face {
    cursor: pointer;
}

.client-card-list {
    padding: var(--md);
}

@keyframes cardtilt {
    0% {rotate: 0deg;}
    20% {rotate: -10deg;}
    50% {rotate: 5deg;}
    80% {rotate: -1deg;}
    90% {rotate: 0.5deg;}
    100% {rotate: 0deg;}
}

.radio-option {
    width: var(--lg);
    height: var(--lg);
    box-sizing: content-box;
    padding: var(--md);
    border-radius: 100%;
    transition: background 0.2s ease-in-out;
}

.radio-option:not(.selected) { cursor: pointer; }
.radio-option:not(.selected):hover { background: color-mix(in oklab, var(--c-back) 100%, var(--text) 5%); }
.radio-option:not(.selected):active { background: color-mix(in oklab, var(--c-back) 100%, var(--text) 10%); }

.radio-option.selected {
    background: var(--acnt);
}

.return-button {
    width: fit-content;
}