:root {
    --df-navy: #0d3852;
    --df-deep: #20234c;
    --df-deeper: #11183c;
    --df-green: #99ca35;
    --df-green-soft: #cde7a0;
    --df-panel: #a9adb9;
    --df-cream: #f4f2e9;
    --df-white: #ffffff;
    --df-red: #ef0035;
    --df-pink: #b6004d;
    --df-shadow: 0 18px 38px rgba(9, 21, 42, 0.28);
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
}

body.df-page {
    margin: 0;
    min-height: 100vh;
    color: var(--df-navy);
    font-family: "Futura PT", Raleway, Arial, sans-serif;
    overflow: hidden;
}

.df-asset-preload {
    position: fixed;
    inset: 0;
    z-index: 9990;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(13, 56, 82, 0.76);
    backdrop-filter: blur(2px);
}

.df-asset-preload__panel {
    width: min(560px, 92vw);
    padding: 28px 32px;
    border: 3px solid var(--df-green);
    background: rgba(10, 31, 49, 0.94);
    color: var(--df-white);
    text-align: center;
}

.df-asset-preload__panel strong {
    display: block;
    margin-bottom: 14px;
    font-size: clamp(20px, 2vw, 30px);
    text-transform: uppercase;
}

.df-asset-preload__bar {
    position: relative;
    width: 100%;
    height: 16px;
    border: 2px solid var(--df-white);
    background: rgba(255, 255, 255, 0.12);
    overflow: hidden;
}

.df-asset-preload__bar > span {
    display: block;
    height: 100%;
    background: var(--df-green);
    transition: width 180ms linear;
}

.df-asset-preload__panel small {
    display: block;
    margin-top: 10px;
    font-size: clamp(16px, 1.35vw, 22px);
    font-weight: 700;
}

body.df-assets-loading .df-scale-stage {
    pointer-events: none;
    user-select: none;
}

.df-scale-stage {
    position: relative;
    z-index: 1;
    width: 100vw;
    height: 100vh;
    height: 100svh;
    height: 100dvh;
    overflow: hidden;
}

.df-scale-frame {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1920px;
    height: 1080px;
    transform: translate(-50%, -50%) scale(var(--df-content-scale, 1));
    transform-origin: center center;
}

body.df-dark {
    background: url("../img/blue-bg.png") no-repeat center center;
    background-size: cover;
}

body.df-light {
    background: var(--df-cream);
}

a {
    color: inherit;
}

button,
input,
select {
    font: inherit;
}

button {
    cursor: pointer;
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.df-header {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(28px, 5vw, 92px);
    min-height: clamp(88px, 12vh, 145px);
    padding: clamp(16px, 3vh, 34px) 5.5vw 0;
}

.df-header-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(6px, 1.2vh, 10px);
    width: 100%;
    max-width: 1600px;
}

.df-title {
    width: 100%;
    max-width: 1600px;
}

.df-game-nav__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
}

body.df-board-page .df-game-nav,
body.df-dashboard .df-game-nav {
    flex-direction: row;
    align-items: center;
}

body.df-board-page .df-game-nav__toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    width: 100%;
    gap: clamp(6px, 2vw, 14px);
}

body.df-board-page .df-game-nav__toolbar .df-game-menu {
    justify-self: start;
    display: flex;
    align-items: center;
    max-width: 100%;
}

body.df-board-page .df-game-nav__toolbar .df-game-score {
    justify-self: center;
    align-self: center;
    grid-column: 2;
    position: relative;
    z-index: 1;
    margin: 0;
    transform: none;
    max-width: min(52vw, 280px);
    white-space: nowrap;
    box-sizing: border-box;
    height: 58px;
    min-height: 58px;
    max-height: 58px;
    padding: 0 clamp(14px, 2vw, 24px);
    border-width: 4px;
    border-radius: 16px;
}

body.df-board-page .df-game-nav__toolbar .df-nav-exit-btn {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    height: 58px;
    min-height: 58px;
    box-sizing: border-box;
}

body.df-board-page .df-game-score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35em;
    margin: 0;
    padding: 0 clamp(14px, 2vw, 24px);
    height: 58px;
    min-height: 58px;
    max-height: 58px;
    border: 4px solid var(--df-green);
    border-radius: 16px;
    background: var(--df-green);
    color: var(--df-navy);
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: none;
    box-sizing: border-box;
}

body.df-board-page .df-game-score strong {
    flex: 0 0 auto;
    color: var(--df-navy);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

body.df-board-page .df-game-score__label {
    flex: 0 0 auto;
}

body.df-game-screen .df-game-nav {
    flex-direction: row;
    align-items: center;
    gap: 0;
}

body.df-game-screen .df-game-nav__toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    width: 100%;
    gap: clamp(6px, 2vw, 14px);
}

body.df-game-screen .df-game-nav__toolbar .df-game-menu {
    justify-self: start;
    display: flex;
    align-items: center;
    max-width: 100%;
}

body.df-game-screen .df-game-nav__toolbar .df-game-score {
    justify-self: center;
    align-self: center;
    grid-column: 2;
    position: relative;
    z-index: 1;
    margin: 0;
    transform: none;
    max-width: min(52vw, 280px);
    white-space: nowrap;
    box-sizing: border-box;
    height: 58px;
    min-height: 58px;
    max-height: 58px;
    padding: 0 clamp(14px, 2vw, 24px);
    border-width: 4px;
    border-radius: 16px;
}

body.df-game-screen .df-game-nav__toolbar .df-nav-exit-btn {
    justify-self: end;
    grid-column: 3;
    display: inline-flex;
    align-items: center;
    height: 58px;
    min-height: 58px;
    box-sizing: border-box;
}

body.df-game-screen .df-game-score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35em;
    width: auto;
    max-width: min(100%, 360px);
    margin: 0;
    border: 4px solid var(--df-green);
    border-radius: 0;
    background: var(--df-green);
    color: var(--df-navy);
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    text-align: center;
    text-transform: none;
    pointer-events: none;
    box-shadow: none;
}

body.df-game-screen .df-game-score strong {
    flex: 0 0 auto;
    color: var(--df-navy);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

body.df-game-screen .df-game-score__label {
    flex: 0 0 auto;
    position: relative;
    z-index: 1;
}

body.df-game-screen .df-game-score.is-updating strong {
    animation: df-game-score-pop 0.5s cubic-bezier(0.22, 1.12, 0.36, 1) both;
}

@keyframes df-game-score-pop {
    0% {
        transform: scale(1);
    }

    40% {
        transform: scale(1.14);
    }

    100% {
        transform: scale(1);
    }
}

.df-brand {
    flex: 0 0 auto;
    color: inherit;
    font-size: clamp(34px, 3.2vw, 56px);
    font-weight: 400;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}

.df-brand strong {
    font-weight: 700;
}

.df-header-line {
    position: relative;
    display: block;
    width: min(31vw, 490px);
    height: 3px;
    background: currentColor;
    border-radius: 999px;
}

.df-header-line::before {
    content: "";
    position: absolute;
    top: -1px;
    width: 165px;
    height: 4px;
    background: currentColor;
    border-radius: 999px;
}

.df-header-line::after {
    content: "";
    position: absolute;
    top: -1px;
    width: 18px;
    height: 22px;
    background: currentColor;
    transform: skewX(15deg);
}

.df-header-line-left::before {
    left: 0;
}

.df-header-line-left::after {
    left: 150px;
}

.df-header-line-right::before {
    right: 0;
}

.df-header-line-right::after {
    right: 150px;
}

.df-dark .df-header {
    color: var(--df-white);
}

.df-main {
    position: relative;
    z-index: 1;
}

.message {
    position: fixed;
    top: 16px;
    left: 50%;
    z-index: 20;
    min-width: min(520px, calc(100vw - 28px));
    padding: 14px 18px;
    border: 2px solid var(--df-navy);
    background: var(--df-white);
    color: var(--df-navy);
    box-shadow: var(--df-shadow);
    text-align: center;
    font-weight: 700;
    transform: translateX(-50%);
}

.df-primary-btn,
.df-outline-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 290px;
    min-height: 76px;
    padding: 16px 28px;
    border: 4px solid var(--df-navy);
    background: var(--df-green);
    color: var(--df-navy);
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    font-size: clamp(20px, 1.5vw, 30px);
    font-weight: 800;
    line-height: 1;
    z-index: 1;
    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        background 180ms ease;
}

.df-primary-btn:hover,
.df-primary-btn:focus-visible,
.df-outline-btn:hover,
.df-outline-btn:focus-visible {
    background: #b2df52;
    box-shadow: 0 12px 0 rgba(13, 56, 82, 0.2);
    transform: translateY(-4px);
}

.df-primary-btn:active,
.df-outline-btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.df-outline-btn {
    min-width: 176px;
    min-height: 58px;
    border-color: var(--df-green);
    background: transparent;
    color: var(--df-white);
    font-size: 22px;
}

.df-game-nav {
    position: relative;
    padding: 0 8%;
    z-index: 50;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
}

.df-game-nav a,
.df-game-nav button,
.df-game-nav .df-game-menu,
.df-game-nav .df-game-menu__panel,
.df-game-nav .df-game-menu__item {
    pointer-events: auto;
}

.df-home-stage,
.df-login-stage {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(360px, 0.85fr) minmax(520px, 1.35fr);
    align-items: center;
    min-height: calc(100vh - 145px);
    padding: 2vh 0 2vh 8.5vw;
    overflow: visible;
}

.df-home-copy {
    position: relative;
    z-index: 2;
    max-width: 650px;
}

.df-kicker {
    margin: 0;
    font-size: clamp(42px, 3.2vw, 58px);
    line-height: 1.08;
}

.df-home-copy h1 {
    margin: 8px 0 26px;
    font-size: clamp(54px, 4vw, 76px);
    font-weight: 400;
    line-height: 1.02;
    text-transform: uppercase;
}

.df-home-copy h1 strong {
    font-weight: 700;
}

.df-subtitle {
    margin: 0 0 44px;
    font-size: clamp(30px, 2.1vw, 42px);
    line-height: 1.08;
}

.df-actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.df-home .df-actions-row {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 12px;
    width: min(100%, 360px);
    max-width: 100%;
}

.df-home .df-actions-row .df-primary-btn {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.df-hero-mark {
    position: absolute;
    right: 0;
    bottom: var(--df-hero-bottom, -20%);
    align-self: stretch;
    width: 70%;
    max-width: 1344px;
    color: var(--df-navy);
    pointer-events: none;
    transform: translateX(var(--df-hero-bleed, 20%));
    transform-origin: right center;
}

.df-fiat-art-picture,
.df-fiat-art-picture .df-fiat-art,
.df-hero-mark img {
    display: block;
    width: 100%;
    height: 100%;
}

.df-fiat-art-picture .df-fiat-art,
.df-hero-mark img {
    object-fit: contain;
    object-position: right center;
}

.df-big-five,
.df-big-zero {
    position: absolute;
    z-index: 1;
    font-weight: 700;
    line-height: 0.78;
}

.df-big-five {
    top: 12%;
    left: 4%;
    font-size: clamp(460px, 41vw, 760px);
}

.df-big-zero {
    top: 18%;
    left: 43%;
    width: min(32vw, 520px);
    aspect-ratio: 1;
    border: clamp(68px, 6.6vw, 110px) solid var(--df-navy);
    border-radius: 50%;
}

.df-big-zero span {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(50px, 4vw, 76px);
    text-transform: uppercase;
}

.df-orbit-text {
    position: absolute;
    left: 5%;
    bottom: 22%;
    z-index: 2;
    font-size: 20px;
    transform: rotate(-17deg);
}

.df-login-stage {
    grid-template-columns: minmax(520px, 0.9fr) minmax(520px, 1.2fr);
    padding-left: 7.5vw;
    padding-bottom: max(64px, 2vh);
}

.df-login-card {
    width: min(660px, 42vw);
    height: fit-content;
    border: 22px solid var(--df-navy);
    border-radius: 40px;
    background: var(--df-navy);
    box-shadow: var(--df-shadow);
}

.df-login-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: fit-content;
    padding: clamp(28px, 3vw, 78px);
    border: 12px solid var(--df-white);
    border-radius: 30px;
}

.df-login .df-form label,
.df-login-help {
    color: var(--df-white);
}

.df-login-btn {
    align-self: center;
    margin-top: 30px;
}

.df-login-help {
    margin: 24px 0 0;
    text-align: center;
    font-size: 27px;
}

.df-login-disclaimer {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 25;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 10px clamp(18px, 4vw, 72px);
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    background: rgba(13, 56, 82, 0.92);
    color: var(--df-white);
    text-align: center;
    font-size: clamp(11px, 0.72vw, 14px);
    line-height: 1.25;
}

body.df-login:not(.df-portrait-flow) .df-scale-stage {
    height: calc(100dvh - var(--df-disclaimer-height, 0px));
    max-height: calc(100dvh - var(--df-disclaimer-height, 0px));
}

.df-panel {
    width: min(72vw, 1380px);
    min-height: min(68vh, 730px);
    margin: 16px auto 0;
    padding: 24px;
    border-radius: 40px;
    background: linear-gradient(112deg, #a4d041 0%, #d4e9ad 100%);
    color: var(--df-navy);
    box-shadow: 0 28px 0 rgba(17, 38, 53, 0.18);
}

.df-panel-inner {
    min-height: calc(min(68vh, 730px) - 48px);
    padding: clamp(34px, 1vw, 78px);
    border: 12px solid var(--df-white);
    border-radius: 30px;
}

.df-centered-copy {
    text-align: center;
}

.df-centered-copy h3,
.df-step-title h3 {
    margin: 0 0 12px;
    font-size: clamp(35px, 1.8vw, 54px);
    font-weight: 600;
    line-height: 1.03;
}

.df-centered-copy p {
    margin: 8px 0;
    font-size: clamp(24px, 1.7vw, 33px);
    line-height: 1.18;
}

.df-form {
    width: 100%;
}

.df-register-form,
.df-access-form,
.df-terms-form {
    max-width: 970px;
    margin: 26px auto 0;
}

.df-form label {
    display: block;
    margin: 0 0 12px;
    color: var(--df-navy);
    font-size: clamp(22px, 1.5vw, 30px);
    line-height: 1;
}

.df-input,
.df-form input[type="text"],
.df-form input[type="password"],
.df-form select {
    width: 100%;
    height: 64px;
    margin: 0 0 32px;
    padding: 0 26px;
    border: 0;
    border-radius: 0;
    background: var(--df-white);
    color: var(--df-navy);
    font-size: clamp(22px, 1.45vw, 28px);
    outline: 0;
    transition:
        box-shadow 180ms ease,
        transform 180ms ease;
}

.df-input:focus,
.df-form input:focus,
.df-form select:focus {
    box-shadow: 0 0 0 4px rgba(13, 56, 82, 0.24);
    transform: translateY(-1px);
}

.df-input::placeholder {
    color: #98a8b7;
}

.df-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 44px;
}

.df-password-field {
    position: relative;
    margin-bottom: 32px;
}

.df-password-field input {
    padding-right: 68px;
}

.df-form .df-password-field input {
    margin-bottom: 0;
}

.df-eye-btn {
    position: absolute;
    top: 32%;
    right: 16px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background-color: var(--df-navy);
    -webkit-mask-image: url("../img/eva-icons/fill/svg/eye.svg");
    mask-image: url("../img/eva-icons/fill/svg/eye.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 32px 32px;
    mask-size: 32px 32px;
    transform: translateY(-50%);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.df-eye-btn.is-revealed {
    -webkit-mask-image: url("../img/eva-icons/fill/svg/eye-off.svg");
    mask-image: url("../img/eva-icons/fill/svg/eye-off.svg");
}

.df-eye-btn:hover {
    background-color: var(--df-green);
}

.df-eye-btn:focus-visible {
    outline: 2px solid var(--df-navy);
    outline-offset: 2px;
}

.df-form-submit {
    display: flex;
    margin: 30px auto 0;
}

.df-access-grid {
    display: grid;
    grid-template-columns: minmax(360px, 1fr) minmax(340px, 1fr);
    gap: 90px;
    align-items: center;
    margin-top: 90px;
}

.df-select-wrap {
    position: relative;
}

.df-select-wrap::after {
    content: "";
    position: absolute;
    top: 32px;
    right: 24px;
    width: 32px;
    height: 32px;
    background: var(--df-navy);
    -webkit-mask: url("../img/eva-icons/outline/svg/arrow-ios-downward-outline.svg")
        center / contain no-repeat;
    mask: url("../img/eva-icons/outline/svg/arrow-ios-downward-outline.svg")
        center / contain no-repeat;
    transform: translateY(-50%);
    pointer-events: none;
}

.df-select-wrap select {
    appearance: none;
    padding-right: 78px;
    font-weight: 700;
}

.df-access-actions {
    text-align: center;
}

.df-access-actions p {
    margin: 88px 0 0;
    font-size: 25px;
}

.df-terms-box {
    max-height: 236px;
    overflow: auto;
    padding: 20px 40px;
    background: var(--df-white);
    color: #070707;
    font-size: 18px;
    line-height: 1.2;
}

.df-terms-box::-webkit-scrollbar {
    width: 16px;
}

.df-terms-box::-webkit-scrollbar-track {
    background: #eeeade;
    border-radius: 99px;
}

.df-terms-box::-webkit-scrollbar-thumb {
    background: var(--df-navy);
    border-radius: 99px;
}

.df-checkbox-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    margin: 34px 0 0;
    font-weight: 700;
}

.df-checkbox-line input {
    width: 36px;
    height: 36px;
    margin: 0;
    accent-color: var(--df-navy);
}

.df-message-copy,
.df-support-copy {
    max-width: 1120px;
    margin: 0 auto;
}

.df-message-copy h1,
.df-support-copy h1 {
    margin: 0 0 54px;
    font-size: clamp(42px, 3.4vw, 62px);
    line-height: 1.05;
}

.df-message-copy p,
.df-support-copy p,
.df-support-copy li {
    font-size: clamp(24px, 1.8vw, 32px);
    line-height: 1.25;
}

.df-ok-btn {
    display: flex;
    width: 292px;
    min-width: 292px;
    margin: 146px auto 0;
}

.df-support-copy ul {
    margin: 40px 0 0;
    padding-left: 28px;
    list-style: "- ";
}

.df-dashboard-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: calc(100vh - 145px);
    padding: clamp(12px, 2vh, 28px) 6vw 16px;
}

.df-player-heading {
    display: flex;
    align-items: center;
    gap: clamp(12px, 1.6vw, 18px);
}

.df-player-heading h1 {
    margin: 0;
    font-size: clamp(28px, 2.4vw, 40px);
    line-height: 1;
}

.df-player-dot {
    width: clamp(28px, 2.8vw, 34px);
    height: clamp(28px, 2.8vw, 34px);
    border-radius: 50%;
    background: var(--df-green);
}

.df-score-card {
    width: min(400px, 88vw);
    margin-top: clamp(6px, 1vh, 12px);
    padding: clamp(8px, 1.2vh, 12px) clamp(32px, 4vw, 40px)
        clamp(6px, 1vh, 10px);
    border-radius: 8px;
    background: var(--df-navy);
    color: var(--df-white);
    text-align: center;
}

.df-score-card p {
    margin: 0;
    font-size: clamp(20px, 1.8vw, 24px);
    line-height: 1.1;
}

.df-score-card strong {
    font-size: clamp(34px, 3.2vw, 42px);
}

.df-score-track {
    width: 100%;
    height: 3px;
    margin: clamp(4px, 0.8vh, 8px) 0 clamp(4px, 0.8vh, 8px);
    border-radius: 0;
    background: var(--df-green);
}

.df-score-track span,
.df-score-track [data-score-progress] {
    display: none;
}

.df-score-card small,
.df-score-card [data-score-rank] {
    display: block;
    font-size: clamp(17px, 2.1vw, 22px);
    font-weight: 600;
    line-height: 1.25;
}

.df-dashboard-links .df-inline-link {
    color: inherit;
    font-weight: inherit;
    text-decoration: underline;
}

.df-dashboard-links .df-inline-link:hover,
.df-dashboard-links .df-inline-link:focus-visible {
    opacity: 0.82;
}

.df-play-btn {
    width: min(260px, 72vw);
    min-width: min(260px, 72vw);
    min-height: clamp(52px, 6vh, 60px);
    margin-top: clamp(6px, 1vh, 12px);
    padding-block: clamp(8px, 1vh, 12px);
}

.df-card-carousel {
    position: relative;
    display: grid;
    grid-template-columns:
        clamp(44px, 4vw, 58px) minmax(0, 1fr)
        clamp(44px, 4vw, 58px);
    align-items: center;
    justify-items: center;
    width: 100%;
    max-width: 100%;
    margin-top: clamp(12px, 2.5vh, 24px);
    overflow: visible;
}

