@property --swipe-split { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
.game-swipe { --swipe-progress: 0; --swipe-split: 50%; --swipe-color-0: #455163; --swipe-color-1: #737e90; }
.game-swipe.match-market-card, .game-swipe .game-swipe__arena {
    background: linear-gradient(90deg, var(--swipe-color-0) 0%, var(--swipe-color-0) calc(var(--swipe-split) - 3px), var(--swipe-color-1) calc(var(--swipe-split) + 3px), var(--swipe-color-1) 100%);
    background-size: 160% 160%; background-position: calc(50% + var(--swipe-progress) * 25%) 50%;
    position: relative; isolation: isolate;
}
.game-swipe.match-market-card > .market-mini-card__background { background: linear-gradient(#080e1be0, #080e1b88); }
.game-swipe .game-swipe__arena { border-radius: var(--radius-card, 20px); padding: 16px; box-shadow: inset 0 0 0 100vmax #080e1b99; }
.game-swipe { transition: --swipe-split 280ms ease, background-position 280ms ease; }
.game-swipe--dragging { transition: none; }
.game-swipe [data-swipe-team] { flex-grow: var(--swipe-weight, 1); transform: scale(var(--swipe-scale, 1)); opacity: var(--swipe-opacity, 1); transition: transform 280ms cubic-bezier(.2,.8,.3,1.2), opacity 200ms, flex-grow 200ms; min-width: 0; }
.game-swipe--dragging [data-swipe-team] { transition: none; }
.game-swipe [data-swipe-control][hidden] { display: none; }
.game-swipe__control { width: 100%; grid-column: 1 / -1; text-align: center; padding: 8px 0; }
.game-swipe__hint, .game-swipe__feedback { font-size: .8rem; color: #fff; margin: 4px 8px 8px; }
.game-swipe__track { margin: 8px 28px; height: 48px; position: relative; border: 1px solid #ffffff80; border-radius: 999px; background: #080e1b80; }
.game-swipe__handle { display: grid; place-items: center; width: 48px; height: 48px; position: absolute; top: -1px; left: calc(50% - 24px); transform: translateX(var(--swipe-offset, 0px)); border: 2px solid #fff; border-radius: 50%; background: #152038; color: #fff; font-size: 26px; transition: transform 280ms cubic-bezier(.2,.8,.3,1.2); }
.game-swipe--dragging .game-swipe__handle { transition: none; }
.game-swipe--armed .game-swipe__track { outline: 3px solid var(--color-primary, #e8ff00); outline-offset: 3px; }
.game-swipe--armed, .game-swipe--dragging { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.game-swipe--dragging .game-swipe__track { display: block; }
.game-swipe__control--saved .game-swipe__track { display: none; }
.game-swipe--dragging .game-swipe__control--saved .game-swipe__track, .game-swipe--armed .game-swipe__control--saved .game-swipe__track { display: block; }
.game-swipe--dragging .game-swipe__control button, .game-swipe--pending .game-swipe__control button { visibility: hidden; }
.game-swipe--pending .game-swipe__handle { opacity: .5; }
.game-swipe__control .ds-button { width: 100%; }
.game-swipe__arena img, .game-swipe.match-market-card img { -webkit-user-drag: none; }
@media (prefers-reduced-motion: reduce) { .game-swipe *, .game-swipe *::before, .game-swipe *::after { transition: none !important; animation: none !important; } }
/* Override the existing opaque arena layer only for the enhanced gesture card. */
html body .game-swipe.match-market-card > .match-market-card__background {
    background: linear-gradient(#080e1bb0, #080e1b80); filter: none;
}
html body .game-swipe.match-market-card .match-market-card__content { display: flex; flex-direction: column; gap: 10px; }
html body .game-swipe.match-market-card .match-market-card__matchup-zone { width: 100%; }
html body .game-swipe.match-market-card .match-market-card__status-zone { width: 100%; align-items: center; }
.game-swipe .match-market-card__teams { grid-template-columns: minmax(0, var(--swipe-left, 1fr)) auto minmax(0, var(--swipe-right, 1fr)); }
.option-pick--game .game-swipe .game-swipe__arena { grid-template-columns: minmax(0, var(--swipe-left, 1fr)) minmax(0, var(--swipe-right, 1fr)); }
.game-swipe__control--saved:not(:has(button:enabled)) .game-swipe__hint { display: block; }
@media (prefers-reduced-motion: reduce) { .game-swipe { transition: none !important; } }
/* UX-177 owner iteration: visible two-team gauge and on-card confirmation. */
.game-swipe .game-swipe__track {
    height: 58px; margin: 8px 12px;
    background: linear-gradient(90deg, var(--swipe-color-0) 0%, var(--swipe-color-0) calc(var(--swipe-split) - 3px), var(--swipe-color-1) calc(var(--swipe-split) + 3px), var(--swipe-color-1) 100%);
    box-shadow: inset 0 0 0 1px #fff6, 0 4px 22px #0008;
}
.game-swipe__handle { top: 4px; box-shadow: 0 0 18px #ffffff70; }
.game-swipe__edge { position: absolute; inset-block: 0; width: calc(50% - 24px); display: flex; align-items: center; justify-content: center; line-height: 1; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: white; text-shadow: 0 1px 4px #000, 0 0 4px #000; font-size: .7rem; font-weight: 800; pointer-events: none; }
.game-swipe__edge--left { left: 8px; width: max(0px, calc(var(--swipe-split) - 40px)); }
.game-swipe__edge--right { right: 8px; width: max(0px, calc(100% - var(--swipe-split) - 40px)); }
.game-swipe .game-swipe__arena { box-shadow: inset 0 0 0 100vmax #080e1b35; }
.game-swipe.match-market-card, .game-swipe .game-swipe__arena {
    background-size: 100% 100%;
    background-image: linear-gradient(90deg, var(--swipe-color-0) 0%, var(--swipe-color-0) calc(var(--swipe-split) - 3px), var(--swipe-color-1) calc(var(--swipe-split) + 3px), var(--swipe-color-1) 100%);
}
html body .game-swipe.match-market-card > .match-market-card__background { background: linear-gradient(#080e1b80, #080e1b40); }
.game-swipe__review { grid-column: 1 / -1; text-align: center; width: 100%; padding: 12px 8px; }
.game-swipe__review[hidden] { display: none; }
.game-swipe__review-state { display: block; font-size: .75rem; font-weight: 800; }
.game-swipe__review-choice { display: block; font-size: 1.8rem; margin: 10px 0; }
.game-swipe__review p { font-size: .95rem; line-height: 1.5; margin: 8px 0; }
html[data-app-theme] body.arcade-page .game-swipe.game-swipe--review.match-market-card { background: #f5d938; border: 2px solid #ffe976; border-radius: 28px; color: #141820; }
html[data-app-theme] body.arcade-page .game-swipe.game-swipe--review.match-market-card > .match-market-card__background { background: none; }
html[data-app-theme] body.arcade-page .game-swipe.game-swipe--review.match-market-card :is(.match-market-card__time, .game-swipe__review, .game-swipe__review p) { color: #141820; }
.game-swipe--review .match-market-card__status-zone, .game-swipe--review .match-market-card__teams, .game-swipe--review .game-swipe__hint, .game-swipe--review .game-swipe__track, .game-swipe--guest-preview .match-market-card__pick-form { display: none !important; }
.game-swipe--review .match-market-card__team { display: none; }
html[data-app-theme] body.arcade-page .game-swipe.game-swipe--review.match-market-card .match-market-card__primary { background: #141820; color: #fff; border: 2px solid #141820; box-shadow: none; min-height: 48px; }
.game-swipe--published .game-swipe__control { display: none; }
.game-swipe--published .match-market-card__status-zone { display: none !important; }
.game-swipe--published { cursor: pointer; }
.game-swipe--published .game-swipe__review { color: white; text-shadow: 0 1px 4px #000; }
.game-swipe__stage { position: relative; border-radius: 20px; overflow: hidden; }
.game-swipe__stage .game-swipe__control--saved { position: absolute; bottom: 12px; left: 12px; right: 12px; width: auto; background: #080e1bc9; padding: 8px; border-radius: 14px; z-index: 3; }
.game-swipe__stage .game-swipe__control--saved :is(.game-swipe__hint, .game-swipe__track) { display: none; }
.game-swipe__stage .game-swipe__control--saved .game-swipe__feedback:empty { display: none; }
.game-swipe--chosen .game-swipe__stage .game-swipe__arena { padding-bottom: 92px; min-height: 290px; }
.game-swipe__stage .game-swipe__arena { margin: 0; }
.game-swipe__stage .game-swipe__control:not(.game-swipe__control--saved) { background: #111725; }
@media (max-width: 640px) {
    .option-pick--game:has(.game-swipe) .option-pick__confirmation { padding: 10px; }
    .option-pick--game:has(.game-swipe) .option-pick__confirmation p { margin: 4px 0; font-size: .8rem; }
    .game-swipe__stage .game-swipe__arena .option-pick__art img { height: clamp(100px, 32vw, 160px); }
}
.game-swipe__review-art { display: block; }
.game-swipe__review-art img { width: 92px; height: 80px; object-fit: contain; }
.game-swipe--published .match-market-card__teams { display: none; }

html[data-app-theme] body.arcade-page .game-swipe.match-market-card:not(.game-swipe--review) {
    background: linear-gradient(90deg, var(--swipe-color-0) 0%, var(--swipe-color-0) calc(var(--swipe-split) - 3px), var(--swipe-color-1) calc(var(--swipe-split) + 3px), var(--swipe-color-1) 100%);
}
html[data-app-theme] body.arcade-page .game-swipe .game-swipe__review-art { display: flex; justify-content: center; width: 100%; }
html[data-app-theme] body.arcade-page .game-swipe .game-swipe__review-art img { display: block; margin-inline: auto; }
html[data-app-theme] body.arcade-page .game-swipe.game-swipe--review .match-market-card__secondary { color: #141820; text-decoration-color: currentColor; }
/* Compact the enhanced card; native choice buttons stay available to keyboard/AT and without JS. */
.game-swipe.match-market-card .match-market-card__pick-form {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.game-swipe.match-market-card .match-market-card__pick-form:focus-within {
    position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; white-space: normal;
}
.game-swipe--pressed .game-swipe__handle, .game-swipe--armed .game-swipe__handle {
    background: #ffe600; border-color: #fff3a6; color: #141820; box-shadow: 0 0 18px #ffe60080;
}
.game-swipe .game-swipe__review .game-swipe__result-date { margin: 0 0 8px; font-size: .75rem; line-height: 1.4; }
.game-swipe__result-date time { font-weight: 750; white-space: normal; }
/* Published cards open as a whole; retain the native link for keyboard/AT without a second large CTA. */
.game-swipe--published.match-market-card .match-market-card__primary {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.game-swipe--published.match-market-card .match-market-card__primary:focus-visible {
    position: static; width: auto; height: auto; padding: 8px; margin: 0;
    overflow: visible; clip-path: none; white-space: normal;
}
/* Review already carries the labeled match/result date; do not reserve a duplicate date row. */
html[data-app-theme] body.arcade-page .game-swipe:is(.game-swipe--review, .game-swipe--published) .match-market-card__meta { display: none; }
.game-swipe__control .game-swipe__feedback:empty { display: none; }

/* Keep swipe cards dense while preserving separation and the full-size handle. */
html[data-app-theme] body.arcade-page .game-swipe.match-market-card { padding: 8px; min-height: 0; }
html body .game-swipe.match-market-card .match-market-card__content { gap: 4px; min-height: 0; }
.game-swipe.match-market-card .match-market-card__status-zone { padding: 0; gap: 2px; }
.game-swipe.match-market-card .match-market-card__actions { gap: 4px; }
.game-swipe.match-market-card .game-swipe__control { padding: 2px 0; }
.game-swipe.match-market-card .game-swipe__hint { margin: 2px 0 6px; }
.game-swipe.match-market-card .game-swipe__track { margin: 6px; }
.game-swipe.match-market-card .game-swipe__review { padding: 4px 0; }
.game-swipe.match-market-card .game-swipe__review-choice { margin: 4px 0; }
.game-swipe.match-market-card .game-swipe__review p { margin-block: 4px; }
.game-swipe.match-market-card .match-market-card__secondary-actions { margin: 0; padding: 0; }