:root {
    color-scheme: light dark;
    --card-bg: #ffffff;
    --accent: #3a5ad7;
    --text: #24273a;
    --muted: #6b6f86;
    --danger: #d43c52;
    --success: #2f9b6c;
    --shadow: rgba(0, 0, 0, 0.18);
    --transition: 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
    --card-move-duration: 350ms;
}

div.game {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    container-type: size;
    width: 100%;
    aspect-ratio: 16/9;
}
div.game:fullscreen
{
	background-color:#f0f0f0;
	width:100%;
	height:100%;
}
div.game span.collapse, div.game span.expand {
    font-size:2.8cqmin;
    padding:.36em .52em .36em 1.94em;
    background-size:1.1em;
    background-position:.52em 50%;
}
div.game * {
    box-sizing: border-box;
    font-size: 3.3cqmin;
}

.colorize-0 { filter: brightness(0) saturate(100%) invert(91%) sepia(0%) saturate(907%) hue-rotate(156deg) brightness(81%) contrast(89%); }
.colorize-1 { filter: brightness(0) saturate(100%) invert(55%) sepia(48%) saturate(764%) hue-rotate(300deg) brightness(101%) contrast(86%); }
.colorize-2 { filter: brightness(0) saturate(100%) invert(72%) sepia(18%) saturate(1055%) hue-rotate(343deg) brightness(93%) contrast(102%); }
.colorize-3 { filter: brightness(0) saturate(100%) invert(78%) sepia(73%) saturate(350%) hue-rotate(353deg) brightness(95%) contrast(91%); }
.colorize-4 { filter: brightness(0) saturate(100%) invert(72%) sepia(46%) saturate(590%) hue-rotate(53deg) brightness(96%) contrast(83%); }
.colorize-5 { filter: brightness(0) saturate(100%) invert(92%) sepia(5%) saturate(3985%) hue-rotate(129deg) brightness(99%) contrast(83%); }
.colorize-6 { filter: brightness(0) saturate(100%) invert(56%) sepia(99%) saturate(2683%) hue-rotate(215deg) brightness(100%) contrast(84%); }
.colorize-7 { filter: brightness(0) saturate(100%) invert(79%) sepia(29%) saturate(7458%) hue-rotate(228deg) brightness(94%) contrast(84%); }

.game-stats,.game-controls
{
    display:flex;
    flex-direction:row;
    align-items: center;
    height: 10cqmin;
    width: 100%;
    justify-content: space-around;
}

.game-stats input[type=range]
{
    margin-left:10%;
    width:100%;
    height:4cqmin;
    accent-color:#007;
    margin:0;
}
.game-label
{
    text-align:center;
    font-weight:bold;
    margin-bottom:1cqmin;
}

.stat
{
    background:#aaa8;
    padding:2cqmin;
    border-radius:1.5cqmin;
    backdrop-filter:blur(1.5cqmin);
}
.stat>*
{
    vertical-align: middle;    
}

.pack-stats
{
    background:#aaa8;
    padding:0 1em;
    border-radius:.35rem;
    backdrop-filter:blur(0.6rem);
    flex:1 0 26%;
}
.pack-stats h3
{
    text-align:center;
}
.pack-stats .gm-str
{
    color:#888;
}
.stats-container
{
    display:flex;
    gap:1.25rem;
}

.radio-pile {
    display: inline-flex;
    align-items: center;
    position: relative;
}

.radio-pile input {
    display: none;
}

.radio-pile label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 8cqmin;
    height: 8cqmin;
    border-radius: 50%;
    color: #fff;
    background: #aaa;
    border: .7cqmin solid #f0f0f0;
    font-size: 4cqmin;
    font-weight: bold;
    cursor: pointer;
    transition: transform var(--transition), border-color var(--transition), background-color var(--transition);
    position: relative;
    z-index: 1;
    margin-left: -1.2cqmin;
}

.radio-pile label:first-of-type {
    margin-left: 0;
}

.radio-pile input:checked + label {
    background: #007;
    transform: scale(1.15);
    z-index: 2;
}

.radio-pile label:hover {
    background: #007;
}

.radio-pile input:focus-visible + label {
    outline: 0.4cqmin solid rgba(58, 90, 215, 0.7);
    outline-offset: 0.25cqmin;
}

.game-stats button
{
    padding:1.5cqmin 2.5cqmin;
}

button:disabled {
    cursor: default;
    opacity: 0.5;
    box-shadow: none;
    transform: none;
}

.game-table {
    position: relative;
    width: 100%;
    flex-grow: 1;
}

.game-table>.card {
    position: absolute;
    width: 70cqmin;
    height: 70cqmin;
    border-radius: 50%;
    background-color: #f8f4e3;
    transition: left var(--card-move-duration) cubic-bezier(0.22, 0.61, 0.36, 1),
                top var(--card-move-duration) cubic-bezier(0.22, 0.61, 0.36, 1),
                transform var(--card-move-duration) cubic-bezier(0.22, 0.61, 0.36, 1);
    box-shadow: 0 0 0 .2cqmin #000, 0 0 0 2cqmin #fff, 0 0 1.5cqmin 2cqmin #000;
    padding: 0;
    overflow: hidden;
    isolation: isolate;
    z-index: 2;
}