body.df-dashboard:not(.df-portrait-flow) .df-card-carousel {
    flex: 1 1 auto;
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    margin-top: clamp(4px, 0.8vh, 10px);
}

.df-card-carousel .df-circle-btn {
    align-self: center;
    justify-self: center;
}

.df-card-strip {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: visible;
    overflow-x: hidden;
    min-height: min(clamp(270px, 32vw, 380px), 50vh);
    padding-bottom: clamp(28px, 5vw, 44px);
}

body.df-dashboard:not(.df-portrait-flow) .df-card-strip {
    flex: 1 1 auto;
    align-self: center;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    height: 100%;
    margin-inline: auto;
    padding: 10px 0 28px;
    box-sizing: border-box;
    container-type: size;
    container-name: df-dashboard-strip;
}

.df-card-carousel::before,
.df-card-carousel::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 10%;
    z-index: 30;
    pointer-events: none;
}

.df-card-carousel::before {
    left: 3%;
    background: linear-gradient(to right, var(--df-cream), transparent);
}

.df-card-carousel::after {
    right: 3%;
    background: linear-gradient(to left, var(--df-cream), transparent);
}

.df-mini-card {
    position: relative;
    flex: 0 0 min(185px, 24vh);
    width: min(185px, 24vh);
    height: auto;
    min-height: min(250px, 32vh);
    margin: 0 -14px;
    padding: 14px;
    border: 4px solid var(--df-green);
    border-radius: 18px;
    background: var(--card-bg, var(--df-green-soft));
    color: var(--df-navy);
    box-shadow: 0 8px 0 rgba(13, 56, 82, 0.24);
    opacity: 0.82;
    transform: scale(0.88);
    transition:
        transform 280ms ease,
        opacity 280ms ease,
        filter 280ms ease;
}

.df-card-strip > .df-mini-card {
    --carousel-offset: 0;
    --carousel-distance: 0;
    --carousel-step: 0px;
    --carousel-scale: max(0.58, calc(1.36 - (var(--carousel-distance) * 0.12)));
    flex: 0 0 auto;
    min-height: 0;
    height: auto;
    padding: 0;
    border: 0;
    margin: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    position: absolute;
    left: 50%;
    top: 50%;
    width: clamp(118px, 15vw, 178px);
    opacity: var(--carousel-opacity, 1);
    transform: translateX(
            calc(-50% + (var(--carousel-offset) * var(--carousel-step)))
        )
        translateY(-50%) scale(var(--carousel-scale));
    transform-origin: center center;
    perspective: 900px;
    transition:
        transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
        opacity 320ms ease,
        filter 320ms ease;
}

.df-card-strip > .df-mini-card .df-card-back {
    box-shadow: 0 8px 0 rgba(13, 56, 82, 0.24);
}

.df-card-strip > .df-mini-card .df-carousel-card-flip {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 249 / 352;
    transform-style: preserve-3d;
}

.df-card-strip > .df-mini-card .df-carousel-card-face {
    position: absolute;
    inset: 0;
    display: block;
    opacity: 1;
    transform: rotateY(0deg);
    transform-origin: center center;
    transform-style: preserve-3d;
    transition:
        opacity 180ms ease,
        transform 360ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.df-card-strip > .df-mini-card .df-carousel-card-face--back {
    opacity: 0;
    transform: rotateY(-92deg);
}

.df-card-strip > .df-mini-card.is-edge .df-carousel-card-face--front {
    opacity: 0;
    transform: rotateY(92deg);
}

.df-card-strip > .df-mini-card.is-edge .df-carousel-card-face--back {
    opacity: 1;
    transform: rotateY(0deg);
}

.df-card-strip > .df-mini-card > .df-playing-card,
.df-card-strip > .df-mini-card .df-carousel-card-face > .df-playing-card {
    width: 100%;
    height: 100%;
    box-shadow: none;
}

.df-card-strip > .df-mini-card .df-trump-card {
    --df-stat-font: 2.52cqw;
    --df-stat-gap: 2.4%;
}

.df-card-strip > .df-mini-card .df-trump-card--active {
    --df-stat-font: 2.66cqw;
}

.df-card-strip > .df-mini-card .df-stat-name,
.df-card-strip > .df-mini-card .df-stat-value {
    white-space: nowrap;
}

.df-card-strip > .df-mini-card.is-active {
    opacity: 1;
}

.df-card-strip > .df-mini-card.is-active::after {
    content: "";
    position: absolute;
    right: 10.8%;
    bottom: -3.2%;
    z-index: 2;
    width: 20%;
    aspect-ratio: 1 / 1;
    background: url("/img/game-assets/download_icon.png") center / contain
        no-repeat;
    pointer-events: none;
}

.df-card-strip > .df-mini-card.is-edge {
    filter: saturate(0.9);
}

.df-card-strip > .df-mini-card.is-outside {
    pointer-events: none;
}

.df-card-strip > .df-mini-card.is-active {
    z-index: 32 !important;
    background: transparent;
    transform: translateX(
            calc(-50% + (var(--carousel-offset) * var(--carousel-step)))
        )
        translateY(-50%) scale(var(--carousel-scale));
}

.df-card-strip.df-carousel-no-transition > .df-mini-card {
    transition: none !important;
}

.df-card-strip.df-carousel-no-transition
    > .df-mini-card
    .df-carousel-card-flip {
    transition: none !important;
}

.df-mini-card > span {
    display: block;
    min-height: 36px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
}

.df-circle-btn {
    width: 58px;
    height: 58px;
    border: 0;
    border-radius: 0;
    background: transparent url("/img/game-assets/arrow_left.png") center /
        contain no-repeat;
    cursor: pointer;
    z-index: 99;
}

.df-circle-btn-next {
    background-image: url("/img/game-assets/arrow_right.png");
}

.df-dashboard-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-top: clamp(6px, 1vh, 12px);
    text-align: center;
    font-size: clamp(15px, 1.4vw, 18px);
    line-height: 1.2;
}

body.df-dashboard:not(.df-portrait-flow) .df-dashboard-stage {
    flex: 1 1 auto;
    align-items: center;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
}

body.df-dashboard:not(.df-portrait-flow) .df-player-heading,
body.df-dashboard:not(.df-portrait-flow) .df-score-card,
body.df-dashboard:not(.df-portrait-flow) .df-play-btn,
body.df-dashboard:not(.df-portrait-flow) .df-dashboard-links {
    flex-shrink: 0;
}

@container df-dashboard-strip (min-height: 0px) {
    .df-card-strip > .df-mini-card {
        width: min(300px, calc(100cqh * 249 / 352 / 1.36));
    }
}

body.df-dashboard:not(.df-portrait-flow) .df-scale-frame {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

body.df-dashboard:not(.df-portrait-flow) .df-scale-frame .df-header,
body.df-dashboard:not(.df-portrait-flow) .df-scale-frame .df-game-nav {
    flex-shrink: 0;
}

body.df-dashboard:not(.df-portrait-flow) .df-scale-frame .df-main {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.df-dashboard-links button {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--df-navy);
    text-decoration: underline;
}

.df-wide-board,
.df-game-panel {
    width: min(89vw, 1710px);
    min-height: min(64vh, 688px);
    margin: 16px auto 0;
    padding: clamp(24px, 4vh, 46px) clamp(30px, 6vw, 122px);
    background: rgba(184, 188, 200, 0.9);
    color: var(--df-navy);
}

.df-wide-board:has(.df-wallpaper-grid) {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: auto;
    background: rgba(184, 188, 200, 0.58);
}

.df-wide-board:has(.df-wallpaper-grid) h1,
.df-wide-board:has(.df-wallpaper-grid) .df-board-subtitle {
    width: 100%;
}

.df-wide-board:has(.df-wallpaper-grid) h1 {
    margin-bottom: clamp(10px, 1.6vh, 18px);
    font-size: clamp(28px, 2.8vw, 48px);
}

.df-wide-board:has(.df-wallpaper-grid) .df-board-subtitle {
    margin-bottom: clamp(28px, 4.5vh, 52px);
    max-width: 920px;
    font-size: clamp(18px, 1.75vw, 32px);
    font-weight: 400;
    line-height: 1.22;
}

.df-game-panel {
    background: transparent;
}

.df-game-panel:has(.df-battle-view:not([hidden])) {
    background: rgba(184, 188, 200, 0.9);
}

body.df-game-screen {
    --df-deck-card-width: min(315px, 42vh);
    --df-battle-card-width: min(400px, 52vh);
}

body.df-game-screen .df-deck-view .df-playing-card {
    width: var(--df-deck-card-width);
}

body.df-game-screen .df-battle-view .df-playing-card {
    width: var(--df-battle-card-width);
}

.df-wide-board h1 {
    margin: 0 0 clamp(16px, 3vh, 26px);
    text-align: center;
    font-size: clamp(32px, 3.5vw, 60px);
}

.df-board-subtitle {
    margin: 0 auto clamp(24px, 5vh, 62px);
    max-width: 780px;
    text-align: center;
    font-size: clamp(24px, 2.3vw, 42px);
    font-weight: 700;
    line-height: 1.18;
}

.df-ranking-list {
    display: grid;
    gap: 14px;
    width: min(920px, 100%);
    margin: 40px auto 0;
}

.df-ranking-board {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.df-ranking-board .df-ranking-list {
    flex: 1 1 auto;
    min-height: 0;
    padding-right: 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.df-ranking-row {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    align-items: center;
    gap: 18px;
    min-height: 70px;
    padding: 12px 22px;
    border: 3px solid rgba(13, 56, 82, 0.18);
    background: rgba(255, 255, 255, 0.52);
    font-size: 24px;
}

.df-ranking-row.is-current {
    border-color: var(--df-green);
    background: var(--df-white);
    box-shadow: 0 8px 0 rgba(13, 56, 82, 0.18);
}

.df-ranking-position {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--df-navy);
    color: var(--df-white);
    font-weight: 700;
}

.df-sweepstakes-board {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.df-sweepstakes-list {
    display: grid;
    gap: 14px;
    width: min(920px, 100%);
    margin: 40px auto 0;
}

.df-sweepstakes-board .df-sweepstakes-list {
    flex: 1 1 auto;
    min-height: 0;
    padding-right: 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.df-sweepstakes-row {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: 18px;
    min-height: 70px;
    padding: 12px 22px;
    border: 3px solid rgba(13, 56, 82, 0.18);
    background: rgba(255, 255, 255, 0.52);
    font-size: 24px;
}

.df-sweepstakes-row--head {
    min-height: 0;
    padding: 0 22px 4px;
    border: 0;
    background: transparent;
    font-size: clamp(14px, 1.4vw, 18px);
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--df-navy);
}

.df-sweepstakes-row--head span,
.df-sweepstakes-row--head strong {
    font-weight: 700;
}

.df-sweepstakes-company,
.df-sweepstakes-prize {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.df-sweepstakes-row--head span:last-child,
.df-sweepstakes-prize {
    text-align: right;
}

.df-sweepstakes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    width: min(1050px, 100%);
    margin: 70px auto 0;
}

.df-sweep-card {
    min-height: 160px;
    padding: 24px;
    background: rgba(255, 255, 255, 0.58);
    text-align: center;
}

.df-sweep-card span {
    display: block;
    font-size: 23px;
}

.df-sweep-card strong {
    display: block;
    margin-top: 14px;
    font-size: 58px;
}

.df-ticket-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 54px auto 0;
    font-size: 24px;
}

.df-ticket-list span {
    padding: 10px 18px;
    border: 3px solid var(--df-navy);
    background: var(--df-white);
    font-weight: 700;
}

.df-wallpaper-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: clamp(28px, 3vw, 58px);
    width: 100%;
    max-width: min(100%, 1320px);
    margin: 0 auto;
}

.df-wallpaper-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(14px, 2vh, 22px);
    width: min(300px, 30vw);
    max-width: 320px;
    flex: 0 1 min(300px, 30vw);
    text-align: left;
}

.df-wallpaper-card img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    box-shadow: 0 7px 12px rgba(13, 56, 82, 0.34);
}

.df-wallpaper-card.is-locked img {
    filter: none;
}

.df-wallpaper-card h2 {
    display: none;
}

.df-wallpaper-card p,
.df-wallpaper-card .df-download-link {
    margin: 0;
    width: 100%;
    color: var(--df-navy);
    font-size: clamp(18px, 1.4vw, 24px);
    font-weight: 700;
}

.df-wallpaper-card p {
    text-align: center;
}

.df-download-actions {
    display: grid;
    gap: 10px;
    justify-items: start;
    width: 100%;
    margin: 0;
}

.df-download-link {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
}

.df-download-link span {
    display: inline-block;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: url("/img/game-assets/download_icon.png") center / contain
        no-repeat;
}

.df-game-arena {
    position: relative;
}

.df-game-panel {
    --df-shuffle-duration: 1200ms;
    --df-deal-out-duration: 780ms;
    --df-hand-deal-duration: 720ms;
    --df-hand-deal-delay: 80ms;
    --df-deal-button-out-duration: 620ms;

    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: visible;
    transition: filter 240ms ease;
}

.df-game-arena.is-choosing .df-game-panel {
    filter: blur(8px);
}

.df-deck-view {
    display: grid;
    justify-items: center;
    gap: clamp(24px, 4vh, 58px);
}

.df-deal-hands {
    position: absolute;
    inset: 0;
    z-index: 8;
    pointer-events: none;
}

.df-deal-hand-slot {
    position: absolute;
    left: 50%;
    bottom: clamp(18px, 4vh, 62px);
    width: clamp(96px, 9.5vw, 152px);
    opacity: 0;
    visibility: hidden;
    transform-origin: center bottom;
    will-change: transform, opacity;
}

.df-deal-hand-slot .df-deal-hand {
    display: block;
    width: 100%;
    height: auto;
    transform: scaleX(-1);
    transform-origin: center bottom;
}

.df-game-panel.is-dealing-hands .df-deal-hand-slot {
    visibility: visible;
}

.df-game-panel.is-dealing-hands .df-deal-hand-slot--user {
    animation: df-hand-deal-user var(--df-hand-deal-duration)
        cubic-bezier(0.2, 0.8, 0.24, 1) both;
}

.df-game-panel.is-dealing-hands .df-deal-hand-slot--machine {
    animation: df-hand-deal-machine var(--df-hand-deal-duration)
        cubic-bezier(0.2, 0.8, 0.24, 1) var(--df-hand-deal-delay) both;
}

.df-deck-stack {
    isolation: isolate;
}

.df-deck-view.is-shuffling .df-deck-stack {
    filter: none;
    animation: df-shuffle var(--df-shuffle-duration)
        cubic-bezier(0.22, 0.78, 0.2, 1);
}

.df-deck-view.is-shuffling .df-deal-btn {
    animation: df-deal-pulse var(--df-shuffle-duration) ease-in-out;
}

.df-playing-card {
    position: relative;
    width: min(315px, 42vh);
    height: auto;
    aspect-ratio: 249 / 352;
    border-radius: 8% / 6%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    container-type: inline-size;
    transform-style: preserve-3d;
}

.df-card-back {
    background-image: url("/img/game-assets/card_back.png");
}

.df-deck-stack::before,
.df-deck-stack::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image: inherit;
    background-repeat: inherit;
    background-position: inherit;
    background-size: inherit;
    z-index: -1;
    transform-origin: center bottom;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.df-deck-stack::before {
    transform: translate(-10px, 20px) scale(0.985);
    filter: brightness(0.92) saturate(0.92);
}

.df-deck-stack::after {
    transform: translate(-20px, 38px) scale(0.97);
    filter: brightness(0.78) saturate(0.86);
    z-index: -2;
}

.df-deck-view.is-shuffling .df-deck-stack::before,
.df-deck-view.is-shuffling .df-deck-stack::after,
.df-deck-view.is-dealing-out .df-deck-stack::before,
.df-deck-view.is-dealing-out .df-deck-stack::after {
    opacity: 1;
    visibility: visible;
}

.df-deck-view.is-shuffling .df-deck-stack::before {
    animation: df-shuffle-before var(--df-shuffle-duration)
        cubic-bezier(0.22, 0.78, 0.2, 1);
}

.df-deck-view.is-shuffling .df-deck-stack::after {
    animation: df-shuffle-after var(--df-shuffle-duration)
        cubic-bezier(0.22, 0.78, 0.2, 1);
}

.df-deck-front,
.df-deck-ghost {
    display: none !important;
}

.df-deck-view.is-dealing-out .df-deck-stack {
    animation: df-deck-deal-out var(--df-deal-out-duration)
        cubic-bezier(0.18, 0.78, 0.24, 1) forwards;
}

.df-deck-view.is-dealing-out .df-deck-stack::before {
    animation: df-deck-split-left var(--df-deal-out-duration)
        cubic-bezier(0.18, 0.78, 0.24, 1) forwards;
}

.df-deck-view.is-dealing-out .df-deck-stack::after {
    animation: df-deck-split-right var(--df-deal-out-duration)
        cubic-bezier(0.18, 0.78, 0.24, 1) forwards;
}

.df-deck-view.is-dealing-out .df-deal-btn {
    animation: df-deal-button-out var(--df-deal-button-out-duration) ease
        forwards;
}

.df-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.df-card-back-art {
    display: none;
}

.df-battle-view {
    display: grid;
    grid-template-columns:
        minmax(96px, 0.52fr) min-content minmax(360px, 1.45fr)
        min-content minmax(96px, 0.52fr);
    column-gap: clamp(24px, 3vw, 56px);
    row-gap: 0;
    align-items: center;
    justify-items: center;
    width: 100%;
    max-width: 100%;
}

.df-battle-view.is-revealing {
    animation: df-battle-reveal 620ms cubic-bezier(0.18, 0.78, 0.24, 1);
}

.df-player-side {
    display: contents;
}

.df-player-side > span {
    font-size: clamp(30px, 2.2vw, 40px);
    grid-row: 1;
    justify-self: end;
}

.df-player-side > div {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
}

[data-user-card],
[data-machine-card] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

[data-user-card].has-round-winner,
[data-machine-card].has-round-winner {
    z-index: 4;
}

.df-middle-view {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(14px, 2vh, 22px);
    width: 100%;
    max-width: 400px;
    margin-inline: auto;
    box-sizing: border-box;
    z-index: 2;
}

.df-middle-view .df-versus {
    margin: 0;
}

body.df-game-screen .df-versus {
    margin: 0;
    font-size: clamp(34px, 4vw, 52px);
    font-weight: 700;
    font-style: italic;
    line-height: 1;
    color: #fff;
    -webkit-text-stroke: clamp(2px, 0.35vw, 4px) var(--df-deep);
    paint-order: stroke fill;
    text-shadow: 0 2px 10px rgba(13, 56, 82, 0.45);
}

.df-machine-side > span {
    grid-column: 5;
    grid-row: 1;
    justify-self: start;
}

.df-machine-side > div {
    grid-column: 4;
    grid-row: 1;
    justify-self: start;
}

.df-round-actions {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 0;
    width: 100%;
    max-width: 100%;
}

.df-round-actions.is-revealing {
    animation: df-actions-reveal 520ms ease 260ms both;
}

.df-round-actions .df-primary-btn {
    min-width: 324px;
    min-height: 62px;
    font-size: 23px;
}

