.cardarcade-page {
    margin: 12px 0 20px;
}

.cardarcade-hero,
.cardarcade-board {
    border: 2px solid #dfe8f0;
    border-radius: 18px;
    background: radial-gradient(circle at top, #0fb03a 0%, #008d1f 65%, #007018 100%);
    color: #fff;
    padding: 20px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
    text-align: center;
}

.cardarcade-hero h2,
.cardarcade-board h2 {
    color: #fff;
    margin-top: 0;
    text-shadow: 0 2px 2px rgba(0, 0, 0, .25);
}

.cardarcade-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-top: 18px;
}

.cardarcade-game-card {
    background: #009f22;
    border: 3px solid rgba(255, 255, 255, .85);
    border-radius: 18px;
    padding: 18px;
    text-align: center;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .15);
}

.cardarcade-game-card h3 {
    color: #fff;
    font-size: 1.45em;
    margin: 8px 0 14px;
}

.cardarcade-game-icon {
    width: 74px;
    height: 74px;
    line-height: 74px;
    margin: 0 auto;
    border-radius: 16px;
    background: #fff;
    color: #007018;
    font-size: 42px;
    box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .08);
}

.cardarcade-toolbar {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.cardarcade-board {
    min-height: 360px;
}

.cardarcade-stats {
    display: flex;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.cardarcade-table {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    min-height: 190px;
    padding: 12px;
}

.cardarcade-card {
    width: 58px;
    height: 82px;
    border-radius: 8px;
    background: #fff;
    color: #111;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .35);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35em;
    font-weight: bold;
    cursor: pointer;
    user-select: none;
}

.cardarcade-card.red {
    color: #d50000;
}

.cardarcade-card.back {
    color: #fff;
    background: repeating-linear-gradient(45deg, #b50000 0, #b50000 6px, #e23232 6px, #e23232 12px);
}

.cardarcade-message {
    min-height: 22px;
    font-weight: bold;
}

.cardarcade-sideboard {
    margin-top: 14px;
}

@media (max-width: 700px) {
    .cardarcade-card {
        width: 46px;
        height: 66px;
        font-size: 1.05em;
    }

    .cardarcade-toolbar {
        display: grid;
        grid-template-columns: 1fr;
    }
}


/* FreeCell engine */
.cardarcade-board {
    padding: clamp(10px, 1.6vw, 18px);
    min-height: 0;
}

.cardarcade-freecell-table {
    --card-w: clamp(40px, 5vw, 56px);
    --card-h: calc(var(--card-w) * 1.38);
    --card-step: clamp(24px, 3.2vh, 35px);
    --card-gap: clamp(4px, .8vw, 9px);
    display: block;
    width: 100%;
    min-height: 0;
    overflow-x: auto;
    overflow-y: visible;
    padding: clamp(6px, 1vw, 10px);
    box-sizing: border-box;
}

.cardarcade-freecell-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: clamp(8px, 2vw, 18px);
    margin-bottom: clamp(12px, 2.2vh, 22px);
}

.cardarcade-freecells,
.cardarcade-foundations {
    display: grid;
    grid-template-columns: repeat(4, var(--card-w));
    gap: var(--card-gap);
}

.cardarcade-freecell-columns {
    display: grid;
    grid-template-columns: repeat(8, minmax(var(--card-w), 1fr));
    gap: var(--card-gap);
    align-items: start;
    min-width: calc((var(--card-w) * 8) + (var(--card-gap) * 7));
}

.cardarcade-freecell-column {
    min-height: calc(var(--card-h) + (var(--card-step) * 6) + 18px);
    border-radius: 10px;
    padding: 3px;
    background: rgba(255, 255, 255, .06);
}

.cardarcade-freecell-card {
    position: relative;
    width: var(--card-w);
    height: var(--card-h);
    margin: 0 auto calc(var(--card-step) - var(--card-h));
    border: 1px solid #ccc;
    align-items: flex-start;
    justify-content: flex-start;
    padding: clamp(3px, .55vw, 5px);
    line-height: 1;
    text-align: left;
    font-size: clamp(.86em, 1.55vw, 1.12em);
    box-sizing: border-box;
}

.cardarcade-freecell-top .cardarcade-freecell-card,
.cardarcade-freecell-column .cardarcade-freecell-card:last-child {
    margin-bottom: 0;
}

.cardarcade-freecell-card small {
    position: absolute;
    right: clamp(3px, .55vw, 5px);
    bottom: clamp(3px, .55vw, 5px);
    font-size: 1.1em;
}

.cardarcade-freecell-card.selected {
    outline: 3px solid #ffd84a;
    transform: translateY(-3px);
}

.cardarcade-freecell-card.locked {
    cursor: default;
}

.cardarcade-slot {
    width: var(--card-w);
    height: var(--card-h);
    border: 2px dashed rgba(255, 255, 255, .65);
    border-radius: 8px;
    color: #fff;
    background: rgba(0, 0, 0, .12);
    font-weight: bold;
    font-size: clamp(.72em, 1.25vw, .95em);
    cursor: pointer;
    box-sizing: border-box;
}

.cardarcade-slot.red {
    color: #ffdddd;
}

.cardarcade-slot.column-empty {
    width: 100%;
    min-height: var(--card-h);
}

#cardarcade-save:disabled {
    opacity: .55;
    cursor: not-allowed;
}

@media (max-width: 900px) {
    .cardarcade-freecell-table {
        --card-w: clamp(36px, 10vw, 48px);
        --card-step: clamp(22px, 3vh, 30px);
    }

    .cardarcade-freecell-top {
        gap: 8px;
        margin-bottom: 12px;
    }
}

@media (max-width: 620px) {
    .cardarcade-board {
        padding: 8px;
    }

    .cardarcade-toolbar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .cardarcade-toolbar select,
    .cardarcade-toolbar .button1,
    .cardarcade-toolbar .button2 {
        width: 100%;
        margin: 0;
    }

    .cardarcade-stats {
        gap: 8px;
        margin-bottom: 8px;
        font-size: .92em;
    }

    .cardarcade-freecell-table {
        --card-w: 38px;
        --card-step: 22px;
        padding: 4px;
    }

    .cardarcade-freecell-top {
        flex-direction: row;
        justify-content: space-between;
        overflow-x: auto;
    }

    .cardarcade-freecells,
    .cardarcade-foundations {
        grid-template-columns: repeat(4, var(--card-w));
        gap: 4px;
    }

    .cardarcade-freecell-columns {
        gap: 4px;
    }
}

/* Blackjack engine */
.cardarcade-blackjack-table {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    min-height: 0;
}

.cardarcade-blackjack-hand {
    padding: 12px;
    border-radius: 14px;
    background: rgba(0, 0, 0, .12);
}

.cardarcade-blackjack-hand h3 {
    color: #fff;
    margin: 0 0 10px;
}

.cardarcade-blackjack-cards {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.cardarcade-blackjack-card {
    position: relative;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 6px;
    box-sizing: border-box;
}

.cardarcade-blackjack-card small {
    position: absolute;
    right: 6px;
    bottom: 6px;
}

.cardarcade-blackjack-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

@media (max-width: 620px) {
    .cardarcade-blackjack-cards {
        gap: 6px;
    }

    .cardarcade-blackjack-actions .button1,
    .cardarcade-blackjack-actions .button2 {
        width: auto;
        min-width: 110px;
    }
}


/* Card Arcade 0.1.5 polish: readable panels + pro cards */
.cardarcade-page .panel {
    background: rgba(238, 246, 250, .96);
    border-radius: 12px;
    color: #213047;
}

.cardarcade-page .table1,
.cardarcade-page .table1 th,
.cardarcade-page .table1 td {
    color: #213047;
}

.cardarcade-page .table1 thead th {
    background: #0b5f38;
    color: #fff;
    text-shadow: none;
}

.cardarcade-page .table1 tbody td {
    background: rgba(255, 255, 255, .92);
}

.cardarcade-message {
    margin-top: 8px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}

.cardarcade-stats {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    padding: 8px 18px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .28);
    border: 1px solid rgba(255, 255, 255, .22);
}

.cardarcade-solitaire-table {
    --card-w: clamp(58px, 6.2vw, 82px);
    --card-h: calc(var(--card-w) * 1.38);
    --card-step: clamp(24px, 3.4vh, 34px);
    --card-gap: clamp(6px, .9vw, 12px);
    display: block;
    width: 100%;
    min-height: 0;
    overflow-x: auto;
    padding: clamp(8px, 1vw, 12px);
    box-sizing: border-box;
}

.cardarcade-solitaire-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: clamp(18px, 3vh, 28px);
    min-width: calc((var(--card-w) * 7) + (var(--card-gap) * 6));
}