/* Card start trigger */
.card--start-trigger {
    cursor: pointer;
}

/* Info panel for start and end messages */
.card-slot {
    position: absolute;
    width: auto;
    max-width: 55cqmin;
    min-width: 36cqmin;
    border-radius: 2.5cqmin;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
    padding: 3cqmin 4cqmin;
    user-select: none;
    backdrop-filter: blur(1.5cqmin);
    box-shadow: 0 0.5cqmin 2cqmin rgba(0, 0, 0, 0.15);
}

.card-slot--start {
    left: 25%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #aaa8;
    color: var(--text);
    z-index: 1;
}

.card-slot--start .slot-text {
    font-size: 3.8cqmin;
    font-weight: 600;
    line-height: 1.4;
}

.card-slot--end {
    left: 75%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #aaa8;
    color: var(--text);
    z-index: 3;
}

.card-slot--end .slot-title {
    font-size: 4.8cqmin;
    font-weight: 700;
    color: #007;
    margin-bottom: 1.2cqmin;
}

.card-slot--end .slot-desc {
    font-size: 3.2cqmin;
    line-height: 1.4;
    margin-bottom: 1.5cqmin;
}

.card-slot--end .slot-extra {
    font-size: 2.8cqmin;
    color: var(--text);
    margin-bottom: 1.5cqmin;
}

.card-slot--end .slot-btn {
    font-size: 3.2cqmin;
    padding: 1.2cqmin 3cqmin;
    margin-top: 1cqmin;
}

/* Table pile card position (left side) */
.game-table>.card--table {
    left: calc(25% - 35cqmin);
    top: calc(50% - 35cqmin);
}

/* Player pile card position (right side) */
.game-table>.card--player {
    left: calc(75% - 35cqmin);
    top: calc(50% - 35cqmin);
}

.card--under {
    pointer-events: none;
}

.card-symbols {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
}

.card--show-symbols .card-symbols {
    opacity: 1;
    pointer-events: auto;
}

/* Non-top cards within the visible stack should not intercept clicks */
.card:not(.card--show-symbols) {
    pointer-events: none;
}

/* Cards beyond 5-per-pile limit are fully hidden */
.card--hidden {
    opacity: 0;
    pointer-events: none;
}

/* Lock when wrong card is clicked */
.game-table.locked {
    pointer-events: none;
}

.game-table.locked .card--show-symbols::after {
    content: "Penalty!";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(212, 60, 82, 0.28);
    color: #fff;
    font-size: 5.5cqmin;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 1;
    animation: pulse 1s ease-in-out;
    backdrop-filter: blur(0.3cqmin);
    z-index: 100;
    border-radius: 50%;
}

/* Under the penalty overlay, prevent clicks on symbols too */
.game-table.locked .card--show-symbols .card-symbols {
    pointer-events: none;
}

@keyframes pulse {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0.85;
        transform: scale(1.04);
    }
}

.symbol {
    position: absolute;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: transparent;
    transition: transform 280ms cubic-bezier(0.17, 0.89, 0.32, 1.28), box-shadow var(--transition), filter var(--transition), background-color var(--transition);
    pointer-events: auto;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
}

@keyframes symbol-float {
    0%, 100% {
        transform: rotate(0deg) scale(1);
    }
    25% {
        transform: rotate(3deg) scale(1.04);
    }
    75% {
        transform: rotate(-2deg) scale(0.97);
    }
}

.symbol img {
    width: 85%;
    height: 85%;
    object-fit: contain;
    pointer-events: none;
}

/* Float animation only when game is in progress */
.game--playing .symbol img {
    animation: symbol-float 4s ease-in-out infinite;
    animation-delay: calc(var(--symbol-delay, 0) * -1s);
}

/* Hover highlight only when game is in progress */
.game--playing .symbol:hover {
    background: #b9b9b9cc;
    box-shadow: 0 0 0.4cqmin #b9b9b9cc;
}

.symbol:focus-visible {
    outline: 0.4cqmin solid rgba(58, 90, 215, 0.7);
    outline-offset: 0.25cqmin;
}

.symbol--static {
    pointer-events: none;
}

.symbol.match {
    border-color: rgba(47, 155, 108, 0.85);
    transform: translate(-50%, -50%) scale(1.18) !important;
    z-index: 5;
    box-shadow: 0 0 0 1.5cqmin rgba(47, 155, 108, 0.18);
}

.symbol.wrong {
    border-color: rgba(212, 60, 82, 0.9);
    box-shadow: 0 0 0 1.5cqmin rgba(212, 60, 82, 0.18);
    transform: translate(-50%, -50%) scale(0.82) rotate(-6deg) !important;
}