@keyframes df-fade-in-left {
    from {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.df-user-card-note {
    box-sizing: border-box;
    width: 100%;
    max-width: min(920px, 94%);
    margin: clamp(18px, 3vh, 32px) auto 0;
    padding: 0 clamp(12px, 3vw, 24px);
    text-align: center;
    font-size: clamp(15px, 1.5vw, 22px);
    font-weight: 600;
    line-height: 1.45;
    color: var(--df-navy);
    text-transform: uppercase;
    white-space: pre-line;
    overflow-x: clip;
}

.df-user-card-note.is-note-entering {
    animation: df-fade-in-left 800ms ease-out both;
}

.df-user-card-note__car {
    font-weight: 800;
}

.df-user-card-note__text {
    font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
    .df-user-card-note.is-note-entering {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

.df-secondary-action {
    background: var(--df-white);
}

.df-trump-card {
    --df-stat-area-top: 54.4%;
    --df-stat-area-height: 32%;
    --df-stat-area-inset: 5.2%;
    --df-stat-gap: 1%;
    --df-stat-row-gap: 1px;
    --df-stat-icon-size: 2.2em;
    --df-stat-body-pad-x: 3.2%;
    --df-stat-body-pad-y: 0.4em;
    --df-stat-panel-pad-top: 3.6%;
    --df-stat-panel-pad-x: 2.6%;
    --df-stat-panel-pad-bottom: 5.8%;
    --df-stat-font: 2.68cqw;
    --df-stat-row-bg: rgba(13, 56, 82, 0.92);
    overflow: visible;
    background-image: url("/img/game-assets/card_normal.png");
    color: var(--df-navy);
    transition:
        transform 360ms ease,
        filter 360ms ease,
        opacity 360ms ease;
}

.df-trump-card--active {
    --df-stat-font: 2.82cqw;
    --df-stat-row-bg: #bf0b48;
    background-image: url("/img/game-assets/card_active.png");
    color: var(--df-white);
}

.df-trump-card--normal {
    background-image: url("/img/game-assets/card_normal.png");
    color: var(--df-navy);
}

.df-trump-card.has-card-art,
.df-trump-card.has-card-art.df-trump-card--normal,
.df-trump-card.has-card-art.df-trump-card--active,
.df-trump-card.has-card-art.is-special-card,
.df-trump-card.has-card-art.is-special-card.df-trump-card--normal,
.df-trump-card.has-card-art.is-special-card.df-trump-card--active {
    --df-stat-area-inset-left: 8.2%;
    --df-stat-area-inset-right: 8.2%;
    background-image: var(--df-card-art);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
}

.df-trump-card.is-special-card,
.df-trump-card.is-special-card.df-trump-card--normal,
.df-trump-card.is-special-card.df-trump-card--active {
    background-image: url("/img/game-assets/card_special.png");
    --df-stat-row-bg: #bf0b48;
    color: var(--df-white);
}

.df-trump-card.theme-1 {
    --card-bg: #ef0035;
    --card-accent: #b6004d;
    color: var(--df-white);
}

.df-trump-card.theme-2,
.theme-2 {
    --card-bg: #bfe582;
    --card-accent: #99ca35;
}

.df-trump-card.theme-3,
.theme-3 {
    --card-bg: #d5edaa;
    --card-accent: #99ca35;
}

.df-trump-card.theme-4,
.theme-4 {
    --card-bg: #f4f2e9;
    --card-accent: #99ca35;
}

.df-trump-card.theme-5,
.theme-5 {
    --card-bg: #ffcc4f;
    --card-accent: #ef0035;
}

.df-trump-card.theme-6,
.theme-6 {
    --card-bg: #63c0d4;
    --card-accent: #0d3852;
}

.theme-1 {
    --card-bg: #ef0035;
    --card-accent: #b6004d;
}

.df-trump-card.df-trump-card--normal {
    color: var(--df-navy);
}

.df-trump-card.df-trump-card--active {
    color: var(--df-white);
}

.df-trump-inner {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
}

.df-trump-title {
    display: none;
    position: absolute;
    top: 6%;
    left: 23.6%;
    right: 23.6%;
    width: 52%;
    z-index: 2;
    place-items: flex-start;
    min-height: 9%;
    margin: 0;
    color: inherit;
    font-size: clamp(8px, 3.8cqw, 15px);
    font-weight: 700;
    line-height: 0.94;
    letter-spacing: 0.22cqw;
    text-align: center;
    text-transform: uppercase;
}

.df-trump-title span {
    display: -webkit-box;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    text-wrap: balance;
    -webkit-box-orient: vertical;
    line-height: 1.05;
}

.df-card-car {
    position: absolute;
    left: 7.5%;
    right: 7.5%;
    top: 17.5%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    height: 35%;
    pointer-events: none;
}

.df-trump-card--active .df-card-car {
    left: 4%;
    right: 4%;
    top: 22%;
    height: 35%;
    overflow: visible;
}

.df-trump-card--active .df-card-car-image {
    transform: scale(1.15);
    transform-origin: center bottom;
}

.df-card-car-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(0 2cqw 1.6cqw rgba(13, 56, 82, 0.34));
}

.df-stat-list {
    position: absolute;
    left: var(--df-stat-area-inset-left, var(--df-stat-area-inset));
    right: var(--df-stat-area-inset-right, var(--df-stat-area-inset));
    top: var(--df-stat-area-top);
    height: var(--df-stat-area-height);
    z-index: 2;
    display: grid;
    grid-template-rows: repeat(var(--df-stat-count, 6), minmax(0, 1fr));
    gap: var(--df-stat-gap);
    box-sizing: border-box;
    overflow: hidden;
    min-width: 0;
    padding: var(--df-stat-panel-pad-top) var(--df-stat-panel-pad-x)
        var(--df-stat-panel-pad-bottom);
    background-image: url("/img/game-assets/card-attr-bg.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
}

.df-stat-row {
    display: flex;
    align-items: center;
    gap: var(--df-stat-row-gap);
    width: 100%;
    max-width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    box-sizing: border-box;
    overflow: hidden;
    color: var(--df-white);
    font-size: var(--df-stat-font);
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1;
    text-transform: uppercase;
}

.df-stat-icon {
    border-radius: 4px 0px 0px 4px;
    background: var(--df-stat-row-bg);
}

.df-stat-body {
    border-radius: 0px 4px 4px 0px;
    background: var(--df-stat-row-bg);
}

.df-stat-row.is-selected .df-stat-icon,
.df-stat-row.is-selected .df-stat-body {
    background: var(--df-green);
}

.df-stat-icon {
    display: flex;
    flex: 0 0 var(--df-stat-icon-size);
    place-items: center;
    width: var(--df-stat-icon-size);
    height: var(--df-stat-icon-size);
    padding: var(--df-stat-body-pad-y);
    box-sizing: border-box;
}

.df-stat-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.df-stat-body {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    align-self: stretch;
    justify-content: space-between;
    gap: 4%;
    min-width: 0;
    min-height: var(--df-stat-icon-size);
    padding: var(--df-stat-body-pad-y) var(--df-stat-body-pad-x);
    box-sizing: border-box;
}

.df-stat-name,
.df-stat-value {
    font-size: 1em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: geometricPrecision;
}

@supports (font-size: round(nearest, 1em, 1px)) {
    .df-stat-row {
        font-size: round(nearest, var(--df-stat-font), 1px);
    }
}

.df-stat-name {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    line-height: 1;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.df-stat-value {
    display: block;
    flex: 0 0 auto;
    overflow: hidden;
    line-height: 1;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.df-trump-card.is-entering {
    animation: df-card-in 640ms cubic-bezier(0.16, 0.84, 0.24, 1) both;
}

[data-user-card] > .df-playing-card.is-entering {
    animation-name: df-card-in-left;
}

[data-machine-card] > .df-playing-card.is-entering {
    animation-name: df-card-in-right;
    animation-delay: 120ms;
}

[data-machine-card] {
    perspective: 1200px;
}

[data-machine-card] .df-trump-card,
[data-machine-card] .df-card-back {
    opacity: 1;
    visibility: visible;
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

[data-machine-card].is-flipping > .df-card-back {
    animation: df-card-flip-away 280ms ease-in forwards;
    transform-origin: center center;
}

[data-machine-card] > .df-trump-card.is-flip-enter,
[data-machine-card] > .df-playing-card.is-flip-enter:not(.df-card-back) {
    animation: df-card-flip-in 280ms ease-out forwards;
    transform-origin: center center;
}

@keyframes df-card-flip-away {
    from {
        transform: rotateY(0deg);
    }

    to {
        transform: rotateY(90deg);
    }
}

@keyframes df-card-flip-in {
    from {
        transform: rotateY(-90deg);
        opacity: 0.35;
    }

    to {
        transform: rotateY(0deg);
        opacity: 1;
    }
}

.df-trump-card.is-winner {
    --df-winner-glow: #204860;
    position: relative;
    z-index: 2;
    overflow: visible;
    border-radius: 8% / 6%;
    transform: translateY(-10px) scale(1.04);
    transform-origin: center bottom;
    filter: drop-shadow(4px 0px 0px #204860) drop-shadow(-4px 0px 0px #204860)
        drop-shadow(0px 4px 0px #204860) drop-shadow(0px -4px 0px #204860);
    animation: df-winner-reveal 920ms cubic-bezier(0.22, 1.12, 0.36, 1) both;
}

.df-trump-card.is-winner .df-trump-inner {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    border-radius: inherit;
}

.df-trump-card.is-winner::before {
    display: none;
}

.df-trump-card.is-winner::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    background: linear-gradient(
        108deg,
        transparent 0%,
        transparent 38%,
        rgba(255, 255, 255, 0.12) 44%,
        rgba(255, 255, 255, 0.68) 50%,
        rgba(255, 255, 255, 0.12) 56%,
        transparent 62%,
        transparent 100%
    );
    background-size: 220% 100%;
    background-repeat: no-repeat;
    opacity: 0;
    pointer-events: none;
    animation: df-winner-shine 780ms ease-out 320ms both;
}

.df-trump-card.is-tie {
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 14px 28px rgba(13, 56, 82, 0.2);
}

.df-trump-card.is-loser {
    opacity: 0.7;
    filter: saturate(0.75) brightness(0.92);
    transform: scale(0.98);
    animation: df-loser-dim 520ms ease 300ms both;
}

.df-result-banner {
    position: relative;
    top: auto;
    left: auto;
    order: -1;
    z-index: 6;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: min(100%, clamp(150px, 42cqw, 290px));
    min-height: 0;
    margin: 0 auto clamp(-18px, -3.5cqw, -10px);
    color: var(--df-navy);
    font-size: clamp(13px, 5.2cqw, 24px);
    font-weight: 700;
    text-transform: uppercase;
    transform: none;
    pointer-events: none;
}

.df-winner-badge-park {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

body:not(.df-game-screen) #df-winner-badge-source,
body:not(.df-game-screen) #df-winner-badge-banner,
body:not(.df-game-screen) .df-winner-badge-park {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.df-result-banner--winner.is-replaying {
    animation: df-result-badge-in 420ms cubic-bezier(0.22, 1.1, 0.36, 1) both;
}

.df-result-banner--winner .df-winner-badge-image {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 0.35em 0 rgba(13, 56, 82, 0.28));
}

.df-result-banner--tie {
    animation: df-result-badge-in 560ms cubic-bezier(0.2, 0.9, 0.24, 1) both;
}

.df-result-banner--tie span {
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 2.4em;
    padding: 0.35em 0.75em;
    border: 0.28em solid var(--df-white);
    border-radius: 0.35em;
    background: var(--df-white);
    box-shadow: 0 0.35em 0 rgba(13, 56, 82, 0.22);
}

[data-user-card].has-round-winner,
[data-machine-card].has-round-winner {
    animation: df-winner-slot-reveal 920ms cubic-bezier(0.22, 1.1, 0.36, 1) both;
}

[data-user-card].has-round-winner::before,
[data-machine-card].has-round-winner::before {
    display: none;
}

@keyframes df-winner-reveal {
    0% {
        opacity: 0.35;
        transform: translateY(28px) scale(0.86) rotate(-2.5deg);
    }

    42% {
        opacity: 1;
        transform: translateY(-18px) scale(1.09) rotate(1.2deg);
    }

    68% {
        transform: translateY(-7px) scale(1.02) rotate(0deg);
    }

    100% {
        opacity: 1;
        transform: translateY(-10px) scale(1.04) rotate(0deg);
    }
}

@keyframes df-winner-shine {
    0% {
        opacity: 0;
        background-position: 120% 0;
    }

    35% {
        opacity: 0.95;
        background-position: 48% 0;
    }

    100% {
        opacity: 0;
        background-position: -20% 0;
    }
}

@keyframes df-winner-slot-reveal {
    0% {
        transform: scale(0.94);
    }

    45% {
        transform: scale(1.035);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes df-loser-dim {
    from {
        opacity: 1;
        filter: none;
        transform: scale(1);
    }

    to {
        opacity: 0.7;
        filter: saturate(0.75) brightness(0.92);
        transform: scale(0.98);
    }
}

@keyframes df-winner-halo-burst {
    0% {
        opacity: 0;
        transform: translateX(-50%) scale(0.45);
    }

    48% {
        opacity: 1;
        transform: translateX(-50%) scale(1.18);
    }

    100% {
        opacity: 0.72;
        transform: translateX(-50%) scale(1);
    }
}

@keyframes df-result-badge-in {
    0% {
        opacity: 1;
        transform: translateY(10px) scale(0.9);
    }

    70% {
        transform: translateY(-3px) scale(1.04);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes df-winner-halo {
    0% {
        opacity: 0.55;
        transform: translateX(-50%) scale(0.92);
    }

    100% {
        opacity: 0.95;
        transform: translateX(-50%) scale(1.05);
    }
}

.df-points-float-layer {
    position: fixed;
    inset: 0;
    z-index: 9050;
    overflow: hidden;
    pointer-events: none;
}

.df-points-float {
    --float-dx: 0px;
    --float-dy: -140px;
    position: fixed;
    left: var(--float-start-x, 50%);
    top: var(--float-start-y, 50%);
    margin: 0;
    font-size: clamp(44px, 7vw, 80px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--df-white);
    text-shadow:
        0 0.1em 0 rgba(13, 56, 82, 0.5),
        0 0.16em 0.32em rgba(13, 56, 82, 0.38);
    transform: translate(-50%, -50%);
    animation: df-points-float-rise 2.65s cubic-bezier(0.2, 0.78, 0.24, 1)
        forwards;
    will-change: transform, opacity;
}

.df-points-float.is-delayed {
    animation-delay: 0.22s;
}

.df-points-float.is-local-rise {
    animation-name: df-points-float-local-rise;
    animation-duration: 2.1s;
}

@keyframes df-points-float-local-rise {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }

    14% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.12);
    }

    70% {
        opacity: 1;
        transform: translate(-50%, -72%) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -95%) scale(0.9);
    }
}

@keyframes df-points-float-rise {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }

    12% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.14);
    }

    28% {
        opacity: 1;
        transform: translate(
                calc(-50% + var(--float-dx) * 0.08),
                calc(-50% + var(--float-dy) * 0.08)
            )
            scale(1.08);
    }

    78% {
        opacity: 1;
        transform: translate(
                calc(-50% + var(--float-dx) * 0.92),
                calc(-50% + var(--float-dy) * 0.92)
            )
            scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(
                calc(-50% + var(--float-dx)),
                calc(-50% + var(--float-dy))
            )
            scale(0.88);
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-machine-card].is-flipping > .df-card-back,
    [data-machine-card] > .df-trump-card.is-flip-enter,
    [data-machine-card] > .df-playing-card.is-flip-enter:not(.df-card-back) {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .df-points-float {
        animation-duration: 1.1s;
    }

    .df-trump-card.is-winner {
        animation: df-winner-reveal-reduced 420ms ease both;
        filter: drop-shadow(0 0 0 2px rgba(32, 72, 96, 0.95))
            drop-shadow(0 0 14px rgba(32, 72, 96, 0.9))
            drop-shadow(0 0 28px rgba(32, 72, 96, 0.7))
            drop-shadow(0 0 44px rgba(32, 72, 96, 0.5));
    }

    .df-trump-card.is-winner::after,
    [data-user-card].has-round-winner,
    [data-machine-card].has-round-winner,
    .df-result-banner--winner {
        animation: none;
    }

    .df-trump-card.is-loser {
        animation: df-loser-dim 280ms ease both;
    }
}

@keyframes df-winner-reveal-reduced {
    from {
        opacity: 0.6;
        transform: translateY(6px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(-6px) scale(1.02);
    }
}

.df-selected-attribute {
    position: relative;
    left: auto;
    top: auto;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 108px;
    height: 108px;
    margin: 0 auto;
    flex-shrink: 0;
    border-radius: 14px;
    background: var(--df-green);
    color: var(--df-white);
    transform: scale(0);
    animation: df-pop-inline 420ms ease forwards;
}

.df-selected-attribute img,
.df-selected-attribute svg {
    width: 64px;
    height: 64px;
    object-fit: contain;
}

.df-attribute-modal[hidden],
[hidden] {
    display: none !important;
}

.df-attribute-modal {
    position: fixed;
    inset: 0;
    z-index: 10;
    display: grid;
    place-items: center;
}

.df-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17, 24, 60, 0.28);
}

.df-modal-card {
    position: relative;
    z-index: 1;
    width: min(858px, 92vw);
    min-height: 550px;
    padding: 34px 64px 54px;
    border-radius: 36px;
    background: var(--df-white);
    color: var(--df-navy);
    box-shadow: var(--df-shadow);
    animation: df-modal-in 220ms ease;
}

.df-modal-card h2 {
    margin: 0 0 32px;
    text-align: center;
    font-size: clamp(32px, 2.5vw, 44px);
}

.df-modal-close {
    position: absolute;
    top: 26px;
    right: 32px;
    width: 40px;
    height: 40px;
    border: 3px solid var(--df-green);
    border-radius: 8px;
    background: var(--df-deep);
    color: var(--df-white);
    font-size: 24px;
    font-weight: 700;
}

.df-attribute-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 34px 48px;
    max-width: 560px;
    margin: 0 auto 38px;
}

.df-attribute-hint {
    max-width: min(560px, 88vw);
    margin: -12px auto 22px;
    padding: 0 16px;
    text-align: center;
    font-size: clamp(18px, 1.55vw, 26px);
    font-weight: 700;
    line-height: 1.35;
    color: var(--df-navy);
    min-height: 2.7em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.df-attribute-hint[hidden] {
    display: flex !important;
    visibility: hidden;
}

.df-attribute-option {
    display: grid;
    justify-items: center;
    gap: 10px;
    min-height: 144px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--df-navy);
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
}

.df-attribute-option i {
    display: grid;
    place-items: center;
    width: 102px;
    height: 102px;
    border-radius: 12px;
    background: var(--df-pink);
    color: var(--df-white);
    transition:
        background 180ms ease,
        transform 180ms ease,
        box-shadow 180ms ease;
}

.df-attribute-option img,
.df-attribute-option svg {
    width: 58px;
    height: 58px;
    object-fit: contain;
}

.df-attribute-option.is-selected i {
    background: var(--df-green);
    box-shadow: 0 10px 0 rgba(13, 56, 82, 0.18);
    transform: translateY(-5px);
}

.df-modal-card .df-primary-btn {
    display: flex;
    min-width: 264px;
    min-height: 58px;
    margin: 0 auto;
    font-size: 20px;
}

.df-fiat-footer {
    position: static;
    margin-top: clamp(16px, 3vh, 34px);
    margin-bottom: clamp(16px, 3vh, 34px);
    z-index: 2;
    display: block;
    width: clamp(48px, 6vh, 68px);
    height: clamp(48px, 6vh, 68px);
    margin-inline: auto;
    background: url("/img/game-assets/fiat_logo_mini.png") center / contain
        no-repeat;
    color: transparent;
    overflow: hidden;
}

.df-light .df-game-nav .df-outline-btn {
    background: var(--df-deep);
}

@media (min-width: 1181px) and (max-width: 1536px),
    (min-width: 1181px) and (max-height: 860px) {
    body.df-dashboard .df-header,
    body.df-game-screen .df-header {
        min-height: clamp(88px, 10.5vh, 120px);
        padding-top: clamp(16px, 2.5vh, 28px);
    }

    body.df-dashboard .df-title,
    body.df-game-screen .df-title {
        width: min(92vw, 1320px);
    }

    body.df-dashboard .df-game-nav,
    body.df-game-screen .df-game-nav,
    body.df-board-page .df-game-nav {
        padding-inline: clamp(48px, 6vw, 120px);
    }

    body.df-dashboard .df-dashboard-stage {
        min-height: 0;
        padding: 10px 5vw 12px;
        gap: 8px;
        overflow: hidden;
    }

    body.df-dashboard .df-player-heading {
        gap: 12px;
    }

    body.df-dashboard .df-player-heading h1 {
        font-size: clamp(30px, 2.6vw, 40px);
    }

    body.df-dashboard .df-player-dot {
        width: 30px;
        height: 30px;
    }

    body.df-dashboard .df-score-card {
        width: min(360px, 84vw);
        margin-top: 4px;
        padding: 8px 32px 6px;
    }

    body.df-dashboard .df-score-card p {
        font-size: 20px;
    }

    body.df-dashboard .df-score-card strong {
        font-size: 36px;
    }

    body.df-dashboard .df-score-card small,
    body.df-dashboard .df-score-card [data-score-rank] {
        font-size: 17px;
    }

    body.df-dashboard .df-play-btn {
        width: 240px;
        min-width: 240px;
        min-height: 54px;
        margin-top: 6px;
        font-size: 22px;
    }

    body.df-dashboard .df-card-carousel {
        width: 100%;
        max-width: 100%;
        margin-top: 4px;
    }

    body.df-dashboard .df-card-strip {
        min-height: 0;
    }

    body.df-dashboard .df-card-strip > .df-mini-card {
        width: clamp(128px, 12.5vw, 188px);
    }

    body.df-dashboard .df-dashboard-links {
        margin-top: 6px;
        font-size: 16px;
    }

    body.df-game-screen .df-game-panel {
        width: min(90vw, 1500px);
        min-height: min(60vh, 620px);
        margin-top: clamp(10px, 2vh, 24px);
        padding: clamp(18px, 3vh, 36px) clamp(24px, 5vw, 86px);
    }

    body.df-game-screen {
        --df-deck-card-width: min(292px, 38vh);
        --df-battle-card-width: min(380px, 50vh);
    }

    body.df-game-screen .df-deck-view {
        gap: clamp(20px, 3vh, 42px);
    }

    body.df-game-screen .df-battle-view {
        grid-template-columns:
            minmax(100px, 0.48fr) minmax(0, var(--df-battle-card-width))
            minmax(300px, 1.35fr) minmax(0, var(--df-battle-card-width))
            minmax(100px, 0.48fr);
        column-gap: clamp(18px, 2.4vw, 40px);
        row-gap: 0;
    }

    body.df-game-screen .df-player-side > span,
    body.df-game-screen .df-machine-side > span {
        font-size: clamp(24px, 2vw, 34px);
    }

    body.df-game-screen .df-round-actions {
        margin-top: 0;
    }

    body.df-game-screen .df-round-actions .df-primary-btn {
        min-width: 280px;
        min-height: 54px;
        font-size: 20px;
    }

    body.df-game-screen .df-modal-card {
        width: min(760px, 84vw);
        padding: 26px 48px 36px;
    }

    body.df-game-screen .df-attribute-option i {
        width: 88px;
        height: 88px;
    }

    body.df-game-screen .df-fiat-footer {
        width: 56px;
        height: 56px;
        margin-top: 18px;
        margin-bottom: 18px;
    }
}

@media (min-width: 1181px) and (max-height: 800px) {
    body.df-dashboard .df-header,
    body.df-game-screen .df-header {
        min-height: 84px;
        padding-top: 14px;
    }

    body.df-dashboard .df-game-nav,
    body.df-game-screen .df-game-nav,
    body.df-board-page .df-game-nav {
        margin-top: -2px;
    }

    body.df-dashboard .df-dashboard-stage {
        min-height: 0;
        padding-top: 6px;
        padding-bottom: 8px;
        gap: 6px;
        overflow: hidden;
    }

    body.df-dashboard .df-score-card {
        padding-block: 8px;
    }

    body.df-dashboard .df-score-track {
        height: 3px;
        margin-block: 6px 8px;
    }

    body.df-dashboard .df-play-btn {
        min-height: 50px;
        margin-top: 4px;
    }

    body.df-dashboard .df-card-carousel {
        margin-top: 4px;
    }

    body.df-dashboard .df-card-strip {
        min-height: 0;
    }

    body.df-dashboard .df-card-strip > .df-mini-card {
        width: clamp(118px, 11vw, 168px);
    }

    body.df-dashboard .df-dashboard-links {
        margin-top: 4px;
        font-size: 15px;
    }

    body.df-game-screen .df-game-panel {
        min-height: min(56vh, 500px);
        padding-block: 16px;
    }

    body.df-game-screen {
        --df-deck-card-width: min(255px, 35vh);
        --df-battle-card-width: min(340px, 46vh);
    }

    body.df-game-screen .df-deck-view {
        gap: 18px;
    }

    body.df-game-screen .df-round-actions .df-primary-btn {
        min-height: 48px;
    }

    body.df-game-screen .df-modal-card {
        max-height: 82vh;
        padding-block: 22px 28px;
        overflow: auto;
    }

    body.df-game-screen .df-attribute-option i {
        width: 76px;
        height: 76px;
    }

    body.df-game-screen .df-fiat-footer {
        width: 48px;
        height: 48px;
        margin-block: 10px;
    }
}

@keyframes df-float {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }
}

@keyframes df-shuffle {
    0% {
        transform: translateX(0) translateY(0) rotate(0) scale(1);
    }

    16% {
        transform: translateX(-36px) translateY(-12px) rotate(-8deg) scale(1.02);
    }

    34% {
        transform: translateX(48px) translateY(-20px) rotate(11deg) scale(1.04);
    }

    52% {
        transform: translateX(-58px) translateY(-14px) rotate(-12deg)
            scale(1.03);
    }

    70% {
        transform: translateX(32px) translateY(-8px) rotate(7deg) scale(1.02);
    }

    86% {
        transform: translateX(-18px) translateY(-4px) rotate(-4deg) scale(1.01);
    }

    100% {
        transform: translateX(0) translateY(0) rotate(0) scale(1);
    }
}

@keyframes df-shuffle-before {
    0%,
    100% {
        transform: translate(-10px, 20px) scale(0.985);
    }

    22% {
        transform: rotate(24deg) translate(80px, -18px);
    }

    52% {
        transform: rotate(-13deg) translate(-58px, -10px);
    }

    76% {
        transform: rotate(16deg) translate(42px, 4px);
    }
}

@keyframes df-shuffle-after {
    0%,
    100% {
        transform: translate(-20px, 38px) scale(0.97);
    }

    24% {
        transform: rotate(-26deg) translate(-88px, -6px);
    }

    50% {
        transform: rotate(18deg) translate(66px, -22px);
    }

    74% {
        transform: rotate(-12deg) translate(-36px, 2px);
    }
}

@keyframes df-shuffle-ghost-one {
    0%,
    100% {
        opacity: 0.5;
        transform: translate(-30px, 54px) rotate(0) scale(0.955);
    }

    14%,
    78% {
        opacity: 1;
    }

    30% {
        opacity: 1;
        transform: translate(-112px, -24px) rotate(-18deg) scale(0.98);
    }

    58% {
        opacity: 1;
        transform: translate(82px, -30px) rotate(15deg) scale(0.98);
    }
}

@keyframes df-shuffle-ghost-two {
    0%,
    100% {
        opacity: 0.34;
        transform: translate(-40px, 68px) rotate(0) scale(0.94);
    }

    18%,
    82% {
        opacity: 0.92;
    }

    34% {
        opacity: 0.92;
        transform: translate(126px, -8px) rotate(22deg) scale(0.96);
    }

    62% {
        opacity: 0.92;
        transform: translate(-94px, -34px) rotate(-20deg) scale(0.96);
    }
}

@keyframes df-shuffle-ghost-three {
    0%,
    100% {
        opacity: 0.22;
        transform: translate(-50px, 82px) rotate(0) scale(0.925);
    }

    22%,
    72% {
        opacity: 0.78;
    }

    42% {
        opacity: 0.78;
        transform: translate(0, -64px) rotate(3deg) scale(0.94);
    }

    66% {
        opacity: 0.78;
        transform: translate(54px, -44px) rotate(11deg) scale(0.94);
    }
}

@keyframes df-deck-deal-out {
    0% {
        opacity: 1;
        filter: drop-shadow(0 22px 0 rgba(87, 107, 24, 0.32));
        transform: translateY(0) rotate(0) scale(1);
    }

    45% {
        opacity: 1;
        filter: drop-shadow(0 28px 22px rgba(13, 56, 82, 0.22));
        transform: translateY(-34px) rotate(-3deg) scale(1.08);
    }

    100% {
        opacity: 0;
        filter: drop-shadow(0 40px 30px rgba(13, 56, 82, 0));
        transform: translateY(-80px) rotate(5deg) scale(0.74);
    }
}

@keyframes df-deck-split-left {
    0% {
        opacity: 0.9;
        transform: translate(-10px, 20px) rotate(0) scale(0.985);
    }

    100% {
        opacity: 0;
        transform: translate(-190px, -34px) rotate(-22deg) scale(0.86);
    }
}

@keyframes df-deck-split-right {
    0% {
        opacity: 0.75;
        transform: translate(-20px, 38px) rotate(0) scale(0.97);
    }

    100% {
        opacity: 0;
        transform: translate(190px, -28px) rotate(22deg) scale(0.86);
    }
}

@keyframes df-deal-button-out {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translateY(20px) scale(0.92);
    }
}

@keyframes df-hand-deal-user {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(86px) translateX(0) rotate(8deg)
            scale(0.78);
    }

    18% {
        opacity: 1;
    }

    72% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) translateX(-256px)
            rotate(-7deg) scale(1);
    }

    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-12px) translateX(-332px)
            rotate(-12deg) scale(0.96);
    }
}