.cardarcade-solitaire-stockarea {
    display: grid;
    grid-template-columns: var(--card-w) calc(var(--card-w) * 1.85);
    gap: var(--card-gap);
    align-items: start;
}

.cardarcade-solitaire-waste {
    position: relative;
    min-width: calc(var(--card-w) * 1.85);
    height: var(--card-h);
}

.cardarcade-solitaire-waste .cardarcade-pro-card {
    position: absolute;
    top: 0;
}

.cardarcade-solitaire-waste .cardarcade-pro-card:nth-child(1) {
    left: 0;
}

.cardarcade-solitaire-waste .cardarcade-pro-card:nth-child(2) {
    left: calc(var(--card-w) * .42);
}

.cardarcade-solitaire-waste .cardarcade-pro-card:nth-child(3) {
    left: calc(var(--card-w) * .84);
}

.cardarcade-solitaire-foundations {
    display: grid;
    grid-template-columns: repeat(4, var(--card-w));
    gap: var(--card-gap);
}

.cardarcade-solitaire-columns {
    display: grid;
    grid-template-columns: repeat(7, minmax(var(--card-w), 1fr));
    gap: var(--card-gap);
    align-items: start;
    min-width: calc((var(--card-w) * 7) + (var(--card-gap) * 6));
}

.cardarcade-solitaire-column {
    min-height: calc(var(--card-h) + (var(--card-step) * 8));
    border-radius: 13px;
    padding: 4px;
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.08));
}

.cardarcade-solitaire-column .cardarcade-pro-card {
    margin: 0 auto calc(var(--card-step) - var(--card-h));
}

.cardarcade-solitaire-column .cardarcade-pro-card:last-child {
    margin-bottom: 0;
}

.cardarcade-pro-card {
    position: relative;
    width: var(--card-w);
    height: var(--card-h);
    border: 1px solid rgba(15, 20, 25, .32);
    border-radius: clamp(7px, .75vw, 12px);
    background:
        radial-gradient(circle at 70% 75%, rgba(255,255,255,.9), rgba(245,241,230,.96) 52%, rgba(224,216,196,.98) 100%);
    color: #14202a;
    box-shadow: 0 3px 7px rgba(0, 0, 0, .36), inset 0 0 0 2px rgba(255,255,255,.55);
    display: block;
    padding: clamp(4px, .55vw, 7px);
    font-weight: 900;
    box-sizing: border-box;
    overflow: hidden;
    transform-origin: center;
    transition: transform .12s ease, box-shadow .12s ease;
}

.cardarcade-pro-card:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 7px 14px rgba(0, 0, 0, .38), inset 0 0 0 2px rgba(255,255,255,.65);
}

.cardarcade-pro-card.red {
    color: #c91924;
}

.cardarcade-pro-card .card-rank {
    position: absolute;
    left: 6px;
    top: 5px;
    font-size: clamp(.9em, 1.8vw, 1.28em);
    line-height: .9;
}

.cardarcade-pro-card .card-suit {
    position: absolute;
    left: 7px;
    top: clamp(22px, 2.3vw, 30px);
    font-size: clamp(.9em, 1.7vw, 1.2em);
    line-height: 1;
}

.cardarcade-pro-card .card-center {
    position: absolute;
    right: 7px;
    bottom: 4px;
    font-size: clamp(1.6em, 3.5vw, 2.6em);
    opacity: .9;
}

.cardarcade-pro-card.back {
    color: #f7d96b;
    background:
        radial-gradient(circle at center, rgba(255,255,255,.18), rgba(255,255,255,0) 34%),
        repeating-linear-gradient(45deg, #143e78 0, #143e78 8px, #0d2b57 8px, #0d2b57 16px);
    border-color: rgba(255,255,255,.55);
}

.cardarcade-pro-card .card-back-pattern {
    position: absolute;
    inset: 8px;
    border: 2px solid rgba(255,255,255,.65);
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-size: clamp(1.3em, 3vw, 2.4em);
    color: rgba(255,255,255,.8);
}

.cardarcade-pro-card.selected {
    outline: 3px solid #ffe05c;
    transform: translateY(-5px) scale(1.03);
}

.cardarcade-pro-slot {
    width: var(--card-w);
    height: var(--card-h);
    border-radius: clamp(7px, .75vw, 12px);
    border: 2px dashed rgba(255, 255, 255, .62);
    background: rgba(0, 0, 0, .18);
    color: rgba(255, 255, 255, .78);
    font-size: clamp(1.15em, 2.5vw, 2em);
    font-weight: 900;
}

@media (max-width: 760px) {
    .cardarcade-solitaire-table {
        --card-w: 46px;
        --card-step: 24px;
    }

    .cardarcade-solitaire-top {
        gap: 10px;
    }

    .cardarcade-pro-card .card-rank {
        left: 4px;
        top: 4px;
    }

    .cardarcade-pro-card .card-suit {
        left: 5px;
        top: 20px;
    }

    .cardarcade-pro-card .card-center {
        right: 5px;
        bottom: 3px;
    }
}

/* Pro card face for FreeCell too */
.cardarcade-freecell-card {
    background:
        radial-gradient(circle at 70% 75%, rgba(255,255,255,.9), rgba(245,241,230,.96) 52%, rgba(224,216,196,.98) 100%);
    border-color: rgba(15, 20, 25, .28);
    box-shadow: 0 3px 7px rgba(0, 0, 0, .32), inset 0 0 0 2px rgba(255,255,255,.55);
}

.cardarcade-freecell-card span {
    font-weight: 900;
}

.cardarcade-freecell-card small {
    opacity: .95;
}


/* Card Arcade 0.1.6: viewport fit + arcade toolbar */
.cardarcade-page {
    --ca-toolbar-space: 112px;
}

.cardarcade-toolbar {
    position: sticky;
    top: 0;
    z-index: 15;
    padding: 10px;
    border-radius: 0 0 16px 16px;
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(241,247,250,.94));
    box-shadow: 0 6px 16px rgba(0,0,0,.10);
}

.cardarcade-toolbar .button,
.cardarcade-toolbar button,
.cardarcade-toolbar select {
    border-radius: 11px;
    font-weight: 800;
}