@keyframes df-hand-deal-machine {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(86px) translateX(0) rotate(-8deg)
            scale(0.78);
    }

    18% {
        opacity: 1;
    }

    72% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) translateX(256px) rotate(7deg)
            scale(1);
    }

    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-12px) translateX(332px)
            rotate(12deg) scale(0.96);
    }
}

@keyframes df-hand-deal-user-portrait {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(48px) rotate(6deg) scale(0.82);
    }

    20% {
        opacity: 1;
    }

    70% {
        opacity: 1;
        transform: translate(calc(-50% - 36vw), -4px) rotate(-8deg) scale(1.06);
    }

    100% {
        opacity: 0;
        transform: translate(calc(-50% - 46vw), -16px) rotate(-11deg)
            scale(0.94);
    }
}

@keyframes df-hand-deal-machine-portrait {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(48px) rotate(-6deg) scale(0.82);
    }

    20% {
        opacity: 1;
    }

    70% {
        opacity: 1;
        transform: translate(calc(-50% + 36vw), -4px) rotate(8deg) scale(1.06);
    }

    100% {
        opacity: 0;
        transform: translate(calc(-50% + 46vw), -16px) rotate(11deg) scale(0.94);
    }
}

@keyframes df-deal-pulse {
    0%,
    100% {
        filter: none;
        transform: translateY(0);
    }

    40% {
        filter: brightness(1.08);
        transform: translateY(-3px);
    }

    70% {
        filter: brightness(0.96);
        transform: translateY(2px);
    }
}

@keyframes df-card-in {
    from {
        opacity: 0;
        transform: translateY(80px) rotateY(-24deg) scale(0.88);
    }

    to {
        opacity: 1;
        transform: translateY(0) rotateY(0) scale(1);
    }
}

@keyframes df-card-in-left {
    0% {
        opacity: 0;
        filter: blur(6px) brightness(1.08);
        transform: translateX(96px) translateY(22px) rotate(-8deg) scale(0.72);
    }

    62% {
        opacity: 1;
        filter: blur(0) brightness(1.02);
        transform: translateX(-8px) translateY(-10px) rotate(2deg) scale(1.04);
    }

    100% {
        opacity: 1;
        filter: none;
        transform: translateX(0) translateY(0) rotate(0) scale(1);
    }
}

@keyframes df-card-in-right {
    0% {
        opacity: 0;
        filter: blur(6px) brightness(1.08);
        transform: translateX(-96px) translateY(22px) rotate(8deg) scale(0.72);
    }

    62% {
        opacity: 1;
        filter: blur(0) brightness(1.02);
        transform: translateX(8px) translateY(-10px) rotate(-2deg) scale(1.04);
    }

    100% {
        opacity: 1;
        filter: none;
        transform: translateX(0) translateY(0) rotate(0) scale(1);
    }
}

@keyframes df-battle-reveal {
    0% {
        opacity: 0;
        transform: translateY(18px) scale(0.96);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes df-actions-reveal {
    0% {
        opacity: 0;
        transform: translateY(14px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes df-pop-inline {
    0% {
        transform: scale(0);
    }

    70% {
        transform: scale(1.12);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes df-modal-in {
    from {
        opacity: 0;
        transform: translateY(22px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 1180px) {
    .df-header {
        gap: 24px;
    }

    .df-header-line {
        width: 22vw;
    }

    .df-home-stage,
    .df-login-stage {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 28px 6vw 60px;
    }

    .df-hero-mark {
        min-height: 360px;
    }

    .df-login-card {
        width: min(710px, 100%);
    }

    .df-big-five {
        font-size: 380px;
    }

    .df-big-zero {
        width: 330px;
        border-width: 72px;
    }

    .df-panel,
    .df-wide-board,
    .df-game-panel {
        width: min(92vw, 960px);
    }

    .df-battle-view {
        grid-template-columns: 1fr 90px 1fr;
        gap: 24px;
    }

    .df-player-side,
    .df-machine-side {
        display: grid;
        justify-items: center;
        gap: 14px;
    }

    .df-player-side > span,
    .df-player-side > div,
    .df-machine-side > span,
    .df-machine-side > div,
    .df-middle-view {
        grid-column: auto;
    }

    .df-wallpaper-grid {
        gap: clamp(20px, 3vw, 40px);
    }

    .df-wallpaper-card {
        width: min(280px, 42vw);
        flex-basis: min(280px, 42vw);
    }

    .df-sweepstakes-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 760px) {
    .df-card-carousel::before {
        left: 8vw;
    }

    .df-card-carousel::after {
        right: 8vw;
    }

    .df-header {
        min-height: 104px;
        padding-top: 24px;
    }

    .df-brand {
        font-size: 31px;
    }

    .df-header-line {
        display: none;
    }

    .df-main {
        min-height: calc(100vh - 104px);
    }

    .df-game-nav {
        position: relative;
        width: 92vw;
        margin: 4px auto 0;
    }

    .df-outline-btn {
        min-width: 120px;
        min-height: 46px;
        font-size: 17px;
    }

    .df-home-copy h1 {
        font-size: 48px;
    }

    .df-kicker,
    .df-subtitle {
        font-size: 30px;
    }

    .df-primary-btn {
        width: 100%;
        min-width: 0;
        min-height: 62px;
        font-size: 20px;
    }

    .df-actions-row {
        width: 100%;
    }

    .df-hero-mark {
        min-height: 260px;
    }

    .df-big-five {
        left: 0;
        font-size: 260px;
    }

    .df-big-zero {
        left: 44%;
        width: 220px;
        border-width: 46px;
    }

    .df-big-zero span {
        font-size: 30px;
    }

    .df-orbit-text {
        display: none;
    }

    .df-login-card {
        min-height: 0;
        border-width: 12px;
        border-radius: 26px;
    }

    .df-login-inner {
        min-height: 0;
        padding: 34px 20px;
        border-width: 7px;
    }

    .df-panel {
        margin-top: 24px;
        padding: 12px;
        border-radius: 28px;
    }

    .df-panel-inner {
        padding: 30px 18px;
        border-width: 7px;
        border-radius: 22px;
    }

    .df-form-grid,
    .df-access-grid,
    .df-battle-view,
    .df-sweepstakes-grid,
    .df-card-carousel {
        grid-template-columns: 1fr;
    }

    .df-wallpaper-grid {
        flex-direction: column;
        align-items: center;
        gap: 28px;
    }

    .df-wallpaper-card {
        width: min(320px, 92vw);
        max-width: 320px;
        flex-basis: auto;
        align-items: flex-start;
    }

    .df-access-grid {
        gap: 24px;
        margin-top: 32px;
    }

    .df-access-actions p {
        margin-top: 28px;
        font-size: 20px;
    }

    .df-centered-copy h1,
    .df-step-title h1 {
        font-size: 32px;
    }

    .df-centered-copy p,
    .df-message-copy p,
    .df-support-copy p,
    .df-support-copy li {
        font-size: 20px;
    }

    .df-message-copy h1,
    .df-support-copy h1 {
        margin-bottom: 28px;
        font-size: 34px;
    }

    .df-ok-btn {
        width: 100%;
        min-width: 0;
        margin-top: 42px;
    }

    .df-wide-board,
    .df-game-panel {
        min-height: auto;
        margin-top: 24px;
        padding: 32px 18px;
    }

    .df-card-carousel {
        gap: 18px;
    }

    .df-card-strip {
        min-height: 250px;
    }

    .df-mini-card {
        flex-basis: 150px;
        width: 150px;
        height: 210px;
    }

    .df-circle-btn {
        justify-self: center;
    }

    .df-playing-card {
        width: min(310px, 82vw);
        height: auto;
        aspect-ratio: 249 / 352;
    }

    .df-round-actions {
        position: static;
        flex-direction: column;
        margin-top: 0;
        transform: none;
    }

    .df-middle-view {
        width: 100%;
        max-width: 420px;
        margin-inline: auto;
    }

    .df-round-actions .df-primary-btn {
        min-width: 0;
        width: 100%;
    }

    .df-modal-card {
        padding: 32px 18px 40px;
    }

    .df-attribute-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 22px 18px;
    }

    .df-attribute-option i {
        width: 82px;
        height: 82px;
    }

    .df-fiat-footer {
        position: static;
        margin-top: 24px;
    }
}

/* Bloqueio em retrato: experiência pensada só para paisagem em telas estreitas */
.df-rotate-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    padding: max(16px, env(safe-area-inset-top))
        max(16px, env(safe-area-inset-right))
        max(16px, env(safe-area-inset-bottom))
        max(16px, env(safe-area-inset-left));
    background: rgba(13, 56, 82, 1);
    color: var(--df-white);
    text-align: center;
}

.df-rotate-overlay__panel {
    max-width: 22rem;
}

.df-rotate-overlay__icon {
    width: 5rem;
    height: 5rem;
    margin: 0 auto 1.25rem;
    color: var(--df-green);
    animation: df-rotate-hint 2.4s ease-in-out infinite;
}

.df-rotate-overlay__icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.df-rotate-overlay__title {
    margin: 0 0 0.75rem;
    font-size: clamp(1.35rem, 4.5vw, 1.65rem);
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
}

.df-rotate-overlay__text {
    margin: 0;
    font-size: clamp(0.95rem, 3.6vw, 1.1rem);
    line-height: 1.45;
    opacity: 0.92;
}

@keyframes df-rotate-hint {
    0%,
    100% {
        transform: rotate(0deg);
    }

    35% {
        transform: rotate(-90deg);
    }

    65% {
        transform: rotate(-90deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .df-rotate-overlay__icon {
        animation: none;
    }
}

body.df-allows-portrait .df-rotate-overlay {
    display: none !important;
}

@media screen and (orientation: portrait) and (max-width: 1024px) {
    body.df-requires-landscape .df-rotate-overlay {
        display: flex;
    }

    body.df-requires-landscape.df-page {
        overflow: hidden;
    }
}

/* Telas iniciais (home, login, onboarding): layout vertical no mobile */
@media screen and (orientation: portrait) and (max-width: 1024px),
    screen and (max-width: 1024px) and (min-aspect-ratio: 1/1000) and (max-aspect-ratio: 1/1) {
    body.df-home.df-portrait-flow,
    body.df-login.df-portrait-flow {
        overflow: hidden !important;
        height: 100dvh;
        max-height: 100dvh;
    }

    body.df-allows-portrait.df-portrait-flow {
        overflow: hidden !important;
    }

    body.df-login.df-portrait-flow .df-scale-stage {
        height: calc(100dvh - var(--df-disclaimer-height, 52px));
        max-height: calc(100dvh - var(--df-disclaimer-height, 52px));
    }

    body.df-home.df-portrait-flow .df-scale-stage {
        height: 100dvh;
        max-height: 100dvh;
    }

    body.df-allows-portrait.df-portrait-flow .df-scale-stage {
        min-height: 0;
        overflow: hidden;
    }

    body.df-allows-portrait.df-portrait-flow .df-scale-frame {
        position: relative;
        top: auto;
        left: auto;
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 100vw;
        height: 100%;
        max-height: 100%;
        min-height: 0;
        transform: none !important;
        padding-bottom: 0;
        overflow: hidden;
    }

    body.df-allows-portrait.df-portrait-flow .df-header {
        flex-shrink: 0;
        min-height: clamp(48px, 10svh, 64px);
        padding: 8px 4vw 0;
        gap: 0;
    }

    body.df-allows-portrait.df-portrait-flow .df-header-line {
        display: none;
    }

    body.df-allows-portrait.df-portrait-flow .df-header .df-title {
        width: min(88vw, 340px);
        max-height: 52px;
        object-fit: contain;
    }

    body.df-allows-portrait.df-portrait-flow .df-main {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
        padding-bottom: 0;
    }

    body.df-allows-portrait.df-portrait-flow .df-home-stage,
    body.df-allows-portrait.df-portrait-flow .df-login-stage {
        position: relative;
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        width: 100%;
        min-height: 0;
        height: auto;
        padding: 4px 4vw 8px;
        overflow: hidden;
    }

    body.df-home.df-portrait-flow .df-home-stage {
        justify-content: center;
    }

    body.df-allows-portrait.df-portrait-flow .df-home-copy {
        position: relative;
        z-index: 2;
        align-self: center;
        width: 100%;
        max-width: 520px;
        text-align: center;
        padding-bottom: 58%;
    }

    body.df-allows-portrait.df-portrait-flow .df-kicker {
        font-size: clamp(20px, 5.2vw, 28px);
    }

    body.df-allows-portrait.df-portrait-flow .df-home-copy h1 {
        margin: 6px 0 12px;
        font-size: clamp(28px, 8vw, 40px);
    }

    body.df-allows-portrait.df-portrait-flow .df-subtitle {
        margin-bottom: 16px;
        font-size: clamp(18px, 4.8vw, 24px);
    }

    body.df-allows-portrait.df-portrait-flow .df-actions-row {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 12px;
        width: 100%;
    }

    body.df-allows-portrait.df-portrait-flow .df-hero-mark,
    body.df-allows-portrait.df-portrait-flow .df-login-mark {
        position: absolute;
        top: auto;
        right: -1%;
        bottom: -4%;
        left: auto;
        z-index: 1;
        width: 100%;
        height: auto;
        min-height: 0;
        margin: 0;
        transform: translateX(16%);
        transform-origin: right bottom;
        pointer-events: none;
        display: block;
    }

    body.df-login.df-portrait-flow .df-login-mark {
        position: absolute;
        top: auto;
        right: -1%;
        bottom: -4%;
        left: auto;
        z-index: 1;
        width: 100%;
        height: auto;
        min-height: 0;
        margin: 0;
        transform: translateX(16%);
        transform-origin: right bottom;
        pointer-events: none;
        display: block;
    }

    body.df-allows-portrait.df-portrait-flow .df-fiat-art-picture {
        display: block;
        width: 100%;
        height: auto;
        max-height: none;
        margin: 0;
    }

    body.df-allows-portrait.df-portrait-flow .df-fiat-art-picture .df-fiat-art,
    body.df-allows-portrait.df-portrait-flow .df-hero-mark img,
    body.df-allows-portrait.df-portrait-flow .df-login-mark img {
        display: block;
        width: 100%;
        height: auto;
        max-height: none;
        margin: 0;
        object-fit: contain;
        object-position: right bottom;
    }

    body.df-home.df-portrait-flow .df-fiat-art-picture .df-fiat-art,
    body.df-home.df-portrait-flow .df-hero-mark img {
        max-height: none;
    }

    body.df-allows-portrait.df-portrait-flow .df-login-card {
        position: relative;
        z-index: 2;
        order: 1;
        flex-shrink: 0;
        width: min(100%, 400px);
        max-width: 100%;
        margin: 0 auto;
        border-width: 10px;
        border-radius: 20px;
    }

    body.df-allows-portrait.df-portrait-flow .df-login-inner {
        min-height: 0;
        padding: clamp(14px, 3.5vw, 22px) clamp(12px, 4vw, 18px);
        border-width: 6px;
    }

    body.df-allows-portrait.df-portrait-flow .df-login-help {
        font-size: 16px;
    }

    body.df-login.df-portrait-flow .df-login-disclaimer {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 30;
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 8px 4vw;
        padding-bottom: max(8px, env(safe-area-inset-bottom));
        font-size: clamp(9px, 2.6vw, 11px);
        line-height: 1.3;
        text-align: center;
    }

    body.df-allows-portrait.df-portrait-flow .df-panel {
        width: min(92vw, 560px);
        min-height: auto;
        margin: 8px auto 20px;
        padding: 12px;
        border-radius: 24px;
        overflow: visible;
        box-shadow: 0 16px 0 rgba(17, 38, 53, 0.16);
    }

    body.df-allows-portrait.df-portrait-flow .df-panel-inner {
        min-height: auto;
        padding: 22px 16px;
        border-width: 7px;
        border-radius: 18px;
    }

    body.df-allows-portrait.df-portrait-flow .df-centered-copy h1,
    body.df-allows-portrait.df-portrait-flow .df-step-title h1 {
        font-size: clamp(20px, 5.5vw, 28px);
        line-height: 1.2;
    }

    body.df-allows-portrait.df-portrait-flow .df-centered-copy h3,
    body.df-allows-portrait.df-portrait-flow .df-step-title h3 {
        font-size: clamp(18px, 4.8vw, 24px);
    }

    body.df-allows-portrait.df-portrait-flow .df-centered-copy p,
    body.df-allows-portrait.df-portrait-flow .df-message-copy p,
    body.df-allows-portrait.df-portrait-flow .df-support-copy p,
    body.df-allows-portrait.df-portrait-flow .df-support-copy li {
        font-size: clamp(15px, 4vw, 18px);
    }

    body.df-allows-portrait.df-portrait-flow .df-message-copy h1,
    body.df-allows-portrait.df-portrait-flow .df-support-copy h1 {
        font-size: clamp(24px, 6.5vw, 32px);
    }

    body.df-allows-portrait.df-portrait-flow .df-access-grid,
    body.df-allows-portrait.df-portrait-flow .df-form-grid {
        grid-template-columns: 1fr;
        gap: 8px;
        margin-top: 12px;
    }

    body.df-allows-portrait.df-portrait-flow .df-form label {
        font-size: 16px;
        margin: 0 0 4px;
    }

    body.df-allows-portrait.df-portrait-flow .df-input,
    body.df-allows-portrait.df-portrait-flow .df-form input[type="text"],
    body.df-allows-portrait.df-portrait-flow .df-form input[type="password"],
    body.df-allows-portrait.df-portrait-flow .df-form select {
        height: 48px;
        margin-bottom: 12px;
        padding: 0 14px;
        font-size: 16px;
    }

    body.df-allows-portrait.df-portrait-flow .df-password-field {
        margin-bottom: 4px;
    }

    body.df-allows-portrait.df-portrait-flow .df-terms-box {
        max-height: 38vh;
        padding: 14px 16px;
        font-size: 14px;
    }

    body.df-allows-portrait.df-portrait-flow .df-checkbox-line {
        align-items: flex-start;
        gap: 12px;
        font-size: 15px;
    }

    body.df-allows-portrait.df-portrait-flow .df-checkbox-line input {
        width: 22px;
        height: 22px;
        margin-top: 2px;
    }

    body.df-allows-portrait.df-portrait-flow .df-access-actions p {
        margin-top: 20px;
        font-size: 15px;
    }

    body.df-allows-portrait.df-portrait-flow .df-primary-btn,
    body.df-allows-portrait.df-portrait-flow .df-outline-btn,
    body.df-allows-portrait.df-portrait-flow .df-login-btn,
    body.df-allows-portrait.df-portrait-flow .df-ok-btn {
        width: 100%;
        min-width: 0;
        min-height: 50px;
        padding: 12px 18px;
        font-size: 17px;
    }

    body.df-allows-portrait.df-portrait-flow .df-primary-btn.mini,
    body.df-allows-portrait.df-portrait-flow .df-outline-btn.mini,
    body.df-allows-portrait.df-portrait-flow .df-login-btn.mini,
    body.df-allows-portrait.df-portrait-flow .df-ok-btn.mini {
        width: 68%;
    }

    body.df-allows-portrait.df-portrait-flow .df-ok-btn {
        margin-top: 28px;
    }

    body.df-login.df-portrait-flow .df-audio-toggle {
        bottom: calc(var(--df-disclaimer-height, 52px) + 10px);
    }

    body.df-home.df-portrait-flow .df-audio-toggle {
        bottom: max(18px, env(safe-area-inset-bottom, 0px));
    }

    /* Jogo: menu, partida, ranking e demais telas logadas */
    body.df-dashboard.df-portrait-flow .df-scale-stage,
    body.df-game-screen.df-portrait-flow .df-scale-stage,
    body.df-board-page.df-portrait-flow .df-scale-stage {
        height: 100dvh;
        max-height: 100dvh;
    }

    body.df-dashboard.df-portrait-flow .df-game-nav,
    body.df-game-screen.df-portrait-flow .df-game-nav,
    body.df-board-page.df-portrait-flow .df-game-nav {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 6px 4vw 8px;
        gap: 10px;
    }

    body.df-game-screen.df-portrait-flow .df-game-nav__toolbar,
    body.df-board-page.df-portrait-flow .df-game-nav__toolbar {
        gap: 8px;
        align-items: center;
    }

    body.df-dashboard.df-portrait-flow .df-game-nav .df-outline-btn,
    body.df-game-screen.df-portrait-flow .df-game-nav .df-outline-btn,
    body.df-board-page.df-portrait-flow .df-game-nav .df-outline-btn {
        min-width: 0;
        min-height: 44px;
        height: 44px;
        padding: 8px 14px;
        font-size: 15px;
        box-sizing: border-box;
    }

    body.df-dashboard.df-portrait-flow .df-game-nav .df-game-menu,
    body.df-board-page.df-portrait-flow .df-game-nav .df-game-menu {
        flex: 1 1 auto;
        min-width: 0;
        max-width: min(72%, 320px);
    }

    body.df-dashboard.df-portrait-flow .df-game-nav .df-nav-menu-btn,
    body.df-board-page.df-portrait-flow .df-game-nav .df-nav-menu-btn {
        width: 100%;
        min-width: 0;
    }

    body.df-dashboard.df-portrait-flow .df-game-nav .df-nav-exit-btn,
    body.df-board-page.df-portrait-flow .df-game-nav .df-nav-exit-btn {
        flex: 0 0 auto;
        width: auto;
        min-width: 88px;
        height: 44px;
        min-height: 44px;
        padding-inline: 14px;
    }

    body.df-game-screen.df-portrait-flow .df-game-nav__toolbar .df-game-menu {
        flex: none;
        max-width: none;
        display: flex;
        align-items: center;
    }

    body.df-game-screen.df-portrait-flow
        .df-game-nav__toolbar
        .df-nav-menu-btn {
        width: auto;
        min-width: 0;
        height: 44px;
        min-height: 44px;
    }

    body.df-game-screen.df-portrait-flow
        .df-game-nav__toolbar
        .df-nav-exit-btn {
        flex: 0 0 auto;
        width: auto;
        min-width: 88px;
        height: 44px;
        min-height: 44px;
        padding-inline: 14px;
    }

    body.df-game-screen.df-portrait-flow .df-game-nav__toolbar .df-game-score,
    body.df-board-page.df-portrait-flow .df-game-nav .df-game-score {
        height: 44px;
        min-height: 44px;
        max-height: 44px;
        max-width: min(44vw, 200px);
        padding: 0 12px;
        font-size: 15px;
        font-weight: 800;
        border-width: 4px;
    }

    body.df-dashboard.df-portrait-flow .df-main,
    body.df-game-screen.df-portrait-flow .df-main {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
    }

    body.df-board-page.df-portrait-flow .df-main {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    body.df-dashboard.df-portrait-flow .df-main > section {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        min-height: 0;
        width: 100%;
        overflow: hidden;
    }

    body.df-game-screen.df-portrait-flow .df-main > section {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        min-height: 0;
        width: 100%;
        overflow: hidden;
    }

    body.df-board-page.df-portrait-flow .df-main > section {
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        min-height: auto;
        overflow: visible;
    }

    body.df-dashboard.df-portrait-flow .df-dashboard-stage {
        flex: 1 1 auto;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        min-height: 0;
        width: 100%;
        padding: 4px 4vw max(10px, env(safe-area-inset-bottom));
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }

    body.df-dashboard.df-portrait-flow .df-player-heading {
        justify-content: center;
        gap: 12px;
        width: 100%;
        text-align: center;
    }

    body.df-dashboard.df-portrait-flow .df-player-heading h1 {
        font-size: clamp(22px, 6vw, 32px);
    }

    body.df-dashboard.df-portrait-flow .df-player-dot {
        width: 32px;
        height: 32px;
    }

    body.df-dashboard.df-portrait-flow .df-score-card {
        width: min(100%, 360px);
        margin-top: 0;
        margin-inline: auto;
        padding: 10px 20px;
        text-align: center;
    }

    body.df-dashboard.df-portrait-flow .df-score-card p {
        display: flex;
        justify-content: center;
        align-items: baseline;
        gap: 0.3em;
        font-size: clamp(16px, 4.2vw, 20px);
    }

    body.df-dashboard.df-portrait-flow .df-score-card small,
    body.df-dashboard.df-portrait-flow .df-score-card [data-score-rank] {
        display: block;
        text-align: center;
        font-size: clamp(16px, 4.6vw, 20px);
        font-weight: 600;
        line-height: 1.25;
    }

    body.df-dashboard.df-portrait-flow .df-score-card strong {
        font-size: clamp(28px, 8vw, 38px);
    }

    body.df-dashboard.df-portrait-flow .df-play-btn {
        width: min(100%, 320px);
        min-width: 0;
        min-height: 50px;
        margin-top: 4px;
        margin-inline: auto;
    }

    body.df-dashboard.df-portrait-flow .df-card-carousel {
        width: 100%;
        max-width: 100%;
        grid-template-columns: 36px minmax(0, 1fr) 36px;
        align-items: center;
        justify-items: center;
        margin-top: 4px;
        margin-inline: auto;
    }

    body.df-dashboard.df-portrait-flow .df-card-strip {
        min-height: clamp(200px, 32svh, 280px);
        padding: 8px 0 clamp(28px, 5vw, 40px);
        overflow: visible;
        container-type: size;
        container-name: df-dashboard-strip;
    }

    body.df-dashboard.df-portrait-flow .df-card-strip > .df-mini-card {
        width: clamp(100px, 28vw, 140px);
    }

    body.df-dashboard.df-portrait-flow .df-circle-btn {
        width: 36px;
        height: 36px;
    }

    body.df-dashboard.df-portrait-flow .df-dashboard-links {
        margin-top: 8px;
        font-size: clamp(12px, 3.4vw, 15px);
        text-align: center;
    }

    body.df-board-page.df-portrait-flow .df-wide-board {
        flex: 0 0 auto;
        width: min(92vw, 560px);
        min-height: auto;
        height: auto;
        margin: 8px auto 0;
        padding: 14px 16px 20px;
        overflow: visible;
    }

    body.df-board-page.df-portrait-flow .df-wide-board:has(.df-wallpaper-grid) {
        min-height: auto;
    }

    body.df-board-page.df-portrait-flow .df-wide-board h1 {
        margin-bottom: 12px;
        font-size: clamp(24px, 7vw, 34px);
    }

    body.df-board-page.df-portrait-flow .df-board-subtitle {
        margin-bottom: 16px;
        font-size: clamp(14px, 4vw, 18px);
    }

    body.df-board-page.df-portrait-flow .df-ranking-board {
        overflow: visible;
    }

    body.df-board-page.df-portrait-flow .df-ranking-board .df-ranking-list {
        flex: none;
        max-height: none;
        margin-top: 12px;
        padding-right: 0;
        overflow: visible;
    }

    body.df-board-page.df-portrait-flow .df-ranking-row {
        min-height: 44px;
        padding: 8px 12px;
        font-size: clamp(14px, 3.8vw, 17px);
    }

    body.df-board-page.df-portrait-flow .df-sweepstakes-board {
        overflow: visible;
    }

    body.df-board-page.df-portrait-flow
        .df-sweepstakes-board
        .df-sweepstakes-list {
        flex: none;
        max-height: none;
        margin-top: 12px;
        padding-right: 0;
        overflow: visible;
    }

    body.df-board-page.df-portrait-flow .df-sweepstakes-row {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.95fr) minmax(
                0,
                0.85fr
            );
        gap: 10px;
        min-height: 44px;
        padding: 8px 12px;
        font-size: clamp(13px, 3.6vw, 16px);
    }

    body.df-board-page.df-portrait-flow .df-sweepstakes-row--head {
        padding: 0 12px 2px;
        font-size: clamp(11px, 3vw, 13px);
    }

    body.df-board-page.df-portrait-flow .df-wallpaper-grid {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    body.df-board-page.df-portrait-flow .df-wallpaper-card {
        width: min(300px, 88vw);
        flex-basis: auto;
    }

    body.df-board-page.df-portrait-flow .df-fiat-footer {
        flex-shrink: 0;
        width: 44px;
        height: 44px;
        margin: 12px auto max(16px, env(safe-area-inset-bottom));
    }

    body.df-game-screen.df-portrait-flow .df-fiat-footer {
        flex-shrink: 0;
        width: 44px;
        height: 44px;
        margin: 4px auto max(8px, env(safe-area-inset-bottom));
    }

    body.df-game-screen.df-portrait-flow .df-game-arena {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
    }

    body.df-game-screen.df-portrait-flow .df-game-panel {
        flex: 1 1 auto;
        width: 100%;
        max-width: 100%;
        min-height: 0;
        margin: 0;
        padding: 8px 3vw 12px;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }

    body.df-game-screen.df-portrait-flow {
        --df-deck-card-width: min(52vw, 200px);
        --df-battle-card-width: min(40vw, 158px);
        --df-portrait-duel-card-width: min(
            92vw,
            calc(46svh * 249 / 352),
            300px
        );
    }

    body.df-game-screen.df-portrait-flow .df-deck-view {
        position: relative;
        z-index: 1;
        gap: clamp(10px, 2.5svh, 18px);
    }

    body.df-game-screen.df-portrait-flow .df-deck-view .df-playing-card {
        width: var(--df-deck-card-width);
    }

    body.df-game-screen.df-portrait-flow .df-deck-stack {
        filter: drop-shadow(0 14px 0 rgba(87, 107, 24, 0.28));
    }

    body.df-game-screen.df-portrait-flow .df-battle-view .df-playing-card {
        width: var(--df-portrait-duel-card-width);
        max-width: 100%;
    }

    body.df-game-screen.df-portrait-flow .df-deal-hands {
        z-index: 14;
    }

    body.df-game-screen.df-portrait-flow .df-deal-hand-slot {
        width: clamp(96px, 26vw, 128px);
        bottom: 32%;
    }

    body.df-game-screen.df-portrait-flow
        .df-game-panel.is-dealing-hands
        .df-deal-hand-slot--user {
        animation-name: df-hand-deal-user-portrait;
    }

    body.df-game-screen.df-portrait-flow
        .df-game-panel.is-dealing-hands
        .df-deal-hand-slot--machine {
        animation-name: df-hand-deal-machine-portrait;
    }

    body.df-game-screen.df-portrait-flow
        .df-game-panel.is-dealing-hands
        .df-deck-view {
        z-index: 1;
    }

    body.df-game-screen.df-portrait-flow
        .df-game-panel.is-dealing-hands
        .df-deal-hands {
        z-index: 16;
    }

    body.df-game-screen.df-portrait-flow .df-battle-view[hidden],
    body.df-game-screen.df-portrait-flow
        .df-game-panel:has(.df-battle-view:not([hidden]))
        .df-deck-view {
        display: none !important;
    }

    body.df-game-screen.df-portrait-flow .df-deck-view:not([hidden]) {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: clamp(14px, 3svh, 22px);
        min-height: 0;
    }

    body.df-game-screen.df-portrait-flow .df-deck-view .df-deal-btn {
        position: relative;
        margin: 0;
    }

    body.df-game-screen.df-portrait-flow
        .df-game-panel:has(.df-battle-view:not([hidden])) {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        overflow: visible;
    }

    body.df-game-screen.df-portrait-flow
        .df-game-arena:has(.df-battle-view:not([hidden])) {
        overflow: visible;
    }

    body.df-game-screen.df-portrait-flow .df-battle-view {
        display: grid !important;
        flex: 1 1 auto;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: minmax(0, 1fr) auto !important;
        grid-template-areas: "cards" "actions" !important;
        align-content: stretch;
        justify-items: center;
        gap: clamp(12px, 2svh, 18px) !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 0;
        padding: 0;
        overflow: visible;
    }

    body.df-game-screen.df-portrait-flow
        .df-battle-view:not(.is-portrait-picking):not(.is-portrait-revealed)
        .df-versus,
    body.df-game-screen.df-portrait-flow
        .df-battle-view:not(.is-portrait-picking):not(.is-portrait-revealed)
        .df-player-side
        > span,
    body.df-game-screen.df-portrait-flow
        .df-battle-view:not(.is-portrait-picking):not(.is-portrait-revealed)
        .df-machine-side
        > span {
        display: none !important;
    }

    body.df-game-screen.df-portrait-flow .df-battle-view.is-portrait-picking,
    body.df-game-screen.df-portrait-flow .df-battle-view.is-portrait-revealed {
        position: relative;
    }

    body.df-game-screen.df-portrait-flow
        .df-battle-view.is-portrait-picking
        .df-middle-view,
    body.df-game-screen.df-portrait-flow
        .df-battle-view.is-portrait-revealed
        .df-middle-view {
        position: static !important;
    }

    body.df-game-screen.df-portrait-flow
        .df-battle-view.is-portrait-picking
        .df-versus,
    body.df-game-screen.df-portrait-flow
        .df-battle-view.is-portrait-revealed
        .df-versus {
        display: block !important;
        position: absolute;
        left: 50%;
        top: 44%;
        z-index: 10;
        font-size: clamp(34px, 10vw, 52px);
        -webkit-text-stroke: clamp(2px, 0.55vw, 4px) var(--df-deep);
        transform: translate(-50%, -50%);
        pointer-events: none;
        width: auto;
    }

    body.df-game-screen.df-portrait-flow .df-battle-view .df-player-side,
    body.df-game-screen.df-portrait-flow .df-battle-view .df-machine-side {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        justify-self: center;
        align-self: center;
        width: var(--df-portrait-duel-card-width) !important;
        max-width: 100%;
        margin: 0 !important;
        pointer-events: none;
        position: relative;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
    }

    body.df-game-screen.df-portrait-flow .df-battle-view .df-player-side > div,
    body.df-game-screen.df-portrait-flow
        .df-battle-view
        .df-machine-side
        > div {
        justify-self: center !important;
        pointer-events: auto;
        width: 100%;
    }

    body.df-game-screen.df-portrait-flow .df-battle-view.is-portrait-picking,
    body.df-game-screen.df-portrait-flow .df-battle-view.is-portrait-revealed {
        --df-portrait-duel-overlap: min(6vw, 40px);
        --df-portrait-duel-card-width: min(
            calc((100vw - var(--df-portrait-duel-overlap) - 1vw) / 2),
            calc(52svh * 249 / 352),
            360px
        );
        --df-portrait-duel-half-offset: calc(
            (
                    var(--df-portrait-duel-card-width) -
                        var(--df-portrait-duel-overlap)
                ) /
                2
        );
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: minmax(0, 1fr) auto !important;
        grid-template-areas: "cards" "actions" !important;
        align-items: center;
        justify-items: center;
    }

    body.df-game-screen.df-portrait-flow
        .df-battle-view.is-portrait-picking
        .df-player-side,
    body.df-game-screen.df-portrait-flow
        .df-battle-view.is-portrait-picking
        .df-machine-side,
    body.df-game-screen.df-portrait-flow
        .df-battle-view.is-portrait-revealed
        .df-player-side,
    body.df-game-screen.df-portrait-flow
        .df-battle-view.is-portrait-revealed
        .df-machine-side {
        grid-area: cards !important;
        justify-self: center !important;
        width: var(--df-portrait-duel-card-width) !important;
        max-width: none;
        margin: 0 !important;
    }

    body.df-game-screen.df-portrait-flow
        .df-battle-view.is-portrait-picking
        .df-machine-side,
    body.df-game-screen.df-portrait-flow
        .df-battle-view.is-portrait-revealed
        .df-machine-side {
        display: flex !important;
    }

    body.df-game-screen.df-portrait-flow
        .df-battle-view.is-portrait-picking
        .df-player-side,
    body.df-game-screen.df-portrait-flow
        .df-battle-view.is-portrait-revealed
        .df-player-side {
        transform: translateX(
            calc(-1 * var(--df-portrait-duel-half-offset, 24vw))
        ) !important;
        z-index: 3;
    }

    body.df-game-screen.df-portrait-flow
        .df-battle-view.is-portrait-picking
        .df-machine-side,
    body.df-game-screen.df-portrait-flow
        .df-battle-view.is-portrait-revealed
        .df-machine-side {
        transform: translateX(
            var(--df-portrait-duel-half-offset, 24vw)
        ) !important;
        z-index: 2;
    }

    body.df-game-screen.df-portrait-flow
        .df-battle-view.is-portrait-picking
        .df-machine-side
        > div,
    body.df-game-screen.df-portrait-flow
        .df-battle-view.is-portrait-revealed
        .df-machine-side
        > div {
        margin-top: 0;
    }

    body.df-game-screen.df-portrait-flow
        .df-battle-view.is-portrait-picking
        .df-player-side
        > span,
    body.df-game-screen.df-portrait-flow
        .df-battle-view.is-portrait-picking
        .df-machine-side
        > span,
    body.df-game-screen.df-portrait-flow
        .df-battle-view.is-portrait-revealed
        .df-player-side
        > span,
    body.df-game-screen.df-portrait-flow
        .df-battle-view.is-portrait-revealed
        .df-machine-side
        > span {
        display: block !important;
        margin: 0 0 6px;
        font-size: clamp(15px, 4.2vw, 20px);
        font-weight: 700;
        line-height: 1.1;
        text-align: center;
        text-transform: uppercase;
        color: var(--df-deep);
    }

    body.df-game-screen.df-portrait-flow
        .df-battle-view.is-portrait-picking
        [data-user-card],
    body.df-game-screen.df-portrait-flow
        .df-battle-view.is-portrait-picking
        [data-machine-card],
    body.df-game-screen.df-portrait-flow
        .df-battle-view.is-portrait-revealed
        [data-user-card],
    body.df-game-screen.df-portrait-flow
        .df-battle-view.is-portrait-revealed
        [data-machine-card] {
        justify-content: flex-start;
        width: 100%;
    }

    body.df-game-screen.df-portrait-flow
        .df-battle-view.is-portrait-picking
        [data-machine-card] {
        pointer-events: none;
    }

    body.df-game-screen.df-portrait-flow
        .df-battle-view.is-portrait-revealed
        .df-result-banner {
        position: relative;
        top: auto;
        left: auto;
        order: 0;
        width: min(88%, 240px);
        margin: 0 auto 10px !important;
        transform: none;
    }

    body.df-game-screen.df-portrait-flow
        .df-battle-view.is-portrait-revealed
        .df-result-banner--tie {
        margin-bottom: 10px !important;
    }

    body.df-game-screen.df-portrait-flow
        .df-battle-view.is-portrait-revealed
        .df-playing-card {
        margin-top: 0;
    }

    body.df-game-screen.df-portrait-flow
        .df-battle-view.is-portrait-revealed.is-portrait-front-user
        .df-player-side {
        z-index: 5;
    }

    body.df-game-screen.df-portrait-flow
        .df-battle-view.is-portrait-revealed.is-portrait-front-user
        .df-machine-side {
        z-index: 3;
    }

    body.df-game-screen.df-portrait-flow
        .df-battle-view.is-portrait-revealed.is-portrait-front-machine
        .df-machine-side {
        z-index: 5;
    }

    body.df-game-screen.df-portrait-flow
        .df-battle-view.is-portrait-revealed.is-portrait-front-machine
        .df-player-side {
        z-index: 3;
    }

    body.df-game-screen.df-portrait-flow
        .df-battle-view.is-portrait-revealed
        [data-user-card],
    body.df-game-screen.df-portrait-flow
        .df-battle-view.is-portrait-revealed
        [data-machine-card] {
        cursor: pointer;
    }

    body.df-game-screen.df-portrait-flow
        .df-battle-view.is-portrait-revealed
        .df-playing-card:not(.is-flip-enter) {
        transition:
            transform 220ms ease,
            box-shadow 220ms ease;
    }

    body.df-game-screen.df-portrait-flow
        [data-machine-card].is-flipping
        > .df-card-back,
    body.df-game-screen.df-portrait-flow
        [data-machine-card]
        > .df-playing-card.is-flip-enter {
        transition: none !important;
    }

    body.df-game-screen.df-portrait-flow .df-battle-view .df-middle-view {
        grid-area: actions;
        grid-column: 1 / -1 !important;
        justify-self: center;
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        display: flex !important;
        flex: 0 0 auto;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px;
        width: 100% !important;
        max-width: min(320px, 92vw) !important;
        margin: 0 auto !important;
        padding-top: 0;
        z-index: 6;
    }

    body.df-game-screen.df-portrait-flow
        .df-middle-view
        .df-selected-attribute {
        display: none !important;
    }

    body.df-game-screen.df-portrait-flow .df-round-actions {
        position: relative !important;
        bottom: auto !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px;
        width: 100% !important;
        margin: 0 auto !important;
    }

    body.df-game-screen.df-portrait-flow
        .df-round-actions
        .df-primary-btn[hidden] {
        display: none !important;
    }

    body.df-game-screen.df-portrait-flow .df-round-actions .df-primary-btn {
        width: min(100%, 280px) !important;
        min-width: 0 !important;
        min-height: 48px;
        margin: 0 auto !important;
        font-size: clamp(15px, 4vw, 18px);
    }

    @media screen and (orientation: portrait) and (max-height: 740px) {
        body.df-game-screen.df-portrait-flow
            .df-battle-view.is-portrait-picking,
        body.df-game-screen.df-portrait-flow
            .df-battle-view.is-portrait-revealed {
            --df-portrait-duel-overlap: min(5vw, 36px);
            --df-portrait-duel-card-width: min(
                calc((100vw - var(--df-portrait-duel-overlap) - 1vw) / 2),
                calc(46svh * 249 / 352),
                320px
            );
        }
    }

    body.df-game-screen.df-portrait-flow .df-user-card-note {
        margin-top: 8px;
        padding-inline: 4vw;
        font-size: clamp(13px, 3.6vw, 16px);
        line-height: 1.35;
        text-align: center;
    }

    body.df-game-screen.df-portrait-flow .df-attribute-modal {
        place-items: center;
        padding: max(10px, env(safe-area-inset-top, 0px)) 3vw
            max(10px, env(safe-area-inset-bottom, 0px));
        box-sizing: border-box;
    }

    body.df-game-screen.df-portrait-flow .df-modal-card {
        display: flex;
        flex-direction: column;
        width: min(92vw, 380px);
        min-height: 0 !important;
        max-height: min(86dvh, 100%);
        padding: 12px 12px 14px;
        border-radius: 22px;
        overflow: hidden;
        box-sizing: border-box;
    }

    body.df-game-screen.df-portrait-flow .df-modal-card h2 {
        flex-shrink: 0;
        margin: 0 0 10px;
        padding: 0 40px 0 4px;
        font-size: clamp(15px, 4.1vw, 19px);
        line-height: 1.2;
    }

    body.df-game-screen.df-portrait-flow .df-modal-close {
        top: 10px;
        right: 10px;
        width: 34px;
        height: 34px;
        border-width: 2px;
        border-radius: 8px;
        font-size: 18px;
    }

    body.df-game-screen.df-portrait-flow .df-attribute-grid {
        flex: 1 1 auto;
        grid-template-columns: repeat(3, 1fr);
        gap: clamp(8px, 1.8vh, 12px) clamp(4px, 1.5vw, 8px);
        max-width: 100%;
        min-height: 0;
        margin: 0 0 10px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    body.df-game-screen.df-portrait-flow .df-attribute-option {
        min-height: 0;
        gap: 5px;
        font-size: clamp(8px, 2.35vw, 10px);
        line-height: 1.15;
        letter-spacing: 0.02em;
        hyphens: auto;
    }

    body.df-game-screen.df-portrait-flow .df-attribute-option i {
        width: clamp(46px, 13.5vw, 58px);
        height: clamp(46px, 13.5vw, 58px);
        border-radius: 10px;
    }

    body.df-game-screen.df-portrait-flow .df-attribute-option img,
    body.df-game-screen.df-portrait-flow .df-attribute-option svg {
        width: 52%;
        height: 52%;
    }

    body.df-game-screen.df-portrait-flow .df-attribute-hint {
        flex-shrink: 0;
        margin: -4px 0 10px;
        padding: 0 6px;
        font-size: clamp(11px, 3vw, 13px);
        line-height: 1.3;
        min-height: 2.6em;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body.df-game-screen.df-portrait-flow .df-modal-card .df-primary-btn {
        flex-shrink: 0;
        width: 100%;
        min-width: 0;
        min-height: 44px;
        margin: 0;
        font-size: clamp(12px, 3.4vw, 15px);
    }

    @media screen and (orientation: portrait) and (max-height: 740px) {
        body.df-game-screen.df-portrait-flow .df-modal-card {
            width: min(94vw, 360px);
            max-height: 90dvh;
            padding: 10px 10px 12px;
            border-radius: 18px;
        }

        body.df-game-screen.df-portrait-flow .df-modal-card h2 {
            margin-bottom: 38px;
            font-size: clamp(14px, 3.8vw, 17px);
        }

        body.df-game-screen.df-portrait-flow .df-attribute-grid {
            gap: 8px 6px;
            margin-bottom: 8px;
        }

        body.df-game-screen.df-portrait-flow .df-attribute-option {
            gap: 4px;
            font-size: clamp(7px, 2.1vw, 9px);
        }

        body.df-game-screen.df-portrait-flow .df-attribute-option i {
            width: clamp(40px, 12vw, 50px);
            height: clamp(40px, 12vw, 50px);
        }

        body.df-game-screen.df-portrait-flow .df-modal-card .df-primary-btn {
            min-height: 40px;
            font-size: clamp(11px, 3.1vw, 13px);
        }
    }
}

/* Batalha portrait: fora da media de orientação (segue df-portrait-flow do JS) */
body.df-game-screen.df-portrait-flow .df-battle-view:not([hidden]) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    grid-template-areas: "cards" "actions" !important;
}

body.df-game-screen.df-portrait-flow
    .df-battle-view.is-portrait-picking:not([hidden]),
body.df-game-screen.df-portrait-flow
    .df-battle-view.is-portrait-revealed:not([hidden]) {
    --df-portrait-duel-overlap: min(6vw, 40px);
    --df-portrait-duel-card-width: min(
        calc((100vw - var(--df-portrait-duel-overlap) - 1vw) / 2),
        calc(52svh * 249 / 352),
        360px
    );
    --df-portrait-duel-half-offset: calc(
        (var(--df-portrait-duel-card-width) - var(--df-portrait-duel-overlap)) /
            2
    );
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "cards" "actions" !important;
}

body.df-game-screen.df-portrait-flow .df-battle-view .df-player-side,
body.df-game-screen.df-portrait-flow .df-battle-view .df-machine-side {
    display: flex !important;
}

body.df-game-screen.df-portrait-flow
    .df-battle-view.is-portrait-picking
    .df-player-side,
body.df-game-screen.df-portrait-flow
    .df-battle-view.is-portrait-picking
    .df-machine-side,
body.df-game-screen.df-portrait-flow
    .df-battle-view.is-portrait-revealed
    .df-player-side,
body.df-game-screen.df-portrait-flow
    .df-battle-view.is-portrait-revealed
    .df-machine-side {
    grid-area: cards !important;
}

body.df-game-screen.df-portrait-flow
    .df-battle-view.is-portrait-picking
    .df-player-side,
body.df-game-screen.df-portrait-flow
    .df-battle-view.is-portrait-revealed
    .df-player-side {
    transform: translateX(
        calc(-1 * var(--df-portrait-duel-half-offset, 24vw))
    ) !important;
}

body.df-game-screen.df-portrait-flow
    .df-battle-view.is-portrait-picking
    .df-machine-side,
body.df-game-screen.df-portrait-flow
    .df-battle-view.is-portrait-revealed
    .df-machine-side {
    display: flex !important;
    transform: translateX(var(--df-portrait-duel-half-offset, 24vw)) !important;
}

body.df-game-screen.df-portrait-flow
    .df-battle-view.is-portrait-revealed
    .df-player-side
    > span,
body.df-game-screen.df-portrait-flow
    .df-battle-view.is-portrait-revealed
    .df-machine-side
    > span {
    display: block !important;
}

body.df-game-screen.df-portrait-flow
    .df-battle-view.is-portrait-revealed
    .df-result-banner {
    margin: 0 auto 10px !important;
}

body.df-game-screen.df-portrait-flow .df-battle-view .df-middle-view {
    grid-area: actions;
    grid-column: 1 / -1 !important;
}

body.df-game-screen.df-portrait-flow .df-middle-view .df-selected-attribute {
    display: none !important;
}

body.df-game-screen.df-portrait-flow
    .df-game-panel:has(.df-battle-view:not([hidden]))
    .df-deck-view {
    display: none !important;
}

/* Modal de atributos portrait (segue df-portrait-flow do JS) */
body.df-game-screen.df-portrait-flow .df-modal-card {
    display: flex;
    flex-direction: column;
    min-height: 0 !important;
    max-height: min(86dvh, 100%);
}

body.df-game-screen.df-portrait-flow .df-attribute-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(8px, 1.8vh, 12px) clamp(4px, 1.5vw, 8px);
}

body.df-game-screen.df-portrait-flow .df-attribute-option {
    min-height: 0;
    gap: 5px;
    font-size: clamp(8px, 2.35vw, 10px);
    line-height: 1.15;
}

body.df-game-screen.df-portrait-flow .df-attribute-option i {
    width: clamp(46px, 13.5vw, 58px);
    height: clamp(46px, 13.5vw, 58px);
    border-radius: 10px;
}

body.df-game-screen.df-portrait-flow .df-modal-card .df-primary-btn {
    width: 100%;
    min-width: 0;
}

@media screen and (orientation: landscape) and (max-width: 1199px),
    screen and (orientation: landscape) and (max-height: 700px) {
    body.df-page {
        min-height: 100vh;
        min-height: 100svh;
        min-height: 100dvh;
        overflow-x: hidden;
    }

    .df-header {
        height: 64px;
        min-height: 0;
        padding: 8px max(16px, env(safe-area-inset-right)) 0
            max(16px, env(safe-area-inset-left));
        gap: 12px;
    }

    .df-header .df-title {
        width: min(92vw, 780px);
        max-height: 48px;
        object-fit: contain;
    }

    .df-main {
        display: grid;
        min-height: calc(100vh - 64px);
        min-height: calc(100svh - 64px);
        min-height: calc(100dvh - 64px);
    }

    .df-main > section {
        min-width: 0;
    }

    .df-game-nav .df-outline-btn {
        min-width: 92px;
        min-height: 38px;
        padding: 7px 12px;
        border-width: 3px;
        font-size: 15px;
    }

    body.df-game-screen .df-game-nav__toolbar .df-game-score,
    body.df-game-screen .df-game-nav__toolbar .df-nav-exit-btn {
        height: 38px;
        min-height: 38px;
        max-height: 38px;
    }

    body.df-game-screen .df-game-nav__toolbar .df-game-score {
        font-size: 15px;
        border-width: 3px;
    }

    .df-primary-btn {
        min-width: 0;
        min-height: 44px;
        padding: 9px 16px;
        border-width: 3px;
        font-size: clamp(14px, 2.8svh, 18px);
    }

    .df-home-stage,
    .df-login-stage {
        grid-template-columns: minmax(190px, 0.95fr) minmax(220px, 1.05fr);
        column-gap: clamp(16px, 4vw, 44px);
        align-items: center;
        height: calc(100vh - 64px);
        height: calc(100svh - 64px);
        height: calc(100dvh - 64px);
        min-height: 0;
        padding: 0 4vw max(12px, env(safe-area-inset-bottom));
        overflow: visible;
    }

    .df-login-stage {
        padding-bottom: 0;
    }

    body.df-login:not(.df-portrait-flow) .df-scale-stage {
        height: calc(100dvh - var(--df-disclaimer-height, 48px));
        max-height: calc(100dvh - var(--df-disclaimer-height, 48px));
        overflow: hidden;
    }

    .df-home-stage .df-home-copy {
        grid-column: 1;
        max-width: 330px;
        align-self: center;
    }

    .df-home-stage .df-hero-mark,
    .df-login-stage .df-hero-mark {
        position: absolute;
        top: 50%;
        right: 0;
        bottom: auto;
        grid-column: auto;
        width: min(760px, 70vw);
        max-width: none;
        height: calc(100% + 40px);
        min-height: 0;
        transform: translate(var(--df-hero-bleed, 12vw), -44%);
        transform-origin: right center;
    }

    .df-home-stage .df-hero-mark img,
    .df-login-stage .df-hero-mark img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .df-kicker {
        font-size: clamp(20px, 4.3svh, 32px);
    }

    .df-home-copy h1 {
        margin: 4px 0 10px;
        font-size: clamp(27px, 6svh, 42px);
    }

    .df-subtitle {
        margin-bottom: 16px;
        font-size: clamp(16px, 3.4svh, 24px);
    }

    .df-actions-row {
        gap: 10px;
    }

    .df-login-stage .df-login-card {
        grid-column: 1;
        position: relative;
        z-index: 2;
        width: min(100%, 420px);
        justify-self: center;
        align-self: center;
        border-width: 6px;
        border-radius: 16px;
    }

    .df-login-inner {
        padding: 9px 14px;
        border-width: 4px;
        border-radius: 12px;
    }

    .df-login-btn {
        margin-top: 8px;
    }

    .df-login-help {
        margin-top: 8px;
        font-size: clamp(11px, 2.3svh, 14px);
    }

    body.df-login:not(.df-portrait-flow) .df-login-disclaimer {
        padding: 6px clamp(12px, 3vw, 40px);
        padding-bottom: max(6px, env(safe-area-inset-bottom));
        font-size: clamp(8px, 1.7svh, 10px);
        line-height: 1.12;
    }

    body.df-login:not(.df-portrait-flow) .df-audio-toggle {
        bottom: calc(var(--df-disclaimer-height, 48px) + 8px);
    }

    .df-form label {
        margin-bottom: 4px;
        font-size: clamp(12px, 2.5svh, 15px);
    }

    .df-input,
    .df-form input[type="text"],
    .df-form input[type="password"],
    .df-form select {
        height: 36px;
        margin-bottom: 9px;
        padding: 0 12px;
        font-size: clamp(12px, 2.4svh, 15px);
    }

    .df-password-field {
        margin-bottom: 9px;
    }

    .df-select-wrap::after {
        top: 18px;
        right: 16px;
        width: 18px;
        height: 18px;
        transform: translateY(-50%);
    }

    .df-select-wrap select {
        padding-right: 48px;
    }

    .df-eye-btn {
        top: 18px;
        right: 10px;
        width: 28px;
        height: 28px;
        -webkit-mask-size: 20px 20px;
        mask-size: 20px 20px;
    }

    .df-panel,
    .df-wide-board,
    .df-game-panel {
        width: min(94vw, 1120px);
        min-height: calc(100vh - 88px);
        min-height: calc(100svh - 88px);
        min-height: calc(100dvh - 88px);
        margin: 8px auto max(10px, env(safe-area-inset-bottom));
        padding: 10px 12px;
        overflow: auto;
    }

    .df-panel-inner {
        min-height: calc(100vh - 112px);
        min-height: calc(100svh - 112px);
        min-height: calc(100dvh - 112px);
        padding: 16px 14px;
        border-width: 5px;
        border-radius: 16px;
    }

    .df-register-form,
    .df-access-form,
    .df-terms-form {
        margin-top: 14px;
    }

    .df-form-grid,
    .df-access-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
        margin-top: 18px;
    }

    .df-access-actions p {
        margin-top: 18px;
        font-size: clamp(14px, 2.8svh, 18px);
    }

    .df-terms-box {
        max-height: 26svh;
        padding: 12px 16px;
        font-size: 13px;
    }

    .df-centered-copy h1,
    .df-step-title h1,
    .df-message-copy h1,
    .df-support-copy h1,
    .df-wide-board h1 {
        font-size: clamp(22px, 5svh, 34px);
    }

    .df-centered-copy h3,
    .df-step-title h3 {
        font-size: clamp(20px, 4.5svh, 30px);
    }

    .df-centered-copy p,
    .df-message-copy p,
    .df-support-copy p,
    .df-support-copy li,
    .df-board-subtitle {
        font-size: clamp(14px, 3svh, 20px);
    }

    .df-wide-board:has(.df-wallpaper-grid) h1 {
        font-size: clamp(20px, 4svh, 28px);
    }

    .df-wide-board:has(.df-wallpaper-grid) .df-board-subtitle {
        font-size: clamp(13px, 2.5svh, 17px);
    }

    .df-dashboard-stage {
        justify-content: space-between;
        min-height: calc(100vh - 64px);
        min-height: calc(100svh - 64px);
        min-height: calc(100dvh - 64px);
        padding: 8px 4vw max(10px, env(safe-area-inset-bottom));
        gap: 8px;
        overflow: auto;
    }

    .df-player-heading {
        gap: 10px;
    }

    .df-player-heading h1 {
        font-size: clamp(22px, 5svh, 34px);
    }

    .df-player-dot {
        width: 28px;
        height: 28px;
    }

    .df-score-card {
        width: min(340px, 78vw);
        margin-top: 0;
        padding: 8px 24px;
    }

    .df-score-card p {
        font-size: clamp(15px, 3svh, 19px);
    }

    .df-score-card strong {
        font-size: clamp(24px, 6svh, 34px);
    }

    .df-play-btn {
        width: min(240px, 64vw);
        margin-top: 0;
    }

    .df-card-carousel {
        grid-template-columns: 42px minmax(0, 1fr) 42px;
        width: min(760px, 92vw);
        margin-top: 0;
    }

    .df-card-strip {
        min-height: clamp(130px, 36svh, 190px);
    }

    .df-mini-card {
        flex-basis: clamp(86px, 14vw, 120px);
        width: clamp(86px, 14vw, 120px);
        height: clamp(120px, 28svh, 160px);
        margin: 0 -8px;
        padding: 8px;
        border-width: 3px;
        border-radius: 12px;
    }

    .df-mini-card > span {
        min-height: 22px;
        font-size: 11px;
    }

    .df-circle-btn {
        width: 38px;
        height: 38px;
    }

    .df-dashboard-links {
        margin-top: 0;
        gap: 3px;
        font-size: clamp(12px, 2.6svh, 16px);
    }

    .df-wide-board {
        padding: 18px 20px;
    }

    .df-board-subtitle {
        margin-bottom: 20px;
    }

    .df-ranking-list,
    .df-sweepstakes-grid,
    .df-ticket-list {
        margin-top: 18px;
    }

    .df-ranking-row {
        min-height: 44px;
        padding: 8px 12px;
        font-size: clamp(14px, 2.8svh, 18px);
    }

    .df-sweepstakes-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .df-wallpaper-grid {
        gap: 20px;
    }

    .df-wallpaper-card {
        width: min(300px, 88vw);
        flex-basis: auto;
    }

    .df-sweep-card {
        min-height: 96px;
        padding: 12px;
    }

    .df-sweep-card span,
    .df-wallpaper-card h2,
    .df-wallpaper-card p,
    .df-download-link {
        font-size: clamp(13px, 2.6svh, 16px);
    }

    .df-sweep-card strong {
        margin-top: 6px;
        font-size: clamp(28px, 7svh, 42px);
    }

    .df-game-arena {
        display: grid;
        min-height: calc(100vh - 64px);
        min-height: calc(100svh - 64px);
        min-height: calc(100dvh - 64px);
    }

    .df-game-panel {
        align-self: stretch;
        justify-self: center;
        overflow: visible;
    }

    .df-deck-view {
        gap: 10px;
    }

    .df-playing-card {
        width: min(180px, 22vw, 38svh);
        height: auto;
        aspect-ratio: 249 / 352;
        border-radius: 16px;
    }

    .df-card-back {
        padding: 0;
        border-width: 0;
    }

    .df-trump-card {
        padding: 0;
        border-width: 0;
    }

    .df-trump-title {
        font-size: clamp(7px, 3.5cqw, 12px);
    }

    body.df-game-screen:not(.df-portrait-flow) .df-battle-view {
        grid-template-columns:
            minmax(0, 0.52fr) minmax(90px, 180px) minmax(220px, 1.28fr)
            minmax(90px, 180px) minmax(0, 0.52fr);
        column-gap: clamp(8px, 1.2vw, 16px);
        row-gap: 0;
    }

    body.df-game-screen:not(.df-portrait-flow) .df-player-side,
    body.df-game-screen:not(.df-portrait-flow) .df-machine-side {
        display: contents;
    }

    body.df-game-screen:not(.df-portrait-flow) .df-player-side > span {
        grid-column: 1;
        grid-row: 1;
        justify-self: end;
    }

    body.df-game-screen:not(.df-portrait-flow) .df-player-side > div {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
    }

    body.df-game-screen:not(.df-portrait-flow) .df-middle-view {
        grid-column: 3;
        grid-row: 1;
        max-width: min(360px, 92%);
    }

    body.df-game-screen:not(.df-portrait-flow) .df-machine-side > div {
        grid-column: 4;
        grid-row: 1;
        justify-self: start;
    }

    body.df-game-screen:not(.df-portrait-flow) .df-machine-side > span {
        grid-column: 5;
        grid-row: 1;
        justify-self: start;
    }

    body.df-game-screen:not(.df-portrait-flow) .df-player-side > span,
    body.df-game-screen:not(.df-portrait-flow) .df-machine-side > span {
        font-size: clamp(14px, 2.6svh, 20px);
    }

    .df-round-actions {
        bottom: max(6px, env(safe-area-inset-bottom));
        gap: 8px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .df-round-actions .df-primary-btn {
        width: min(200px, 38vw);
        min-height: 40px;
        font-size: 14px;
    }

    .df-attribute-grid {
        gap: 10px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .df-attribute-option i {
        width: 48px;
        height: 48px;
    }

    .df-modal-card {
        width: min(620px, 92vw);
        max-height: 88svh;
        overflow: auto;
        padding: 16px 14px 20px;
    }

    .df-fiat-footer {
        position: static;
        margin-top: 0;
        width: 52px;
        height: 52px;
    }
}

@media screen and (orientation: landscape) and (max-width: 640px) {
    .df-home-stage,
    .df-login-stage {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 8px;
        justify-items: center;
        overflow: auto;
    }

    .df-home-stage .df-home-copy {
        grid-column: 1;
        justify-self: center;
        text-align: center;
    }

    .df-home-stage .df-hero-mark,
    .df-login-stage .df-hero-mark {
        top: auto;
        right: 0;
        bottom: -8svh;
        width: min(420px, 78vw);
        height: min(46svh, 190px);
        transform: translateX(var(--df-hero-bleed, 10vw));
        transform-origin: right bottom;
    }

    .df-login-stage .df-login-card {
        grid-column: 1;
    }

    .df-actions-row {
        justify-content: center;
    }

    .df-form-grid,
    .df-access-grid,
    .df-sweepstakes-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .df-wallpaper-grid {
        flex-direction: column;
        align-items: center;
    }

    .df-wallpaper-card {
        width: min(320px, 92vw);
        flex-basis: auto;
    }
}

@media (max-width: 1180px) {
    body.df-dashboard .df-header,
    body.df-game-screen .df-header {
        min-height: clamp(76px, 10vh, 104px);
        padding-top: clamp(10px, 2vh, 24px);
    }

    body.df-dashboard .df-game-nav,
    body.df-game-screen .df-game-nav,
    body.df-board-page .df-game-nav {
        width: min(92vw, 960px);
        margin-inline: auto;
        padding-inline: 0;
    }

    body.df-dashboard .df-dashboard-stage {
        min-height: calc(100vh - 104px);
        padding: 12px 4vw 18px;
        gap: 12px;
    }

    body.df-dashboard .df-player-heading {
        gap: 14px;
    }

    body.df-dashboard .df-player-heading h1 {
        font-size: clamp(28px, 4vw, 42px);
    }

    body.df-dashboard .df-player-dot {
        width: 34px;
        height: 34px;
    }

    body.df-dashboard .df-score-card {
        width: min(380px, 86vw);
        margin-top: 8px;
        padding: 10px 30px;
    }

    body.df-dashboard .df-score-card p {
        font-size: clamp(20px, 3vw, 24px);
    }

    body.df-dashboard .df-score-card strong {
        font-size: clamp(34px, 5vw, 42px);
    }

    body.df-dashboard .df-play-btn {
        width: min(260px, 56vw);
        min-width: 0;
        min-height: 56px;
        margin-top: 10px;
    }

    body.df-dashboard .df-card-carousel {
        grid-template-columns: 48px minmax(0, 1fr) 48px;
        width: 100%;
        max-width: 100%;
        margin-top: 16px;
    }

    body.df-dashboard .df-card-strip {
        min-height: clamp(250px, 38vh, 300px);
    }

    body.df-dashboard .df-card-strip > .df-mini-card {
        width: clamp(100px, 16vw, 145px);
    }

    body.df-dashboard .df-circle-btn {
        width: 48px;
        height: 48px;
    }

    body.df-dashboard .df-dashboard-links {
        margin-top: 12px;
        font-size: clamp(15px, 2vw, 18px);
    }

    body.df-game-screen .df-game-panel {
        width: min(92vw, 960px);
        min-height: auto;
        margin-top: 14px;
        padding: 20px 22px;
    }

    body.df-game-screen {
        --df-deck-card-width: min(255px, 24vw, 42vh);
        --df-battle-card-width: min(320px, 48vh);
    }

    body.df-game-screen .df-deck-view {
        gap: 18px;
    }

    body.df-game-screen:not(.df-portrait-flow) .df-battle-view {
        grid-template-columns:
            minmax(64px, 0.48fr) minmax(0, var(--df-battle-card-width))
            minmax(240px, 1.32fr) minmax(0, var(--df-battle-card-width))
            minmax(64px, 0.48fr);
        column-gap: clamp(10px, 1.6vw, 24px);
        row-gap: 0;
    }

    body.df-game-screen:not(.df-portrait-flow) .df-player-side,
    body.df-game-screen:not(.df-portrait-flow) .df-machine-side {
        display: contents;
    }

    body.df-game-screen:not(.df-portrait-flow) .df-player-side > span {
        grid-column: 1;
        grid-row: 1;
        justify-self: end;
    }

    body.df-game-screen:not(.df-portrait-flow) .df-player-side > div {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
    }

    body.df-game-screen:not(.df-portrait-flow) .df-middle-view {
        grid-column: 3 !important;
        grid-row: 1 !important;
    }

    body.df-game-screen:not(.df-portrait-flow) .df-machine-side > div {
        grid-column: 4;
        grid-row: 1;
        justify-self: start;
    }

    body.df-game-screen:not(.df-portrait-flow) .df-machine-side > span {
        grid-column: 5;
        grid-row: 1;
        justify-self: start;
    }

    body.df-game-screen:not(.df-portrait-flow) .df-player-side > span,
    body.df-game-screen:not(.df-portrait-flow) .df-machine-side > span {
        font-size: clamp(20px, 2.8vw, 30px);
    }

    body.df-game-screen .df-round-actions {
        position: relative;
        justify-content: center;
        margin-top: 0;
        gap: 12px;
    }

    body.df-game-screen .df-round-actions .df-primary-btn {
        width: auto;
        min-width: 240px;
        min-height: 50px;
        font-size: 18px;
    }

    body.df-game-screen .df-modal-card {
        width: min(680px, 90vw);
        min-height: 0;
        max-height: 84vh;
        padding: 24px 34px 30px;
        overflow: auto;
    }

    body.df-game-screen .df-modal-card h2 {
        margin-bottom: 22px;
        padding-inline: 42px;
        font-size: clamp(24px, 3vw, 34px);
    }

    body.df-game-screen .df-modal-close {
        top: 18px;
        right: 22px;
        width: 36px;
        height: 36px;
        font-size: 21px;
    }

    body.df-game-screen .df-attribute-grid {
        gap: 18px 24px;
        margin-bottom: 26px;
    }

    body.df-game-screen .df-attribute-option {
        min-height: 112px;
        gap: 8px;
        font-size: 15px;
    }

    body.df-game-screen .df-attribute-option i {
        width: 76px;
        height: 76px;
    }

    body.df-game-screen .df-attribute-option img,
    body.df-game-screen .df-attribute-option svg {
        width: 44px;
        height: 44px;
    }

    body.df-game-screen .df-fiat-footer {
        width: 50px;
        height: 50px;
        margin-block: 16px;
    }
}

@media (orientation: landscape) and (max-width: 900px) {
    body.df-dashboard .df-header,
    body.df-game-screen .df-header {
        height: 64px;
        min-height: 0;
        padding-top: 8px;
    }

    body.df-dashboard .df-main,
    body.df-game-screen .df-main {
        min-height: calc(100vh - 64px);
        min-height: calc(100svh - 64px);
        min-height: calc(100dvh - 64px);
    }

    body.df-dashboard .df-game-nav,
    body.df-game-screen .df-game-nav,
    body.df-board-page .df-game-nav {
        width: min(92vw, 760px);
        margin-top: 2px;
    }

    body.df-dashboard .df-game-nav .df-outline-btn,
    body.df-game-screen .df-game-nav .df-outline-btn,
    body.df-board-page .df-game-nav .df-outline-btn {
        min-width: 92px;
        min-height: 36px;
        padding: 6px 12px;
        border-width: 3px;
        font-size: 14px;
    }

    body.df-game-screen .df-game-nav__toolbar .df-game-score,
    body.df-game-screen .df-game-nav__toolbar .df-nav-exit-btn {
        height: 36px;
        min-height: 36px;
        max-height: 36px;
    }

    body.df-game-screen .df-game-nav__toolbar .df-game-score {
        font-size: 14px;
        border-width: 3px;
    }

    body.df-dashboard .df-dashboard-stage {
        min-height: 0;
        padding: 6px 4vw 8px;
        gap: 6px;
        overflow: hidden;
    }

    body.df-dashboard .df-player-heading h1 {
        font-size: clamp(20px, 5svh, 30px);
    }

    body.df-dashboard .df-player-dot {
        width: 24px;
        height: 24px;
    }

    body.df-dashboard .df-score-card {
        width: min(320px, 72vw);
        padding: 7px 22px;
    }

    body.df-dashboard .df-score-card p {
        font-size: clamp(14px, 3svh, 18px);
    }

    body.df-dashboard .df-score-card strong {
        font-size: clamp(24px, 6svh, 32px);
    }

    body.df-dashboard .df-score-track {
        height: 3px;
        margin-block: 5px 7px;
    }

    body.df-dashboard .df-score-card small,
    body.df-dashboard .df-score-card [data-score-rank] {
        font-size: clamp(15px, 3.2svh, 18px);
    }

    body.df-dashboard .df-play-btn {
        width: min(220px, 48vw);
        min-height: 42px;
        margin-top: 0;
        font-size: clamp(16px, 3.4svh, 20px);
    }

    body.df-dashboard .df-card-carousel {
        grid-template-columns: 38px minmax(0, 1fr) 38px;
        width: 100%;
        max-width: 100%;
        margin-top: 0;
    }

    body.df-dashboard .df-card-strip {
        min-height: 0;
    }

    body.df-dashboard .df-card-strip > .df-mini-card {
        width: clamp(96px, 14vw, 132px);
    }

    body.df-dashboard .df-circle-btn {
        width: 36px;
        height: 36px;
    }

    body.df-dashboard .df-dashboard-links {
        margin-top: 0;
        gap: 3px;
        font-size: clamp(12px, 2.6svh, 15px);
    }

    body.df-game-screen .df-game-arena {
        display: grid;
        min-height: calc(100vh - 64px);
        min-height: calc(100svh - 64px);
        min-height: calc(100dvh - 64px);
    }

    body.df-game-screen .df-game-panel {
        align-self: stretch;
        width: min(94vw, 820px);
        margin-block: 6px;
        padding: 10px 12px;
    }

    body.df-game-screen {
        --df-deck-card-width: min(176px, 21vw, 38svh);
        --df-battle-card-width: min(220px, 44svh);
    }

    body.df-game-screen .df-playing-card {
        border-radius: 14px;
    }

    body.df-game-screen .df-deck-view {
        gap: 10px;
    }

    body.df-game-screen .df-battle-view {
        grid-template-columns:
            minmax(0, 0.48fr) minmax(0, var(--df-battle-card-width))
            minmax(160px, 1.28fr) minmax(0, var(--df-battle-card-width))
            minmax(0, 0.48fr);
        column-gap: clamp(6px, 1.2vw, 14px);
        row-gap: 0;
    }

    body.df-game-screen .df-player-side > span {
        justify-self: end;
    }

    body.df-game-screen .df-player-side > div {
        justify-self: end;
    }

    body.df-game-screen .df-machine-side > div {
        justify-self: start;
    }

    body.df-game-screen .df-machine-side > span {
        justify-self: start;
    }

    body.df-game-screen .df-player-side > span,
    body.df-game-screen .df-machine-side > span {
        font-size: clamp(13px, 2.7svh, 18px);
    }

    body.df-game-screen .df-round-actions {
        gap: 8px;
        margin-top: 0;
        flex-wrap: wrap;
    }

    body.df-game-screen .df-round-actions .df-primary-btn {
        width: min(190px, 38vw);
        min-width: 0;
        min-height: 38px;
        font-size: 13px;
    }

    body.df-game-screen .df-modal-card {
        width: min(600px, 92vw);
        min-height: 0;
        max-height: 88svh;
        padding: 14px 22px 18px;
        border-radius: 28px;
    }

    body.df-game-screen .df-modal-card h2 {
        margin-bottom: 10px;
        padding-inline: 42px;
        font-size: clamp(17px, 4svh, 24px);
        line-height: 1.05;
    }

    body.df-game-screen .df-modal-close {
        top: 10px;
        right: 14px;
        width: 34px;
        height: 34px;
        border-width: 2px;
        font-size: 20px;
    }

    body.df-game-screen .df-attribute-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        max-width: 520px;
        gap: 8px 18px;
        margin-bottom: 12px;
    }

    body.df-game-screen .df-attribute-option {
        min-height: 86px;
        gap: 5px;
        font-size: clamp(11px, 2.7svh, 15px);
        line-height: 1.05;
    }

    body.df-game-screen .df-attribute-option i {
        width: clamp(42px, 11svh, 58px);
        height: clamp(42px, 11svh, 58px);
        border-radius: 9px;
    }

    body.df-game-screen .df-attribute-option img,
    body.df-game-screen .df-attribute-option svg {
        width: 58%;
        height: 58%;
    }

    body.df-game-screen .df-modal-card .df-primary-btn {
        min-width: 220px;
        min-height: 38px;
        font-size: clamp(13px, 3svh, 16px);
    }

    body.df-game-screen .df-fiat-footer {
        width: 44px;
        height: 44px;
        margin-block: 4px;
    }
}

@media (orientation: landscape) and (max-width: 640px) {
    body.df-dashboard .df-dashboard-stage {
        justify-content: start;
    }

    body.df-dashboard .df-card-carousel {
        width: 100%;
        max-width: 100%;
    }

    body.df-dashboard .df-card-strip {
        min-height: clamp(176px, 46svh, 198px);
    }

    body.df-dashboard .df-card-strip > .df-mini-card {
        width: clamp(70px, 14vw, 96px);
    }

    body.df-game-screen .df-modal-card {
        width: min(560px, 94vw);
        max-height: 90svh;
        padding: 10px 18px 14px;
        border-radius: 24px;
    }

    body.df-game-screen .df-modal-card h2 {
        margin-bottom: 8px;
        padding-inline: 36px;
        font-size: clamp(16px, 4.5svh, 20px);
    }

    body.df-game-screen .df-modal-close {
        top: 8px;
        right: 12px;
        width: 30px;
        height: 30px;
        font-size: 18px;
    }

    body.df-game-screen .df-attribute-grid {
        max-width: 500px;
        gap: 6px 12px;
        margin-bottom: 10px;
    }

    body.df-game-screen .df-attribute-option {
        min-height: 74px;
        gap: 4px;
        font-size: clamp(10px, 2.9svh, 13px);
    }

    body.df-game-screen .df-attribute-option i {
        width: clamp(36px, 10svh, 48px);
        height: clamp(36px, 10svh, 48px);
    }

    body.df-game-screen .df-modal-card .df-primary-btn {
        min-width: 190px;
        min-height: 34px;
        padding-block: 7px;
        font-size: 12px;
    }

    body.df-game-screen .df-game-panel {
        width: 96vw;
        padding-inline: 8px;
    }

    body.df-game-screen {
        --df-deck-card-width: min(148px, 21vw, 36svh);
        --df-battle-card-width: min(180px, 40svh);
    }

    body.df-game-screen .df-battle-view {
        grid-template-columns:
            minmax(0, 0.44fr) minmax(0, var(--df-battle-card-width))
            minmax(120px, 1.12fr) minmax(0, var(--df-battle-card-width))
            minmax(0, 0.44fr);
        column-gap: clamp(4px, 1vw, 10px);
        row-gap: 0;
    }

    body.df-game-screen .df-player-side > span {
        justify-self: end;
    }

    body.df-game-screen .df-player-side > div {
        justify-self: end;
    }

    body.df-game-screen .df-machine-side > div {
        justify-self: start;
    }

    body.df-game-screen .df-machine-side > span {
        justify-self: start;
    }

    body.df-game-screen .df-player-side > span,
    body.df-game-screen .df-machine-side > span {
        font-size: clamp(11px, 2.8svh, 15px);
    }

    body.df-game-screen .df-round-actions .df-primary-btn {
        width: min(170px, 42vw);
        min-height: 34px;
        padding: 7px 10px;
        font-size: 12px;
    }
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-header {
    height: auto !important;
    min-height: 145px !important;
    padding: 34px 106px 0 !important;
    gap: 92px !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-title {
    width: 100% !important;
    max-width: 1600px !important;
    max-height: none !important;
    display: flex;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-header-line {
    display: block !important;
    width: 490px !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-main {
    display: block !important;
    min-height: auto !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-main > section {
    min-width: initial !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-primary-btn,
body.df-page:not(.df-portrait-flow) .df-scale-frame .df-outline-btn {
    min-width: 290px !important;
    min-height: 76px !important;
    padding: 16px 28px !important;
    border-width: 4px !important;
    font-size: 30px !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-outline-btn,
body.df-page:not(.df-portrait-flow) .df-scale-frame .df-nav-menu-btn,
body.df-page:not(.df-portrait-flow) .df-scale-frame .df-nav-exit-btn {
    width: 176px !important;
    min-width: 176px !important;
    min-height: 58px !important;
    height: 58px !important;
    padding: 16px 28px !important;
    border-width: 4px !important;
    font-size: 22px !important;
    box-sizing: border-box !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-game-nav {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 153px !important;
    z-index: 2 !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-home-stage,
body.df-page:not(.df-portrait-flow) .df-scale-frame .df-login-stage {
    grid-template-columns: minmax(360px, 0.85fr) minmax(520px, 1.35fr) !important;
    align-items: center !important;
    min-height: 935px !important;
    height: auto !important;
    padding: 22px 0 22px 163px !important;
    overflow: visible !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-login-stage {
    grid-template-columns: minmax(520px, 0.9fr) minmax(520px, 1.2fr) !important;
    padding-left: 144px !important;
    padding-bottom: 72px !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-home-copy {
    grid-column: auto !important;
    max-width: 650px !important;
    text-align: left !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-kicker {
    font-size: 58px !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-home-copy h1 {
    margin: 8px 0 26px !important;
    font-size: 76px !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-subtitle {
    margin-bottom: 44px !important;
    font-size: 42px !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-actions-row {
    justify-content: flex-start !important;
    gap: 24px !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-hero-mark {
    position: absolute !important;
    top: auto !important;
    right: -7% !important;
    bottom: -7% !important;
    width: 70% !important;
    max-width: 1344px !important;
    height: auto !important;
    min-height: initial !important;
    transform: translateX(var(--df-hero-bleed, 20%)) !important;
    transform-origin: right center !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-login-card {
    grid-column: auto !important;
    width: 660px !important;
    border-width: 22px !important;
    border-radius: 40px !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-login-inner {
    padding: 58px !important;
    border-width: 12px !important;
    border-radius: 30px !important;
}

body.df-page:not(.df-portrait-flow) .df-login-disclaimer {
    width: 100vw !important;
    max-width: none !important;
    padding: 10px 72px !important;
    padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
    font-size: 14px !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-panel {
    width: 1380px !important;
    min-height: 730px !important;
    margin: 16px auto 0 !important;
    padding: 24px !important;
    border-radius: 40px !important;
    overflow: visible !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-panel-inner {
    min-height: 682px !important;
    padding: 52px !important;
    border-width: 12px !important;
    border-radius: 30px !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-centered-copy h3,
body.df-page:not(.df-portrait-flow) .df-scale-frame .df-step-title h3 {
    margin: 0 0 12px !important;
    font-size: 54px !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-centered-copy p {
    margin: 8px 0 !important;
    font-size: 33px !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-message-copy,
body.df-page:not(.df-portrait-flow) .df-scale-frame .df-support-copy {
    max-width: 1120px !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-message-copy h1,
body.df-page:not(.df-portrait-flow) .df-scale-frame .df-support-copy h1 {
    margin-bottom: 54px !important;
    font-size: 62px !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-message-copy p,
body.df-page:not(.df-portrait-flow) .df-scale-frame .df-support-copy p,
body.df-page:not(.df-portrait-flow) .df-scale-frame .df-support-copy li {
    font-size: 32px !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-register-form,
body.df-page:not(.df-portrait-flow) .df-scale-frame .df-access-form,
body.df-page:not(.df-portrait-flow) .df-scale-frame .df-terms-form {
    max-width: 970px !important;
    margin-top: 26px !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-form label {
    margin-bottom: 12px !important;
    font-size: 30px !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-input,
body.df-page:not(.df-portrait-flow) .df-scale-frame .df-form input[type="text"],
body.df-page:not(.df-portrait-flow)
    .df-scale-frame
    .df-form
    input[type="password"],
body.df-page:not(.df-portrait-flow) .df-scale-frame .df-form select {
    height: 64px !important;
    margin-bottom: 12px !important;
    padding: 0 26px !important;
    font-size: 28px !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-form-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 44px !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-password-field {
    margin-bottom: 12px !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-password-field input {
    padding-right: 68px !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-eye-btn {
    top: 32% !important;
    right: 16px !important;
    width: 44px !important;
    height: 44px !important;
    -webkit-mask-size: 32px 32px !important;
    mask-size: 32px 32px !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-form-submit {
    margin-top: 30px !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-access-grid {
    grid-template-columns: minmax(360px, 1fr) minmax(340px, 1fr) !important;
    gap: 90px !important;
    margin-top: 90px !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-select-wrap::after {
    top: 32px !important;
    right: 24px !important;
    width: 32px !important;
    height: 32px !important;
    transform: translateY(-50%) !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-select-wrap select {
    padding-right: 78px !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-access-actions p {
    margin-top: 24px !important;
    font-size: 25px !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-terms-box {
    max-height: 236px !important;
    padding: 20px 40px !important;
    font-size: 18px !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-checkbox-line {
    gap: 22px !important;
    margin-top: 34px !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-checkbox-line input {
    width: 36px !important;
    height: 36px !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-ok-btn {
    width: 292px !important;
    min-width: 292px !important;
    margin-top: 146px !important;
}

body.df-page:not(.df-portrait-flow).df-dashboard .df-scale-frame {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

body.df-page:not(.df-portrait-flow).df-dashboard .df-scale-frame .df-main {
    padding: 0 120px !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-dashboard-stage {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: 100% !important;
    padding: 4px clamp(24px, 3vw, 48px) 30px !important;
    gap: 16px !important;
    overflow: hidden !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-player-heading {
    gap: 14px !important;
    flex-shrink: 0 !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-player-heading h1 {
    font-size: 40px !important;
    line-height: 1 !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-player-dot {
    width: 32px !important;
    height: 32px !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-score-card {
    width: 380px !important;
    margin-top: 4px !important;
    padding: 8px 36px 6px !important;
    flex-shrink: 0 !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-score-card p {
    font-size: 22px !important;
    line-height: 1.1 !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-score-card strong {
    font-size: 40px !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-score-track {
    height: 3px !important;
    margin: 5px 0 6px !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-score-card small,
body.df-page:not(.df-portrait-flow)
    .df-scale-frame
    .df-score-card
    [data-score-rank] {
    font-size: 17px !important;
}

body.df-page:not(.df-portrait-flow).df-dashboard
    .df-scale-frame
    .df-play-btn.df-primary-btn,
body.df-page:not(.df-portrait-flow) .df-scale-frame .df-play-btn {
    width: 248px !important;
    min-width: 248px !important;
    min-height: 56px !important;
    margin-top: 6px !important;
    padding: 10px 20px !important;
    font-size: 24px !important;
    flex-shrink: 0 !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-card-carousel {
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) 58px !important;
    align-items: center !important;
    justify-items: center !important;
    align-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 4px !important;
    margin-inline: 0 !important;
    gap: 0 !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: visible !important;
}

body.df-page:not(.df-portrait-flow)
    .df-scale-frame
    .df-card-carousel
    .df-circle-btn {
    align-self: center !important;
    justify-self: center !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-card-strip {
    flex: 1 1 auto !important;
    align-self: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: 100% !important;
    max-height: none !important;
    margin-inline: auto !important;
    padding: 10px 0 28px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    container-type: size !important;
    container-name: df-dashboard-strip !important;
}

body.df-page:not(.df-portrait-flow)
    .df-scale-frame
    .df-card-strip
    > .df-mini-card {
    width: min(300px, calc(100cqh * 249 / 352 / 1.36)) !important;
    height: auto !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
}

body.df-page:not(.df-portrait-flow)
    .df-scale-frame
    .df-card-strip
    > .df-mini-card
    > .df-playing-card {
    width: 100% !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-circle-btn {
    width: 58px !important;
    height: 58px !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-dashboard-links {
    margin-top: 4px !important;
    gap: 2px !important;
    font-size: 19px !important;
    line-height: 1.2 !important;
    flex-shrink: 0 !important;
}

body.df-page:not(.df-portrait-flow).df-dashboard .df-scale-frame .df-header {
    min-height: 88px !important;
    padding: 8px 106px 0 !important;
    gap: 0 !important;
}

body.df-page:not(.df-portrait-flow).df-dashboard .df-scale-frame .df-title {
    max-height: 44px !important;
    width: auto !important;
    max-width: min(1200px, 92%) !important;
    margin-inline: auto !important;
    object-fit: contain !important;
}

body.df-page:not(.df-portrait-flow).df-dashboard .df-scale-frame .df-game-nav {
    padding: 0 153px !important;
    margin-top: 2px !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-wide-board,
body.df-page:not(.df-portrait-flow) .df-scale-frame .df-game-panel {
    width: 1710px !important;
    min-height: 688px !important;
    margin: 16px auto 0 !important;
    padding: 46px 115px !important;
    overflow: visible !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-wide-board h1 {
    margin-bottom: 0px !important;
    font-size: 60px !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-board-subtitle {
    margin-bottom: 62px !important;
    max-width: 780px !important;
    font-size: 42px !important;
}

body.df-page:not(.df-portrait-flow)
    .df-scale-frame
    .df-wide-board:has(.df-wallpaper-grid)
    h1 {
    margin-bottom: 18px !important;
    font-size: 48px !important;
}

body.df-page:not(.df-portrait-flow)
    .df-scale-frame
    .df-wide-board:has(.df-wallpaper-grid)
    .df-board-subtitle {
    margin-bottom: 52px !important;
    font-size: 32px !important;
    font-weight: 400 !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-ranking-list {
    gap: 2px !important;
    width: 920px !important;
    margin-top: 20px !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-ranking-board {
    height: 688px !important;
    overflow: hidden !important;
}

body.df-page:not(.df-portrait-flow)
    .df-scale-frame
    .df-ranking-board
    .df-ranking-list {
    min-height: 0 !important;
    padding-right: 14px !important;
    overflow-y: auto !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-ranking-row {
    grid-template-columns: 64px 1fr auto !important;
    gap: 18px !important;
    min-height: 70px !important;
    padding: 12px 22px !important;
    font-size: 24px !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-ranking-position {
    width: 44px !important;
    height: 44px !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-sweepstakes-list {
    gap: 14px !important;
    width: 920px !important;
    margin-top: 40px !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-sweepstakes-board {
    height: 688px !important;
    overflow: hidden !important;
}

body.df-page:not(.df-portrait-flow)
    .df-scale-frame
    .df-sweepstakes-board
    .df-sweepstakes-list {
    min-height: 0 !important;
    padding-right: 14px !important;
    overflow-y: auto !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-sweepstakes-row {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 0.9fr) !important;
    gap: 18px !important;
    min-height: 70px !important;
    padding: 12px 22px !important;
    font-size: 24px !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-sweepstakes-row--head {
    min-height: 0 !important;
    padding: 0 22px 4px !important;
    font-size: 18px !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-wallpaper-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 58px !important;
    max-width: 1320px !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-wallpaper-card {
    width: 300px !important;
    max-width: 300px !important;
    flex: 0 0 300px !important;
    gap: 22px !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-wallpaper-card h2,
body.df-page:not(.df-portrait-flow) .df-scale-frame .df-wallpaper-card p,
body.df-page:not(.df-portrait-flow) .df-scale-frame .df-download-link {
    font-size: 24px !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-download-actions {
    gap: 10px !important;
    margin-top: 4px !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-download-link {
    gap: 16px !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-game-arena {
    display: block !important;
    min-height: auto !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame {
    --df-deck-card-width: 315px;
    --df-battle-card-width: 400px;
}

body.df-page:not(.df-portrait-flow)
    .df-scale-frame
    .df-deck-view
    .df-playing-card {
    width: var(--df-deck-card-width) !important;
    border-radius: 8% / 6% !important;
}

body.df-page:not(.df-portrait-flow)
    .df-scale-frame
    .df-battle-view
    .df-playing-card {
    width: var(--df-battle-card-width) !important;
    border-radius: 8% / 6% !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-deck-view {
    gap: 58px !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-deal-hand-slot {
    width: 148px !important;
    bottom: 34px !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-battle-view {
    grid-template-columns:
        minmax(88px, 0.46fr) minmax(0, var(--df-battle-card-width))
        minmax(280px, 1.2fr) minmax(0, var(--df-battle-card-width))
        minmax(88px, 0.46fr) !important;
    column-gap: clamp(22px, 2vw, 44px) !important;
    row-gap: 0 !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-player-side,
body.df-page:not(.df-portrait-flow) .df-scale-frame .df-machine-side {
    display: contents !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-player-side > span {
    grid-column: auto !important;
    grid-row: 1 !important;
    font-size: 40px !important;
    justify-self: end !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-player-side > div {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-middle-view {
    grid-column: 3 !important;
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    align-self: center !important;
    width: 100% !important;
    max-width: 380px !important;
    margin-inline: auto !important;
    z-index: 2 !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-middle-view .df-versus {
    grid-column: unset !important;
    grid-row: unset !important;
    margin: 0 !important;
    font-size: clamp(34px, 2.8vw, 52px) !important;
    font-weight: 700 !important;
    font-style: italic !important;
    line-height: 1 !important;
    color: #fff !important;
    -webkit-text-stroke: clamp(2px, 0.22vw, 4px) var(--df-deep) !important;
    paint-order: stroke fill !important;
    text-shadow: 0 2px 10px rgba(13, 56, 82, 0.45) !important;
    transform: none !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-machine-side > div {
    grid-column: 4 !important;
    grid-row: 1 !important;
    justify-self: start !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-machine-side > span {
    grid-column: 5 !important;
    grid-row: 1 !important;
    font-size: 40px !important;
    justify-self: start !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-round-actions {
    position: relative !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: 0 !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: 100% !important;
}

body.df-page:not(.df-portrait-flow)
    .df-scale-frame
    .df-round-actions
    .df-primary-btn {
    width: auto !important;
    min-width: 324px !important;
    min-height: 62px !important;
    font-size: 23px !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-user-card-note {
    max-width: 100% !important;
    margin-top: 6px !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-modal-card {
    width: 858px !important;
    min-height: 550px !important;
    max-height: none !important;
    padding: 34px 64px 54px !important;
    border-radius: 36px !important;
    overflow: visible !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-modal-card h2 {
    margin: 0 0 32px !important;
    padding-inline: 0 !important;
    font-size: 44px !important;
    line-height: normal !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-modal-close {
    top: 26px !important;
    right: 32px !important;
    width: 40px !important;
    height: 40px !important;
    border-width: 3px !important;
    font-size: 24px !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-attribute-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 34px 48px !important;
    max-width: 560px !important;
    margin: 0 auto 38px !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-attribute-option {
    min-height: 144px !important;
    gap: 10px !important;
    font-size: inherit !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-attribute-option i {
    width: 102px !important;
    height: 102px !important;
    border-radius: 12px !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-attribute-option img,
body.df-page:not(.df-portrait-flow) .df-scale-frame .df-attribute-option svg {
    width: 58px !important;
    height: 58px !important;
}

body.df-page:not(.df-portrait-flow)
    .df-scale-frame
    .df-modal-card
    .df-primary-btn {
    min-width: 264px !important;
    min-height: 58px !important;
    padding: 16px 28px !important;
    font-size: 20px !important;
}

body.df-page:not(.df-portrait-flow) .df-scale-frame .df-fiat-footer {
    position: static !important;
    width: 68px !important;
    height: 68px !important;
    margin-top: 34px !important;
    margin-bottom: 34px !important;
}

.df-audio-toggle {
    position: fixed;
    left: max(18px, env(safe-area-inset-left, 0px));
    right: auto;
    bottom: max(18px, env(safe-area-inset-bottom, 0px));
    z-index: 9010;
    width: 56px;
    height: 56px;
    padding: 0;
    border: 2px solid var(--df-navy);
    border-radius: 999px;
    background: var(--df-white);
    color: var(--df-navy);
    cursor: pointer;
    display: grid;
    place-items: center;
    box-shadow: 0 4px 14px rgba(13, 56, 82, 0.14);
    transition: transform 120ms ease;
}

.df-audio-toggle:hover {
    transform: scale(1.04);
}

.df-audio-toggle:focus-visible {
    outline: 2px solid var(--df-navy);
    outline-offset: 2px;
}

.df-audio-toggle__icon {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    pointer-events: none;
}

.df-audio-toggle__icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.df-audio-toggle__icon[hidden] {
    display: none !important;
}

.df-access-help-link {
    display: inline;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.df-login-help .df-access-help-link {
    color: var(--df-white);
}