.cardarcade-toolbar .button,
.cardarcade-toolbar button {
    padding: 8px 16px;
    border: 1px solid rgba(7, 64, 35, .25);
    background: linear-gradient(180deg, #ffffff, #edf6f0);
    color: #074023 !important;
    text-shadow: none;
    box-shadow: 0 2px 0 rgba(7,64,35,.22), 0 6px 14px rgba(0,0,0,.10);
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

.cardarcade-toolbar .button1,
.cardarcade-toolbar button.button1 {
    background: linear-gradient(180deg, #fffbf2, #ffd866);
    color: #684100 !important;
    border-color: rgba(120, 76, 0, .28);
}

.cardarcade-toolbar .button:hover,
.cardarcade-toolbar button:hover {
    transform: translateY(-1px);
    filter: brightness(1.03);
    box-shadow: 0 3px 0 rgba(7,64,35,.2), 0 8px 18px rgba(0,0,0,.14);
}

.cardarcade-toolbar button:disabled {
    opacity: .45;
    transform: none;
    box-shadow: none;
}

.cardarcade-toolbar label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 11px;
    background: rgba(255,255,255,.65);
    color: #34445e;
    font-weight: 700;
}

.cardarcade-board {
    min-height: 0;
    max-height: calc(100vh - var(--ca-toolbar-space));
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.cardarcade-board h2 {
    margin-bottom: 8px;
}

.cardarcade-table {
    flex: 1 1 auto;
}

.cardarcade-freecell-table {
    --card-w: clamp(38px, min(5vw, 8.1vh), 58px);
    --card-step: clamp(20px, 3.1vh, 33px);
    overflow: auto;
}

.cardarcade-solitaire-table {
    --card-w: clamp(42px, min(5.6vw, 8.2vh), 76px);
    --card-step: clamp(19px, 3vh, 31px);
    overflow: auto;
}

.cardarcade-solitaire-column {
    min-height: calc(var(--card-h) + (var(--card-step) * 6));
}

.cardarcade-freecell-column {
    min-height: calc(var(--card-h) + (var(--card-step) * 5));
}

.cardarcade-message:not(:empty) {
    margin: 8px auto 0;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .30);
    max-width: 92%;
}

@media (max-height: 760px) {
    .cardarcade-page {
        --ca-toolbar-space: 92px;
    }

    .cardarcade-board h2 {
        font-size: 1.45em;
        margin: 0 0 5px;
    }

    .cardarcade-stats {
        padding: 5px 14px;
        margin-bottom: 7px;
    }

    .cardarcade-freecell-table {
        --card-w: clamp(34px, min(4.7vw, 7.4vh), 52px);
        --card-step: clamp(18px, 2.75vh, 28px);
    }

    .cardarcade-solitaire-table {
        --card-w: clamp(37px, min(5.2vw, 7.5vh), 68px);
        --card-step: clamp(17px, 2.65vh, 27px);
    }
}

@media (max-width: 720px) {
    .cardarcade-toolbar {
        position: static;
        border-radius: 14px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cardarcade-toolbar label {
        grid-column: 1 / -1;
        justify-content: space-between;
    }

    .cardarcade-board {
        max-height: none;
        overflow: visible;
    }
}


/* Card Arcade 0.1.9: compact nette knoppen + dood-spel lock */
.cardarcade-toolbar {
	gap: 8px;
	padding: 8px 10px;
	border-radius: 14px;
}

.cardarcade-toolbar .button,
.cardarcade-toolbar button {
	min-height: 34px;
	padding: 6px 13px;
	border-radius: 9px;
	font-size: 1em;
	font-weight: 700;
	line-height: 1.15;
	background: linear-gradient(180deg, #ffffff 0%, #edf5f2 100%);
	border: 1px solid #b8cec5;
	color: #064323 !important;
	box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 4px rgba(0,0,0,.13);
	text-shadow: none;
}

.cardarcade-toolbar .button1,
.cardarcade-toolbar button.button1 {
	background: linear-gradient(180deg, #fff8df 0%, #f3c85c 100%);
	border-color: #d5a23a;
	color: #573600 !important;
}

.cardarcade-toolbar .button:hover,
.cardarcade-toolbar button:hover {
	transform: translateY(-1px);
	box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 4px 8px rgba(0,0,0,.15);
}

.cardarcade-toolbar button:disabled {
	opacity: .48;
	filter: grayscale(.25);
}

.cardarcade-toolbar label {
	min-height: 34px;
	padding: 5px 9px;
	border-radius: 9px;
	font-size: .95em;
}

.cardarcade-toolbar select {
	min-height: 28px;
	padding: 2px 22px 2px 6px;
	font-size: .95em;
}

.cardarcade-no-moves {
	position: relative;
	filter: saturate(.65) brightness(.92);
}

.cardarcade-no-moves::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 14px;
	background: rgba(0,0,0,.08);
	pointer-events: none;
}

.cardarcade-no-moves .cardarcade-card,
.cardarcade-no-moves .cardarcade-pro-card,
.cardarcade-no-moves .cardarcade-freecell-card,
.cardarcade-no-moves .cardarcade-slot {
	cursor: not-allowed;
}

/* Card Arcade 0.2.0: cleaner buttons + drag/drop feedback */
.cardarcade-toolbar {
    gap: 10px;
    padding: 10px 12px;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f4f8f9 100%);
    border: 1px solid rgba(168, 194, 183, .45);
}
.cardarcade-toolbar .button,
.cardarcade-toolbar button {
    min-height: 36px;
    padding: 7px 16px;
    border-radius: 999px;
    border: 1px solid #b7d2c8;
    background: linear-gradient(180deg, #ffffff 0%, #eef7f3 100%);
    color: #064323 !important;
    font-size: .98em;
    font-weight: 800;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 2px 5px rgba(0,0,0,.10);
}
.cardarcade-toolbar .button1,
.cardarcade-toolbar button.button1 {
    background: linear-gradient(180deg, #fff7cf 0%, #f4ca58 100%);
    border-color: #d8aa37;
    color: #553900 !important;
}
.cardarcade-toolbar .button:hover:not(:disabled),
.cardarcade-toolbar button:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 5px 12px rgba(0,0,0,.14);
}
.cardarcade-toolbar label {
    min-height: 36px;
    padding: 5px 12px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(183, 210, 200, .65);
}
.cardarcade-toolbar select {
    border-radius: 999px;
    border: 1px solid #aab8b4;
    background-color: #fff;
    font-weight: 700;
}
.cardarcade-drop-ready {
    outline: 3px solid rgba(255, 224, 92, .95) !important;
    outline-offset: 2px;
    filter: brightness(1.08);
}

/* Card Arcade 0.2.1: CardGames-style toolbar buttons + reliable viewport fit */
.cardarcade-toolbar {display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px;margin:0 0 16px;border-radius:18px;background:linear-gradient(180deg,#f9fcfb 0%,#edf6f3 100%);border:1px solid rgba(132,167,151,.35);box-shadow:0 10px 26px rgba(8,37,24,.10);}
.cardarcade-ui-btn,.cardarcade-toolbar .cardarcade-ui-btn,.cardarcade-toolbar button.cardarcade-ui-btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 22px;border-radius:12px;border:0;font-size:16px;font-weight:900;line-height:1;letter-spacing:.01em;text-decoration:none!important;cursor:pointer;text-shadow:0 2px 0 rgba(0,0,0,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -4px 0 rgba(0,0,0,.22),0 5px 0 rgba(0,0,0,.20),0 12px 20px rgba(0,0,0,.14);transition:transform .12s ease,box-shadow .12s ease,filter .12s ease;}
.cardarcade-ui-btn-green{color:#fff!important;background:linear-gradient(180deg,#249944 0%,#10742d 62%,#07591e 100%);}
.cardarcade-ui-btn-gold{color:#3f2b00!important;text-shadow:0 1px 0 rgba(255,255,255,.42);background:linear-gradient(180deg,#ffe886 0%,#f1b822 62%,#c58700 100%);}
.cardarcade-ui-btn-purple{color:#fff!important;background:linear-gradient(180deg,#e12cff 0%,#ab05c9 62%,#76008f 100%);}
.cardarcade-ui-btn:hover:not(:disabled),.cardarcade-toolbar button.cardarcade-ui-btn:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.04);box-shadow:inset 0 1px 0 rgba(255,255,255,.33),inset 0 -4px 0 rgba(0,0,0,.24),0 7px 0 rgba(0,0,0,.20),0 16px 24px rgba(0,0,0,.18);}
.cardarcade-ui-btn:active:not(:disabled),.cardarcade-toolbar button.cardarcade-ui-btn:active:not(:disabled){transform:translateY(3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -2px 0 rgba(0,0,0,.24),0 2px 0 rgba(0,0,0,.20),0 8px 16px rgba(0,0,0,.14);}
.cardarcade-ui-btn:disabled,.cardarcade-toolbar button.cardarcade-ui-btn:disabled{opacity:.55;cursor:not-allowed;filter:grayscale(.15) saturate(.65);}
.cardarcade-toolbar label{display:inline-flex;align-items:center;gap:9px;min-height:46px;padding:0 18px;border-radius:999px;background:rgba(255,255,255,.86);color:#31415d;font-weight:900;box-shadow:inset 0 -2px 0 rgba(0,0,0,.06);}
.cardarcade-toolbar select{min-height:34px;border-radius:999px;border:2px solid rgba(0,0,0,.25);padding:0 34px 0 11px;background-color:#fff;color:#111;font-weight:900;}
.cardarcade-board{overflow:hidden;min-height:min(560px,calc(100vh - 230px));}
.cardarcade-table{min-height:0;}
.cardarcade-solitaire-table,.cardarcade-freecell-table{max-width:100%;max-height:calc(100vh - 315px);overflow:hidden;transform-origin:top center;}
@media (max-width:900px){.cardarcade-toolbar{gap:8px;padding:10px}.cardarcade-ui-btn,.cardarcade-toolbar button.cardarcade-ui-btn{min-height:40px;padding:0 14px;font-size:14px;border-radius:10px}.cardarcade-toolbar label{min-height:40px;padding:0 12px}}

/* Card Arcade 0.2.2: compact toolbar buttons, no oversized blocks */
.cardarcade-toolbar { position: relative; top: auto; z-index: 5; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; margin: 0 0 12px; border-radius: 12px; background: linear-gradient(180deg, #f8fcfb 0%, #eef6f3 100%); border: 1px solid rgba(132,167,151,.35); box-shadow: 0 4px 12px rgba(8,37,24,.09); }
.cardarcade-ui-btn, .cardarcade-toolbar .cardarcade-ui-btn, .cardarcade-toolbar button.cardarcade-ui-btn { min-height: 34px; height: 34px; padding: 0 14px; border-radius: 8px; font-size: 13px; font-weight: 900; line-height: 1; letter-spacing: .01em; text-shadow: 0 1px 0 rgba(0,0,0,.22); box-shadow: inset 0 1px 0 rgba(255,255,255,.26), inset 0 -2px 0 rgba(0,0,0,.22), 0 3px 0 rgba(0,0,0,.18), 0 7px 12px rgba(0,0,0,.12); }
.cardarcade-ui-btn:hover:not(:disabled), .cardarcade-toolbar button.cardarcade-ui-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.32), inset 0 -2px 0 rgba(0,0,0,.24), 0 4px 0 rgba(0,0,0,.18), 0 10px 15px rgba(0,0,0,.14); }
.cardarcade-ui-btn:active:not(:disabled), .cardarcade-toolbar button.cardarcade-ui-btn:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.24), 0 1px 0 rgba(0,0,0,.18), 0 4px 8px rgba(0,0,0,.12); }
.cardarcade-toolbar label { min-height: 34px; height: 34px; padding: 0 10px; border-radius: 999px; gap: 7px; font-size: 13px; font-weight: 900; box-sizing: border-box; }
.cardarcade-toolbar select { min-height: 26px; height: 26px; padding: 0 28px 0 8px; border-radius: 999px; font-size: 13px; font-weight: 900; }
.cardarcade-board { min-height: min(560px, calc(100vh - 170px)); }
.cardarcade-solitaire-table, .cardarcade-freecell-table { max-height: calc(100vh - 250px); }
@media (max-width: 700px) { .cardarcade-toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .cardarcade-ui-btn, .cardarcade-toolbar .cardarcade-ui-btn, .cardarcade-toolbar button.cardarcade-ui-btn { width: 100%; padding: 0 8px; } .cardarcade-toolbar label { grid-column: 1 / -1; width: 100%; justify-content: space-between; } }


/* Card Arcade 0.2.3: smaller toolbar buttons + safer drag/drop targets */
.cardarcade-toolbar {
    gap: 6px !important;
    padding: 6px 8px !important;
    margin-bottom: 10px !important;
    border-radius: 10px !important;
}
.cardarcade-ui-btn,
.cardarcade-toolbar .cardarcade-ui-btn,
.cardarcade-toolbar button.cardarcade-ui-btn {
    min-height: 30px !important;
    height: 30px !important;
    padding: 0 11px !important;
    border-radius: 7px !important;
    font-size: 12px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -2px 0 rgba(0,0,0,.20), 0 2px 0 rgba(0,0,0,.16), 0 5px 9px rgba(0,0,0,.10) !important;
}
.cardarcade-toolbar label {
    min-height: 30px !important;
    height: 30px !important;
    padding: 0 8px !important;
    font-size: 12px !important;
    gap: 6px !important;
}
.cardarcade-toolbar select {
    min-height: 24px !important;
    height: 24px !important;
    padding: 0 24px 0 7px !important;
    font-size: 12px !important;
}
.cardarcade-card[draggable="true"],
.cardarcade-pro-card[draggable="true"],
.cardarcade-freecell-card[draggable="true"] {
    cursor: grab;
}
.cardarcade-card[draggable="true"]:active,
.cardarcade-pro-card[draggable="true"]:active,
.cardarcade-freecell-card[draggable="true"]:active {
    cursor: grabbing;
}
.cardarcade-solitaire-column.cardarcade-drop-ready,
.cardarcade-freecell-column.cardarcade-drop-ready {
    outline: 2px solid rgba(255, 224, 92, .95) !important;
    outline-offset: 2px;
}



/* Card Arcade 0.2.5: compact arcade controls + modern leaderboard */
.cardarcade-toolbar {
    gap: 8px;
    padding: 10px 12px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(250,255,253,.94), rgba(238,248,244,.94));
    box-shadow: 0 8px 22px rgba(0, 40, 25, .10);
}

.cardarcade-toolbar label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .86);
    color: #31405c;
    font-weight: 800;
    box-shadow: inset 0 0 0 1px rgba(26, 91, 64, .10);
}

.cardarcade-toolbar select {
    min-height: 30px;
    padding: 3px 30px 3px 10px;
    border-radius: 999px;
    border: 1px solid rgba(18, 76, 52, .28);
    background: #fff;
    color: #12251c;
    font-weight: 800;
}

.cardarcade-ui-btn,
.cardarcade-toolbar .cardarcade-ui-btn {
    min-height: 38px !important;
    padding: 8px 15px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    line-height: 1.1 !important;
    letter-spacing: .01em;
    box-shadow: 0 4px 0 rgba(0,0,0,.20), 0 8px 16px rgba(0,0,0,.10) !important;
}

.cardarcade-ui-btn-green,
.cardarcade-toolbar .cardarcade-ui-btn-green {
    color: #fff !important;
    border: 1px solid #0b7d35 !important;
    background: linear-gradient(180deg, #25a449 0%, #108232 58%, #096528 100%) !important;
    text-shadow: 0 2px 0 rgba(0,0,0,.28);
}

.cardarcade-ui-btn-gold,
.cardarcade-toolbar .cardarcade-ui-btn-gold {
    color: #442e00 !important;
    border: 1px solid #d1961c !important;
    background: linear-gradient(180deg, #ffe999 0%, #f6c953 55%, #d99b19 100%) !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.55);
}

.cardarcade-ui-btn-purple,
.cardarcade-toolbar .cardarcade-ui-btn-purple {
    color: #fff !important;
    border: 1px solid #7c179a !important;
    background: linear-gradient(180deg, #d23cf0 0%, #a30fc6 55%, #780598 100%) !important;
    text-shadow: 0 2px 0 rgba(0,0,0,.28);
}

.cardarcade-ui-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    filter: brightness(1.04);
}

.cardarcade-ui-btn:active:not(:disabled) {
    transform: translateY(2px);
    box-shadow: 0 2px 0 rgba(0,0,0,.22), 0 4px 10px rgba(0,0,0,.12) !important;
}

.cardarcade-ui-btn:disabled {
    opacity: .58;
    filter: grayscale(.25);
}

.cardarcade-leaderboard-page .cardarcade-hero,
.cardarcade-sideboard.panel {
    background: linear-gradient(180deg, #f7fbff 0%, #eaf3f7 100%) !important;
    border: 1px solid rgba(17, 89, 59, .16) !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 26px rgba(0, 39, 45, .10) !important;
    color: #203047 !important;
}

.cardarcade-leaderboard-hero h2,
.cardarcade-sideboard h3 {
    color: #0b5f38 !important;
    text-shadow: none !important;
}

.cardarcade-leaderboard-panel {
    padding: 10px;
    border-radius: 18px;
    background: linear-gradient(180deg, #f7fbff 0%, #eaf3f7 100%) !important;
    box-shadow: 0 10px 26px rgba(0, 39, 45, .10);
}

.cardarcade-leaderboard-table,
.cardarcade-sideboard .table1 {
    border-collapse: separate !important;
    border-spacing: 0 7px !important;
    background: transparent !important;
}

.cardarcade-leaderboard-table thead th,
.cardarcade-sideboard .table1 thead th {
    padding: 10px 12px !important;
    border: 0 !important;
    background: linear-gradient(180deg, #0f7c42, #075c31) !important;
    color: #fff !important;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.cardarcade-leaderboard-table thead th:first-child,
.cardarcade-sideboard .table1 thead th:first-child {
    border-radius: 12px 0 0 12px;
}

.cardarcade-leaderboard-table thead th:last-child,
.cardarcade-sideboard .table1 thead th:last-child {
    border-radius: 0 12px 12px 0;
}

.cardarcade-leaderboard-table tbody td,
.cardarcade-sideboard .table1 tbody td {
    padding: 10px 12px !important;
    border: 0 !important;
    background: #fff !important;
    color: #213047 !important;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(0,0,0,.06);
}

.cardarcade-leaderboard-table tbody tr td:first-child,
.cardarcade-sideboard .table1 tbody tr td:first-child {
    border-radius: 12px 0 0 12px;
    color: #0b7d35 !important;
    font-weight: 900;
}

.cardarcade-leaderboard-table tbody tr td:last-child,
.cardarcade-sideboard .table1 tbody tr td:last-child {
    border-radius: 0 12px 12px 0;
}

@media (max-width: 700px) {
    .cardarcade-ui-btn,
    .cardarcade-toolbar .cardarcade-ui-btn {
        min-height: 34px !important;
        padding: 7px 10px !important;
        font-size: 13px !important;
    }

    .cardarcade-toolbar label {
        min-height: 34px;
        padding: 4px 9px;
    }
}

/* Card Arcade 0.3.0 extra games */
.cardarcade-simple-table {
    min-height: 330px;
    align-items: center;
    justify-content: center;
}
.cardarcade-simple-game {
    display: grid;
    gap: 18px;
    justify-items: center;
    width: 100%;
}
.cardarcade-simple-status {
    padding: 8px 18px;
    border-radius: 999px;
    background: rgba(0,0,0,.32);
    border: 1px solid rgba(255,255,255,.22);
    font-weight: 900;
    color: #fff;
}
.cardarcade-simple-cards {
    display: flex;
    gap: clamp(12px, 3vw, 28px);
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.cardarcade-mini-card {
    --card-w: clamp(68px, 8vw, 96px);
    --card-h: calc(var(--card-w) * 1.38);
    width: var(--card-w);
    height: var(--card-h);
}
.cardarcade-memory-grid {
    display: grid;
    grid-template-columns: repeat(4, clamp(58px, 7vw, 86px));
    gap: clamp(8px, 1.4vw, 14px);
    justify-content: center;
    align-items: center;
}
.cardarcade-memory-grid .cardarcade-mini-card {
    --card-w: clamp(58px, 7vw, 86px);
}
.cardarcade-mini-card.matched {
    opacity: .72;
    filter: saturate(.75);
    transform: scale(.96);
}
.cardarcade-simple-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}
@media (max-width: 620px) {
    .cardarcade-memory-grid {
        grid-template-columns: repeat(4, 52px);
    }
    .cardarcade-memory-grid .cardarcade-mini-card {
        --card-w: 52px;
    }
}


.cardarcade-rules {
    margin: 12px 0;
    border: 0;
    border-radius: 16px;
    background: linear-gradient(180deg, #f6fbff, #e8f2f7);
    box-shadow: 0 8px 22px rgba(0, 39, 24, .10);
}
.cardarcade-rules .inner { padding: 14px 18px; }
.cardarcade-rules h3 { margin: 0 0 6px; color: #064b2b; font-weight: 800; }
.cardarcade-rules p { margin: 0; color: #334; line-height: 1.45; }
.cardarcade-ui-btn-red {
    color: #fff !important;
    border-color: #a0162c !important;
    background: linear-gradient(180deg, #ef4b62, #9d1028) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 4px 0 #6f0d1d, 0 10px 16px rgba(0,0,0,.18) !important;
}
.cardarcade-ui-btn-black {
    color: #fff !important;
    border-color: #1b2b35 !important;
    background: linear-gradient(180deg, #3d515e, #111b22) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 4px 0 #070d11, 0 10px 16px rgba(0,0,0,.18) !important;
}
.cardarcade-simple-table { min-height: min(58vh, 560px); display: flex; align-items: center; justify-content: center; }
.cardarcade-simple-game { display: grid; gap: 18px; justify-items: center; align-content: center; }
.cardarcade-simple-cards { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; align-items: center; }
.cardarcade-simple-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.cardarcade-simple-status { color: #fff; font-weight: 800; background: rgba(0,0,0,.25); padding: 8px 16px; border-radius: 999px; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.cardarcade-suit-actions .cardarcade-ui-btn { min-width: 54px; font-size: 1.4em; padding-left: 14px; padding-right: 14px; }

/* Card Arcade 0.3.2: Premium glowing casino card theme */
.cardarcade-page {
	--ca-night: #080612;
	--ca-deep: #111b33;
	--ca-felt: #06463c;
	--ca-gold: #ffd76a;
	--ca-gold-dark: #c77b0a;
	--ca-cyan: #46ffe0;
	--ca-pink: #ff4fd8;
	--ca-purple: #8b5cff;
	--ca-border: rgba(255, 215, 106, .36);
	margin: 14px 0 22px;
	color: #fff7df;
}

.cardarcade-page *, .cardarcade-page *::before, .cardarcade-page *::after { box-sizing: border-box; }

.cardarcade-hero,
.cardarcade-board,
.cardarcade-leaderboard-page .cardarcade-hero,
.cardarcade-sideboard.panel,
.cardarcade-leaderboard-panel,
.cardarcade-rules {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--ca-border) !important;
	border-radius: 22px !important;
	background:
		radial-gradient(circle at 14% 8%, rgba(255, 79, 216, .24), transparent 30%),
		radial-gradient(circle at 86% 10%, rgba(70, 255, 224, .20), transparent 28%),
		radial-gradient(circle at 50% 115%, rgba(255, 215, 106, .16), transparent 44%),
		linear-gradient(145deg, rgba(8, 6, 18, .98), rgba(17, 27, 51, .96) 48%, rgba(6, 70, 60, .96)) !important;
	color: #fff7df !important;
	box-shadow: 0 18px 45px rgba(0, 0, 0, .36), 0 0 0 1px rgba(255,255,255,.045) inset, 0 0 34px rgba(70,255,224,.08), 0 0 38px rgba(255,79,216,.08) !important;
}

.cardarcade-hero::before,
.cardarcade-board::before,
.cardarcade-rules::before,
.cardarcade-sideboard.panel::before,
.cardarcade-leaderboard-panel::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
	background-size: 34px 34px;
	mask-image: radial-gradient(circle at center, #000 0%, transparent 92%);
}

.cardarcade-hero { padding: clamp(22px, 3vw, 34px) !important; text-align: center; }
.cardarcade-hero h2,
.cardarcade-board h2,
.cardarcade-leaderboard-hero h2,
.cardarcade-sideboard h3,
.cardarcade-rules h3 {
	position: relative;
	z-index: 1;
	color: #fff5cc !important;
	letter-spacing: .035em;
	text-shadow: 0 0 10px rgba(255,215,106,.55), 0 0 22px rgba(255,79,216,.24), 0 2px 0 rgba(0,0,0,.48) !important;
}
.cardarcade-hero p, .cardarcade-rules p { position: relative; z-index: 1; color: rgba(255,247,223,.84) !important; }

.cardarcade-grid { grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); gap: 18px; margin-top: 20px; }
.cardarcade-game-card {
	position: relative;
	overflow: hidden;
	min-height: 210px;
	padding: 20px 16px 16px;
	border: 1px solid rgba(255, 215, 106, .38) !important;
	border-radius: 22px;
	background: radial-gradient(circle at 18% 12%, rgba(255,79,216,.22), transparent 34%), radial-gradient(circle at 84% 8%, rgba(70,255,224,.20), transparent 32%), linear-gradient(160deg, rgba(24,20,54,.96), rgba(9,43,42,.94)) !important;
	box-shadow: 0 16px 30px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.05) inset, 0 0 24px rgba(255,79,216,.08);
	transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.cardarcade-game-card:hover { transform: translateY(-4px); border-color: rgba(255,215,106,.68) !important; box-shadow: 0 22px 38px rgba(0,0,0,.34), 0 0 24px rgba(70,255,224,.16), 0 0 26px rgba(255,79,216,.12); }
.cardarcade-game-shine { position: absolute; inset: -60% -40% auto auto; width: 150px; height: 280px; transform: rotate(32deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent); pointer-events: none; }
.cardarcade-game-icon {
	position: relative;
	z-index: 1;
	width: 78px;
	height: 78px;
	line-height: 78px;
	border: 1px solid rgba(255,215,106,.58);
	border-radius: 22px;
	background: radial-gradient(circle at 35% 25%, #fff4bd, #f7b638 55%, #b56508 100%) !important;
	color: #241100 !important;
	font-size: 42px;
	box-shadow: 0 0 18px rgba(255,215,106,.34), 0 8px 18px rgba(0,0,0,.28), inset 0 2px 0 rgba(255,255,255,.55);
}
.cardarcade-game-card h3 { position: relative; z-index: 1; color: #fff8df !important; margin: 14px 0 16px; text-shadow: 0 0 12px rgba(255,215,106,.35), 0 2px 0 rgba(0,0,0,.55); }
.cardarcade-card-actions { position: relative; z-index: 1; display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }

.cardarcade-toolbar {
	position: relative !important;
	top: auto !important;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 7px !important;
	flex-wrap: wrap;
	padding: 8px !important;
	margin: 0 0 12px !important;
	border: 1px solid rgba(255,215,106,.34) !important;
	border-radius: 18px !important;
	background: radial-gradient(circle at 20% 0%, rgba(255,79,216,.16), transparent 40%), linear-gradient(180deg, rgba(17,20,45,.96), rgba(9,14,31,.96)) !important;
	box-shadow: 0 10px 26px rgba(0,0,0,.24), 0 0 18px rgba(70,255,224,.06) !important;
}

.cardarcade-ui-btn,
.cardarcade-toolbar .cardarcade-ui-btn,
.cardarcade-toolbar button.cardarcade-ui-btn,
.cardarcade-card-actions .cardarcade-ui-btn {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 29px !important;
	height: 29px !important;
	padding: 0 10px !important;
	border-radius: 999px !important;
	border: 1px solid rgba(255,255,255,.18) !important;
	font-size: 11px !important;
	font-weight: 900 !important;
	line-height: 1 !important;
	letter-spacing: .035em;
	text-transform: uppercase;
	text-decoration: none !important;
	cursor: pointer;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.36), inset 0 -2px 0 rgba(0,0,0,.24), 0 3px 9px rgba(0,0,0,.26) !important;
	transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.cardarcade-ui-btn:hover:not(:disabled), .cardarcade-toolbar button.cardarcade-ui-btn:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.08) saturate(1.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.42), inset 0 -2px 0 rgba(0,0,0,.26), 0 0 12px rgba(255,215,106,.22), 0 5px 12px rgba(0,0,0,.30) !important; }
.cardarcade-ui-btn:active:not(:disabled), .cardarcade-toolbar button.cardarcade-ui-btn:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 2px 6px rgba(0,0,0,.28) !important; }
.cardarcade-ui-btn-green { color: #041915 !important; text-shadow: 0 1px 0 rgba(255,255,255,.35) !important; background: linear-gradient(180deg, #70ffe7, #19c59b 55%, #08775c) !important; }
.cardarcade-ui-btn-gold { color: #261400 !important; text-shadow: 0 1px 0 rgba(255,255,255,.55) !important; background: linear-gradient(180deg, #fff0a5, #ffc645 55%, #c97a08) !important; }
.cardarcade-ui-btn-purple { color: #fff !important; text-shadow: 0 1px 0 rgba(0,0,0,.35) !important; background: linear-gradient(180deg, #ff73e6, #b640ff 56%, #6519c8) !important; }
.cardarcade-ui-btn-red { color: #fff !important; background: linear-gradient(180deg, #ff7080, #e41e43 55%, #921027) !important; }
.cardarcade-ui-btn-black { color: #fff !important; background: linear-gradient(180deg, #546779, #1a2330 58%, #090d14) !important; }
.cardarcade-ui-btn:disabled, .cardarcade-toolbar button.cardarcade-ui-btn:disabled { opacity: .46; cursor: not-allowed; filter: grayscale(.35) saturate(.55); }

.cardarcade-toolbar label {
	display: inline-flex;
	align-items: center;
	gap: 6px !important;
	min-height: 29px !important;
	height: 29px !important;
	padding: 0 9px !important;
	border: 1px solid rgba(70,255,224,.22) !important;
	border-radius: 999px !important;
	background: rgba(5,10,26,.68) !important;
	color: #fff3c7 !important;
	font-size: 11px !important;
	font-weight: 900 !important;
	text-transform: uppercase;
	box-shadow: inset 0 0 12px rgba(70,255,224,.04) !important;
}
.cardarcade-toolbar select { min-height: 23px !important; height: 23px !important; padding: 0 22px 0 7px !important; border: 1px solid rgba(255,215,106,.45) !important; border-radius: 999px !important; background-color: #120d22 !important; color: #fff8de !important; font-size: 11px !important; font-weight: 800 !important; }

.cardarcade-board { padding: clamp(10px, 1.5vw, 18px) !important; min-height: min(560px, calc(100vh - 170px)) !important; max-height: none !important; }
.cardarcade-stats { position: relative; z-index: 1; width: auto; max-width: 100%; padding: 7px 14px !important; border: 1px solid rgba(255,215,106,.30); border-radius: 999px; background: rgba(5,10,26,.58) !important; color: #fff8de; box-shadow: 0 0 18px rgba(70,255,224,.07) inset; }
.cardarcade-stats strong { color: var(--ca-gold); text-shadow: 0 0 10px rgba(255,215,106,.35); }
.cardarcade-table { position: relative; z-index: 1; border-radius: 18px; background: radial-gradient(circle at 50% 18%, rgba(10,141,83,.34), rgba(5,50,48,.12) 52%, rgba(0,0,0,.10)), linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.12)); box-shadow: inset 0 0 28px rgba(0,0,0,.20); }
.cardarcade-solitaire-table, .cardarcade-freecell-table { --card-w: clamp(44px, min(5.35vw, 8.1vh), 72px); --card-step: clamp(19px, 2.85vh, 31px); max-height: none !important; overflow: auto !important; scrollbar-width: thin; }
.cardarcade-freecell-table { --card-w: clamp(40px, min(4.8vw, 7.6vh), 60px); }
.cardarcade-solitaire-column, .cardarcade-freecell-column, .cardarcade-blackjack-hand { border: 1px solid rgba(255,255,255,.08); background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(0,0,0,.12)) !important; box-shadow: inset 0 0 16px rgba(0,0,0,.18); }

.cardarcade-pro-card, .cardarcade-freecell-card, .cardarcade-blackjack-card, .cardarcade-card, .cardarcade-mini-card {
	border: 1px solid rgba(255,255,255,.72) !important;
	background: radial-gradient(circle at 70% 70%, rgba(255,255,255,.92), rgba(250,246,232,.98) 50%, rgba(221,211,188,.98) 100%) !important;
	color: #151624;
	box-shadow: 0 7px 16px rgba(0,0,0,.38), 0 0 0 1px rgba(0,0,0,.16) inset, inset 0 2px 0 rgba(255,255,255,.85) !important;
}
.cardarcade-pro-card:hover, .cardarcade-freecell-card:hover, .cardarcade-card:hover, .cardarcade-mini-card:hover { box-shadow: 0 10px 18px rgba(0,0,0,.42), 0 0 16px rgba(255,215,106,.25), inset 0 2px 0 rgba(255,255,255,.9) !important; }
.cardarcade-pro-card.red, .cardarcade-freecell-card.red, .cardarcade-card.red, .cardarcade-mini-card.red { color: #c41437 !important; }
.cardarcade-pro-card.back, .cardarcade-freecell-card.back, .cardarcade-card.back, .cardarcade-mini-card.back { color: #fff2b8 !important; background: radial-gradient(circle at 50% 45%, rgba(255,215,106,.28), transparent 34%), linear-gradient(135deg, rgba(255,255,255,.08) 0 12%, transparent 12% 24%, rgba(255,255,255,.06) 24% 36%, transparent 36%), linear-gradient(160deg, #2d165e, #0f7d6a 52%, #09071a) !important; border-color: rgba(255,215,106,.55) !important; }
.cardarcade-pro-slot, .cardarcade-slot { border: 2px dashed rgba(255,215,106,.44) !important; background: rgba(5,10,26,.38) !important; color: rgba(255,243,199,.72) !important; box-shadow: inset 0 0 18px rgba(70,255,224,.06); }
.cardarcade-pro-card.selected, .cardarcade-freecell-card.selected, .cardarcade-drop-ready { outline: 2px solid var(--ca-gold) !important; outline-offset: 2px; box-shadow: 0 0 0 3px rgba(255,215,106,.18), 0 0 18px rgba(255,215,106,.45) !important; }

.cardarcade-message { position: relative; z-index: 2; color: #fff8de !important; }
.cardarcade-message:not(:empty), .cardarcade-simple-status { border: 1px solid rgba(255,215,106,.30); background: rgba(5,10,26,.72) !important; color: #fff8de !important; box-shadow: 0 0 18px rgba(255,79,216,.10), inset 0 0 18px rgba(70,255,224,.05); }
.cardarcade-rules { margin: 14px 0 !important; }
.cardarcade-rules .inner, .cardarcade-sideboard .inner, .cardarcade-leaderboard-panel .inner { position: relative; z-index: 1; }
.cardarcade-rules h3::before { content: '♠ '; color: var(--ca-gold); }

.cardarcade-page .table1, .cardarcade-page .table1 th, .cardarcade-page .table1 td { color: #fff8de !important; }
.cardarcade-leaderboard-table, .cardarcade-sideboard .table1 { border-collapse: separate !important; border-spacing: 0 8px !important; background: transparent !important; }
.cardarcade-leaderboard-table thead th, .cardarcade-sideboard .table1 thead th { border: 0 !important; background: linear-gradient(180deg, rgba(255,215,106,.95), rgba(192,113,13,.96)) !important; color: #211100 !important; text-shadow: 0 1px 0 rgba(255,255,255,.35) !important; }
.cardarcade-leaderboard-table tbody td, .cardarcade-sideboard .table1 tbody td { border-top: 1px solid rgba(255,215,106,.20) !important; border-bottom: 1px solid rgba(255,215,106,.20) !important; background: rgba(7,12,30,.82) !important; color: #fff8de !important; box-shadow: 0 8px 16px rgba(0,0,0,.18) !important; }
.cardarcade-leaderboard-table tbody tr td:first-child, .cardarcade-sideboard .table1 tbody tr td:first-child { border-left: 1px solid rgba(255,215,106,.20) !important; color: var(--ca-gold) !important; }
.cardarcade-leaderboard-table tbody tr td:last-child, .cardarcade-sideboard .table1 tbody tr td:last-child { border-right: 1px solid rgba(255,215,106,.20) !important; }

.cardarcade-simple-table { min-height: min(58vh, 560px) !important; }
.cardarcade-memory-grid .cardarcade-mini-card, .cardarcade-mini-card { border-radius: clamp(8px, .9vw, 13px); }

@media (max-width: 900px) {
	.cardarcade-grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
	.cardarcade-ui-btn, .cardarcade-toolbar .cardarcade-ui-btn, .cardarcade-toolbar button.cardarcade-ui-btn, .cardarcade-card-actions .cardarcade-ui-btn { min-height: 28px !important; height: 28px !important; padding: 0 8px !important; font-size: 10px !important; }
}

@media (max-width: 700px) {
	.cardarcade-toolbar { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cardarcade-toolbar label { grid-column: 1 / -1; justify-content: space-between; width: 100%; }
	.cardarcade-card-actions { display: grid; grid-template-columns: 1fr; }
	.cardarcade-board { min-height: auto !important; }
	.cardarcade-solitaire-table, .cardarcade-freecell-table { --card-w: 42px; --card-step: 22px; }
}

/* Card Arcade 0.3.3 - premium selector grid + Spider Solitaire */
.cardarcade-page {
    --ca-bg: #070812;
    --ca-panel: rgba(12, 15, 32, .92);
    --ca-gold: #ffd66b;
    --ca-gold-2: #b87922;
    --ca-pink: #ff4fd8;
    --ca-cyan: #61f7ff;
    --ca-green: #0b7d50;
    --ca-red: #d53a3a;
}

.cardarcade-hero {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 214, 107, .55) !important;
    background:
        radial-gradient(circle at 12% 10%, rgba(255, 79, 216, .28), transparent 28%),
        radial-gradient(circle at 88% 0%, rgba(97, 247, 255, .22), transparent 30%),
        linear-gradient(135deg, #101229 0%, #070812 60%, #120617 100%) !important;
    box-shadow: 0 0 22px rgba(255, 214, 107, .18), inset 0 0 34px rgba(97, 247, 255, .06) !important;
}

.cardarcade-grid {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
    gap: 18px !important;
}

.cardarcade-game-card {
    position: relative;
    overflow: hidden;
    min-height: 190px;
    border: 1px solid rgba(255, 214, 107, .45) !important;
    background:
        linear-gradient(145deg, rgba(21, 25, 51, .98), rgba(8, 10, 24, .98)),
        radial-gradient(circle at 50% -20%, rgba(255, 214, 107, .35), transparent 45%) !important;
    border-radius: 22px !important;
    box-shadow: 0 14px 28px rgba(0, 0, 0, .32), inset 0 0 0 1px rgba(255, 255, 255, .04) !important;
    transform: translateZ(0);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.cardarcade-game-card:before {
    content: "";
    position: absolute;
    inset: -60% -30%;
    background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .13) 50%, transparent 58%);
    transform: translateX(-65%) rotate(12deg);
    transition: transform .45s ease;
    pointer-events: none;
}

.cardarcade-game-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 214, 107, .85) !important;
    box-shadow: 0 18px 36px rgba(0, 0, 0, .42), 0 0 24px rgba(255, 214, 107, .18) !important;
}

.cardarcade-game-card:hover:before {
    transform: translateX(65%) rotate(12deg);
}

.cardarcade-game-icon {
    position: relative;
    width: 76px !important;
    height: 96px !important;
    line-height: 96px !important;
    border-radius: 13px !important;
    color: var(--ca-gold) !important;
    background:
        radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .16), transparent 30%),
        linear-gradient(160deg, #1b203d, #090b18) !important;
    border: 1px solid rgba(255, 214, 107, .55);
    box-shadow: 0 0 18px rgba(255, 214, 107, .22), inset 0 0 24px rgba(255, 214, 107, .07) !important;
}

.cardarcade-game-card h3 {
    color: #fff5cc !important;
    text-shadow: 0 0 12px rgba(255, 214, 107, .35) !important;
}

.cardarcade-card-actions {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.cardarcade-ui-btn,
.cardarcade-ui-btn:link,
.cardarcade-ui-btn:visited,
.cardarcade-ui-btn:focus,
.cardarcade-ui-btn:active {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 5px 10px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: 700;
    letter-spacing: .02em;
    text-decoration: none !important;
    color: #fff7d2 !important;
    background: linear-gradient(180deg, #2a2440, #111524) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 214, 107, .35), 0 0 10px rgba(0, 0, 0, .28) !important;
    cursor: pointer;
}

.cardarcade-ui-btn:hover {
    color: #ffffff !important;
    background: linear-gradient(180deg, #3a2d55, #161b31) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 214, 107, .75), 0 0 14px rgba(255, 214, 107, .25) !important;
}

.cardarcade-ui-btn-gold { box-shadow: inset 0 0 0 1px rgba(255, 214, 107, .65), 0 0 12px rgba(255, 214, 107, .12) !important; }
.cardarcade-ui-btn-green { box-shadow: inset 0 0 0 1px rgba(97, 247, 255, .45), 0 0 12px rgba(97, 247, 255, .09) !important; }
.cardarcade-ui-btn-purple { box-shadow: inset 0 0 0 1px rgba(255, 79, 216, .45), 0 0 12px rgba(255, 79, 216, .09) !important; }

.cardarcade-spider-table {
    --card-w: clamp(36px, 5vw, 54px);
    --card-h: calc(var(--card-w) * 1.38);
    --card-step: clamp(20px, 3.1vh, 31px);
    --card-gap: clamp(3px, .65vw, 7px);
    display: block;
    width: 100%;
    min-height: 0;
    overflow-x: auto;
    padding: clamp(6px, 1vw, 10px);
    box-sizing: border-box;
}

.cardarcade-spider-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: clamp(10px, 2vh, 18px);
}

.cardarcade-spider-completed {
    min-width: 72px;
    padding: 8px 12px;
    border-radius: 999px;
    color: #fff7d2;
    background: rgba(5, 8, 18, .62);
    border: 1px solid rgba(255, 214, 107, .45);
    box-shadow: inset 0 0 20px rgba(255, 214, 107, .06);
    font-weight: 700;
}

.cardarcade-spider-stock {
    position: relative;
}

.cardarcade-spider-stock small {
    position: absolute;
    right: 5px;
    bottom: 4px;
    color: #fff7d2;
    font-size: 11px;
}

.cardarcade-spider-columns {
    display: grid;
    grid-template-columns: repeat(10, minmax(var(--card-w), 1fr));
    gap: var(--card-gap);
    align-items: start;
    min-width: calc((var(--card-w) * 10) + (var(--card-gap) * 9));
}

.cardarcade-spider-column {
    min-height: calc(var(--card-h) + (var(--card-step) * 8));
    border-radius: 12px;
    padding: 3px;
    background: rgba(0, 0, 0, .13);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
}

.cardarcade-spider-column .cardarcade-pro-card {
    position: relative;
    width: var(--card-w);
    height: var(--card-h);
    margin: 0 auto calc(var(--card-step) - var(--card-h));
}

.cardarcade-spider-column .cardarcade-pro-card:last-child,
.cardarcade-spider-top .cardarcade-pro-card {
    margin-bottom: 0;
}

.cardarcade-spider-column .cardarcade-card.selected {
    outline: 2px solid var(--ca-gold) !important;
    transform: translateY(-2px);
}

@media (max-width: 900px) {
    .cardarcade-spider-table {
        --card-w: clamp(32px, 8vw, 44px);
        --card-step: clamp(18px, 2.8vh, 26px);
    }

    .cardarcade-ui-btn,
    .cardarcade-ui-btn:link,
    .cardarcade-ui-btn:visited {
        padding: 4px 8px !important;
        font-size: 10px !important;
    }
}

/* Card Arcade sound/animation polish */
@keyframes cardarcade-card-enter {
    from { opacity: 0; transform: translateY(8px) scale(.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes cardarcade-card-move {
    0% { transform: translateY(0) scale(1); filter: brightness(1); }
    45% { transform: translateY(-4px) scale(1.035); filter: brightness(1.12); }
    100% { transform: translateY(0) scale(1); filter: brightness(1); }
}

@keyframes cardarcade-card-flip {
    0% { transform: rotateY(0deg) scale(1); filter: brightness(1); }
    45% { transform: rotateY(72deg) scale(1.04); filter: brightness(1.18); }
    100% { transform: rotateY(0deg) scale(1); filter: brightness(1); }
}

@keyframes cardarcade-table-win {
    0%, 100% { box-shadow: inset 0 0 80px rgba(255, 215, 95, .08), 0 0 0 rgba(255, 215, 95, 0); }
    50% { box-shadow: inset 0 0 110px rgba(255, 215, 95, .24), 0 0 34px rgba(255, 215, 95, .42); }
}

@keyframes cardarcade-table-lose {
    0%, 100% { filter: saturate(1); }
    35% { filter: saturate(.6) brightness(.82); }
}

.cardarcade-card-enter {
    animation: cardarcade-card-enter .18s ease-out both;
}

.cardarcade-card.cardarcade-anim-move,
.cardarcade-slot.cardarcade-anim-move {
    animation: cardarcade-card-move .24s ease-out both;
}

.cardarcade-card.cardarcade-anim-flip,
.cardarcade-slot.cardarcade-anim-flip {
    animation: cardarcade-card-flip .28s ease-out both;
    transform-style: preserve-3d;
}

.cardarcade-table.cardarcade-anim-move {
    box-shadow: inset 0 0 70px rgba(255, 255, 255, .045), 0 0 18px rgba(97, 247, 255, .12);
}

.cardarcade-table.cardarcade-anim-flip {
    box-shadow: inset 0 0 80px rgba(255, 214, 107, .07), 0 0 20px rgba(255, 214, 107, .16);
}

.cardarcade-table.cardarcade-anim-win {
    animation: cardarcade-table-win .9s ease-in-out 2;
}

.cardarcade-table.cardarcade-anim-lose {
    animation: cardarcade-table-lose .45s ease-in-out 1;
}

/* In-table restart button for Blackjack end state */
.cardarcade-blackjack-restart {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 160px;
    font-weight: 700;
    box-shadow: 0 0 18px rgba(255, 214, 107, .22);
}