/* Final online duel layout. Loaded last on purpose to replace the older fixed HUD rules. */
.tcg-counter-page.is-online-game,
.tcg-counter-page.is-online-game *,
.tcg-counter-page.is-online-game *::before,
.tcg-counter-page.is-online-game *::after {
    box-sizing: border-box !important;
}

html.tcg-online-game-document,
body.tcg-online-game-body,
body.tcg-online-game-body .public-main {
    height: auto !important;
    max-height: none !important;
    min-height: 100svh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

body.tcg-online-game-body .public-main {
    display: block !important;
    padding: 0 !important;
}

.tcg-counter-page.is-online-game {
    --duel-bg: #040b18;
    --duel-card: rgba(8, 20, 42, .94);
    --duel-line: rgba(65, 150, 255, .42);
    --duel-line-hot: rgba(22, 136, 255, .82);
    --duel-gold: #ffc35a;
    --duel-blue: #1495ff;
    --duel-green: #34e584;
    --duel-red: #ff6474;
    --duel-text: #f7fbff;
    --duel-muted: #9fb2ce;
    --duel-gap: clamp(.55rem, 1.4vw, .85rem);
    background:
        radial-gradient(circle at 22% -8%, rgba(27, 120, 255, .2), transparent 28rem),
        radial-gradient(circle at 86% 28%, rgba(255, 195, 90, .12), transparent 20rem),
        linear-gradient(180deg, #071225 0%, var(--duel-bg) 72%, #020710 100%) !important;
    color: var(--duel-text) !important;
    display: grid !important;
    font-family: "Segoe UI", Arial, sans-serif !important;
    gap: var(--duel-gap) !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    height: auto !important;
    max-height: none !important;
    max-width: min(540px, 100vw) !important;
    min-height: 100svh !important;
    min-width: 0 !important;
    overflow: visible !important;
    padding: clamp(.45rem, 1.4vw, .8rem) clamp(.45rem, 1.5vw, .75rem) max(8rem, calc(env(safe-area-inset-bottom, 0px) + 8rem)) !important;
    position: relative !important;
    width: 100% !important;
}

.tcg-counter-page.is-online-game::before {
    background-image:
        linear-gradient(rgba(125, 211, 255, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(125, 211, 255, .03) 1px, transparent 1px);
    background-size: 2.7rem 2.7rem;
    content: "" !important;
    inset: 0 !important;
    opacity: .45 !important;
    pointer-events: none !important;
    position: absolute !important;
}

.tcg-counter-page.is-online-game .tcg-online-panel,
.tcg-counter-page.is-online-game .tcg-counter-topbar {
    display: none !important;
}

.tcg-counter-page.is-online-game .tcg-online-game-head {
    align-items: center !important;
    background: linear-gradient(180deg, rgba(11, 20, 42, .95), rgba(6, 14, 30, .94)) !important;
    border: 1px solid rgba(255, 195, 90, .42) !important;
    border-radius: .85rem !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), 0 .8rem 1.8rem rgba(0, 0, 0, .28) !important;
    display: grid !important;
    gap: .46rem !important;
    grid-template-areas:
        "brand exit"
        "status status" !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: .5rem !important;
    position: relative !important;
    width: 100% !important;
    z-index: 2 !important;
}

.tcg-counter-page.is-online-game .tcg-online-title-lockup {
    align-items: center !important;
    display: grid !important;
    gap: .55rem !important;
    grid-area: brand !important;
    grid-template-columns: 2.25rem minmax(0, 1fr) !important;
    min-width: 0 !important;
}

.tcg-counter-page.is-online-game .tcg-online-crest {
    align-items: center !important;
    background: linear-gradient(135deg, #7df7d5, #ffc247) !important;
    border-radius: .45rem !important;
    clip-path: none !important;
    color: #05111f !important;
    display: inline-flex !important;
    filter: drop-shadow(0 0 .7rem rgba(46, 196, 255, .5)) !important;
    font-size: 1rem !important;
    font-weight: 950 !important;
    height: 2.25rem !important;
    justify-content: center !important;
    overflow: hidden !important;
    width: 2.25rem !important;
}

.tcg-counter-page.is-online-game .tcg-online-crest img {
    height: 100% !important;
    object-fit: contain !important;
    width: 100% !important;
}

.tcg-counter-page.is-online-game .tcg-online-title-lockup strong {
    color: #f8fbff !important;
    font-size: clamp(1.05rem, 5vw, 1.35rem) !important;
    font-weight: 950 !important;
    letter-spacing: .03em !important;
    line-height: 1.05 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    text-shadow: 0 0 .75rem rgba(126, 211, 255, .45) !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

.tcg-counter-page.is-online-game .tcg-online-exit-game {
    align-items: center !important;
    background: linear-gradient(180deg, rgba(255, 195, 90, .22), rgba(255, 169, 39, .08)) !important;
    border: 1px solid rgba(255, 195, 90, .9) !important;
    border-radius: .7rem !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 0 1rem rgba(255, 195, 90, .22) !important;
    color: #ffd37a !important;
    display: inline-flex !important;
    font-size: clamp(.78rem, 3.4vw, .95rem) !important;
    font-weight: 950 !important;
    gap: .38rem !important;
    grid-area: exit !important;
    justify-content: center !important;
    min-height: 2.5rem !important;
    min-width: 0 !important;
    padding: 0 .62rem !important;
    white-space: nowrap !important;
}

.tcg-counter-page.is-online-game .tcg-online-status-strip {
    display: grid !important;
    gap: .42rem !important;
    grid-area: status !important;
    grid-template-columns: minmax(0, .42fr) minmax(0, .58fr) !important;
    min-width: 0 !important;
    width: 100% !important;
}

.tcg-counter-page.is-online-game .tcg-online-chip {
    align-items: center !important;
    background: rgba(3, 12, 27, .92) !important;
    border: 1px solid rgba(69, 144, 255, .4) !important;
    border-radius: .42rem !important;
    color: #ffd787 !important;
    display: inline-flex !important;
    font-size: clamp(.65rem, 2.9vw, .78rem) !important;
    font-weight: 950 !important;
    gap: .36rem !important;
    justify-content: center !important;
    letter-spacing: .08em !important;
    line-height: 1 !important;
    min-height: 2rem !important;
    min-width: 0 !important;
    overflow: hidden !important;
    padding: 0 .42rem !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    width: 100% !important;
}

.tcg-counter-page.is-online-game .tcg-online-dot {
    background: var(--duel-green) !important;
    border-radius: 50% !important;
    box-shadow: 0 0 .7rem rgba(52, 229, 132, .9) !important;
    flex: 0 0 .55rem !important;
    height: .55rem !important;
    width: .55rem !important;
}

.tcg-counter-page.is-online-game .tcg-counter-board {
    display: grid !important;
    gap: var(--duel-gap) !important;
    grid-template-areas:
        "controls"
        "opponent"
        "you"
        "history" !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto minmax(18rem, auto) !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    min-width: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
    position: relative !important;
    width: 100% !important;
    z-index: 1 !important;
}

.tcg-counter-page.is-online-game .tcg-center-panel,
.tcg-counter-page.is-online-game .tcg-player,
.tcg-counter-page.is-online-game .tcg-history {
    background:
        linear-gradient(135deg, rgba(8, 20, 42, .96), rgba(2, 8, 20, .97)),
        radial-gradient(circle at 86% 38%, rgba(20, 149, 255, .14), transparent 18rem) !important;
    border: 1px solid var(--duel-line) !important;
    border-radius: .85rem !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .035), 0 .7rem 1.6rem rgba(0, 0, 0, .26) !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    min-width: 0 !important;
    overflow: visible !important;
    position: relative !important;
    width: 100% !important;
}

.tcg-counter-page.is-online-game .tcg-center-panel {
    display: grid !important;
    gap: .55rem !important;
    grid-area: controls !important;
    grid-template-areas:
        "round"
        "timer"
        "tools" !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    padding: .58rem !important;
}

.tcg-counter-page.is-online-game .tcg-round-card {
    display: grid !important;
    gap: .55rem !important;
    grid-area: round !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: .45rem !important;
}

.tcg-counter-page.is-online-game .tcg-round-card > div,
.tcg-counter-page.is-online-game .tcg-round-card .tcg-solo-exit-game,
.tcg-counter-page.is-online-game .tcg-timer-actions [data-return-lobby] {
    display: none !important;
}

.tcg-counter-page.is-online-game .tcg-timer {
    align-items: stretch !important;
    display: grid !important;
    gap: .55rem !important;
    grid-area: timer !important;
    grid-template-columns: minmax(7.2rem, .42fr) minmax(0, .58fr) !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: .45rem !important;
}

.tcg-counter-page.is-online-game .tcg-timer > div:first-child {
    align-items: center !important;
    display: grid !important;
    justify-items: center !important;
    min-height: 4rem !important;
    overflow: visible !important;
}

.tcg-counter-page.is-online-game .tcg-timer span {
    display: none !important;
}

.tcg-counter-page.is-online-game .tcg-timer strong {
    color: #f8fbff !important;
    font-size: clamp(2rem, 8.6vw, 2.85rem) !important;
    font-weight: 950 !important;
    letter-spacing: 0 !important;
    line-height: .9 !important;
    text-shadow: 0 0 .7rem rgba(159, 214, 255, .8) !important;
}

.tcg-counter-page.is-online-game .tcg-timer-actions {
    display: grid !important;
    gap: .45rem !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, minmax(2.32rem, auto)) !important;
}

.tcg-counter-page.is-online-game .tcg-tool-grid {
    display: grid !important;
    gap: .55rem !important;
    grid-area: tools !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    height: auto !important;
    overflow: visible !important;
}

.tcg-counter-page.is-online-game .tcg-tool {
    align-items: center !important;
    background: linear-gradient(180deg, rgba(6, 24, 52, .88), rgba(3, 12, 27, .92)) !important;
    border: 1px solid rgba(69, 144, 255, .38) !important;
    border-radius: .62rem !important;
    display: grid !important;
    gap: .45rem !important;
    grid-template-columns: minmax(2.8rem, .28fr) minmax(0, .72fr) !important;
    height: auto !important;
    min-height: 4.8rem !important;
    overflow: visible !important;
    padding: .45rem !important;
}

.tcg-counter-page.is-online-game .tcg-tool > svg,
.tcg-counter-page.is-online-game .tcg-tool > span:not(.tcg-dice-stage):not(.tcg-coin-stage) {
    display: none !important;
}

.tcg-counter-page.is-online-game .tcg-dice-stage,
.tcg-counter-page.is-online-game .tcg-coin-stage {
    align-items: center !important;
    display: grid !important;
    height: clamp(2.5rem, 10.5vw, 3.15rem) !important;
    justify-items: center !important;
    margin: 0 !important;
    overflow: visible !important;
    place-self: center !important;
    width: clamp(2.5rem, 10.5vw, 3.15rem) !important;
}

.tcg-counter-page.is-online-game .tcg-dice-cube,
.tcg-counter-page.is-online-game .tcg-coin-disc {
    height: 100% !important;
    width: 100% !important;
}

.tcg-counter-page.is-online-game .tcg-tool strong {
    align-items: center !important;
    align-self: stretch !important;
    background: linear-gradient(180deg, rgba(12, 39, 78, .9), rgba(3, 12, 27, .94)) !important;
    border: 1px solid rgba(69, 144, 255, .38) !important;
    border-radius: .5rem !important;
    color: #ffd787 !important;
    display: flex !important;
    font-size: clamp(1rem, 4.5vw, 1.28rem) !important;
    font-weight: 950 !important;
    justify-content: center !important;
    line-height: 1 !important;
    min-height: 3rem !important;
    min-width: 0 !important;
    overflow: hidden !important;
    padding: 0 .45rem !important;
    text-align: center !important;
    white-space: nowrap !important;
}

.tcg-counter-page.is-online-game .tcg-reset,
.tcg-counter-page.is-online-game .tcg-timer-actions button,
.tcg-counter-page.is-online-game .tcg-quick-row button,
.tcg-counter-page.is-online-game .tcg-calc button,
.tcg-counter-page.is-online-game .tcg-calc-input,
.tcg-counter-page.is-online-game .tcg-history summary button {
    align-items: center !important;
    background: linear-gradient(180deg, rgba(13, 40, 78, .96), rgba(4, 14, 31, .96)) !important;
    border: 1px solid rgba(73, 148, 255, .42) !important;
    border-radius: .5rem !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06) !important;
    color: #f5fbff !important;
    display: inline-flex !important;
    font-size: clamp(.86rem, 3.6vw, 1rem) !important;
    font-weight: 900 !important;
    height: auto !important;
    justify-content: center !important;
    line-height: 1 !important;
    min-height: 2.4rem !important;
    min-width: 0 !important;
    overflow: hidden !important;
    padding: 0 .42rem !important;
    text-align: center !important;
    white-space: nowrap !important;
    width: 100% !important;
}

.tcg-counter-page.is-online-game .tcg-timer-actions button:first-child {
    background: linear-gradient(180deg, #1688ff, #064c9d) !important;
    border-color: rgba(105, 195, 255, .76) !important;
}

.tcg-counter-page.is-online-game .tcg-player-top {
    grid-area: opponent !important;
}

.tcg-counter-page.is-online-game .tcg-player-bottom {
    border-color: var(--duel-line-hot) !important;
    box-shadow: inset 0 0 0 1px rgba(27, 156, 255, .18), 0 0 1.15rem rgba(20, 149, 255, .16) !important;
    grid-area: you !important;
}

.tcg-counter-page.is-online-game .tcg-player .tcg-player-inner {
    display: grid !important;
    gap: .46rem !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: .56rem !important;
}

.tcg-counter-page.is-online-game .tcg-player-top .tcg-player-inner {
    grid-template-rows: auto minmax(4.8rem, auto) !important;
}

.tcg-counter-page.is-online-game .tcg-player-bottom .tcg-player-inner {
    grid-template-rows: auto minmax(5.65rem, auto) auto auto !important;
}

.tcg-counter-page.is-online-game .tcg-player-top .tcg-quick-row,
.tcg-counter-page.is-online-game .tcg-player-top .tcg-calc {
    display: none !important;
}

.tcg-counter-page.is-online-game .tcg-player-head {
    align-items: center !important;
    display: grid !important;
    gap: .42rem !important;
    grid-template-columns: minmax(4.6rem, .24fr) minmax(0, .52fr) minmax(4.9rem, .24fr) !important;
    height: auto !important;
    min-height: 2.08rem !important;
    overflow: visible !important;
    padding: 0 !important;
}

.tcg-counter-page.is-online-game .tcg-player-head::before {
    color: var(--duel-blue) !important;
    content: "YOU" !important;
    display: block !important;
    font-size: clamp(.7rem, 3vw, .82rem) !important;
    font-weight: 950 !important;
    letter-spacing: .12em !important;
    line-height: 1 !important;
    min-width: 0 !important;
    position: static !important;
    text-transform: uppercase !important;
}

.tcg-counter-page.is-online-game .tcg-player-top .tcg-player-head::before {
    color: var(--duel-muted) !important;
    content: "OPPONENT" !important;
}

.tcg-counter-page.is-online-game .tcg-player .tcg-player-name {
    align-self: center !important;
    background: rgba(1, 7, 18, .68) !important;
    border: 1px solid rgba(88, 143, 205, .26) !important;
    border-radius: 999px !important;
    color: #ffffff !important;
    display: block !important;
    font-size: clamp(.88rem, 3.7vw, 1rem) !important;
    font-weight: 950 !important;
    height: 2rem !important;
    justify-self: center !important;
    line-height: 2rem !important;
    max-width: 100% !important;
    min-height: 2rem !important;
    min-width: 0 !important;
    overflow: hidden !important;
    padding: 0 .7rem !important;
    position: static !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    transform: none !important;
    white-space: nowrap !important;
    width: 100% !important;
}

.tcg-counter-page.is-online-game .tcg-player-online-state {
    align-items: center !important;
    align-self: center !important;
    background: rgba(17, 83, 52, .6) !important;
    border: 1px solid rgba(52, 229, 132, .42) !important;
    border-radius: 999px !important;
    color: #c9ffe0 !important;
    display: inline-flex !important;
    font-size: clamp(.58rem, 2.55vw, .72rem) !important;
    font-weight: 950 !important;
    gap: .28rem !important;
    height: 1.65rem !important;
    justify-content: center !important;
    justify-self: end !important;
    letter-spacing: .06em !important;
    line-height: 1 !important;
    max-width: 100% !important;
    min-height: 1.65rem !important;
    min-width: 4.6rem !important;
    overflow: hidden !important;
    padding: 0 .42rem !important;
    position: static !important;
    text-transform: uppercase !important;
    transform: none !important;
    white-space: nowrap !important;
}

.tcg-counter-page.is-online-game .tcg-player-online-state::before {
    background: var(--duel-green) !important;
    border-radius: 50% !important;
    box-shadow: 0 0 .5rem rgba(52, 229, 132, .8) !important;
    content: "" !important;
    flex: 0 0 .45rem !important;
    height: .45rem !important;
    width: .45rem !important;
}

.tcg-counter-page.is-online-game .tcg-player.is-player-offline .tcg-player-online-state {
    background: rgba(95, 35, 35, .66) !important;
    border-color: rgba(255, 100, 116, .5) !important;
    color: #ffd1d6 !important;
}

.tcg-counter-page.is-online-game .tcg-player.is-player-offline .tcg-player-online-state::before {
    background: var(--duel-red) !important;
}

.tcg-counter-page.is-online-game .tcg-player-actions {
    display: none !important;
}

.tcg-counter-page.is-online-game .tcg-lp-display {
    align-items: center !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #ffffff !important;
    display: flex !important;
    font-size: clamp(3.65rem, 15.6vw, 5.35rem) !important;
    font-weight: 950 !important;
    height: auto !important;
    justify-content: center !important;
    letter-spacing: 0 !important;
    line-height: .9 !important;
    min-height: 4.75rem !important;
    overflow: visible !important;
    padding: .22rem 0 .35rem !important;
    position: relative !important;
    text-shadow: 0 0 .7rem rgba(204, 235, 255, .82), 0 0 1.5rem rgba(20, 149, 255, .35) !important;
    transform: none !important;
    width: 100% !important;
}

.tcg-counter-page.is-online-game .tcg-player-top .tcg-lp-display {
    font-size: clamp(3.45rem, 14.4vw, 5rem) !important;
    min-height: 4.45rem !important;
}

.tcg-counter-page.is-online-game .tcg-player-bottom .tcg-quick-row {
    display: grid !important;
    gap: .42rem !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, minmax(2.35rem, auto)) !important;
    height: auto !important;
    overflow: visible !important;
}

.tcg-counter-page.is-online-game .tcg-player-bottom .tcg-calc {
    display: grid !important;
    gap: .42rem !important;
    grid-template-columns: minmax(0, 1fr) minmax(3.35rem, .13fr) minmax(3.35rem, .13fr) !important;
    height: auto !important;
    overflow: visible !important;
}

.tcg-counter-page.is-online-game .tcg-player-bottom .tcg-calc [data-calc-action="clear"] {
    display: none !important;
}

.tcg-counter-page.is-online-game .tcg-quick-row button[data-lp-delta^="-"] {
    color: #ff7581 !important;
}

.tcg-counter-page.is-online-game .tcg-quick-row button[data-lp-delta="100"],
.tcg-counter-page.is-online-game .tcg-quick-row button[data-lp-delta="500"],
.tcg-counter-page.is-online-game .tcg-quick-row button[data-lp-delta="1000"] {
    color: #37ef91 !important;
}

.tcg-counter-page.is-online-game .tcg-history {
    display: grid !important;
    gap: .58rem !important;
    grid-area: history !important;
    grid-template-rows: auto minmax(14rem, auto) !important;
    min-height: clamp(18rem, 42vh, 30rem) !important;
    overflow: visible !important;
    padding: .72rem !important;
}

.tcg-counter-page.is-online-game .tcg-history summary {
    align-items: center !important;
    border-bottom: 1px solid rgba(69, 144, 255, .26) !important;
    display: grid !important;
    gap: .5rem !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    min-height: 2.6rem !important;
    padding: 0 0 .55rem !important;
}

.tcg-counter-page.is-online-game .tcg-history summary span:first-child {
    align-items: center !important;
    color: #d9efff !important;
    display: inline-flex !important;
    font-size: clamp(.95rem, 4vw, 1.1rem) !important;
    font-weight: 950 !important;
    gap: .45rem !important;
    text-transform: uppercase !important;
}

.tcg-counter-page.is-online-game .tcg-history-actions {
    display: inline-flex !important;
    gap: .38rem !important;
}

.tcg-counter-page.is-online-game .tcg-history summary button {
    min-height: 2.2rem !important;
    padding: 0 .58rem !important;
    width: auto !important;
}

.tcg-counter-page.is-online-game .tcg-history ol {
    align-content: start !important;
    display: grid !important;
    gap: .5rem !important;
    grid-auto-rows: max-content !important;
    height: auto !important;
    max-height: none !important;
    min-height: 14rem !important;
    overflow: visible !important;
    padding: 0 !important;
}

.tcg-counter-page.is-online-game .tcg-history li,
.tcg-counter-page.is-online-game .tcg-history li:nth-child(n + 2),
.tcg-counter-page.is-online-game .tcg-history li:nth-child(n + 3),
.tcg-counter-page.is-online-game .tcg-history li:nth-child(n + 4) {
    background: linear-gradient(180deg, rgba(16, 28, 54, .94), rgba(7, 14, 30, .94)) !important;
    border: 1px solid rgba(90, 155, 255, .25) !important;
    border-left: .32rem solid var(--duel-blue) !important;
    border-radius: .52rem !important;
    display: grid !important;
    gap: .2rem !important;
    height: auto !important;
    min-height: 3.35rem !important;
    overflow: visible !important;
    padding: .58rem .7rem !important;
    white-space: normal !important;
}

.tcg-counter-page.is-online-game .tcg-history li span,
.tcg-counter-page.is-online-game .tcg-history li time {
    color: #93a9c8 !important;
    display: block !important;
    font-size: .78rem !important;
    line-height: 1.15 !important;
}

.tcg-counter-page.is-online-game .tcg-history li strong {
    color: #f8fbff !important;
    display: block !important;
    font-size: .92rem !important;
    line-height: 1.25 !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
    text-overflow: clip !important;
    white-space: normal !important;
}

@media (min-width: 701px) {
    body.tcg-online-game-body {
        background: #040b18 !important;
    }

    .tcg-counter-page.is-online-game {
        max-width: min(620px, 100vw) !important;
        padding-bottom: 2rem !important;
    }
}

@media (max-width: 380px) {
    .tcg-counter-page.is-online-game {
        --duel-gap: .45rem;
        padding-left: .35rem !important;
        padding-right: .35rem !important;
    }

    .tcg-counter-page.is-online-game .tcg-online-title-lockup strong {
        font-size: .98rem !important;
    }

    .tcg-counter-page.is-online-game .tcg-timer {
        grid-template-columns: minmax(6.4rem, .38fr) minmax(0, .62fr) !important;
    }

    .tcg-counter-page.is-online-game .tcg-lp-display {
        font-size: clamp(3.25rem, 14.8vw, 4.6rem) !important;
    }
}

/* Hard reset for legacy mobile HUD rules that used absolute positioning. */
.tcg-counter-page.is-online-game .tcg-counter-board,
.tcg-counter-page.is-online-game .tcg-counter-board > *,
.tcg-counter-page.is-online-game .tcg-center-panel,
.tcg-counter-page.is-online-game .tcg-center-panel > *,
.tcg-counter-page.is-online-game .tcg-round-card,
.tcg-counter-page.is-online-game .tcg-round-card > *,
.tcg-counter-page.is-online-game .tcg-timer,
.tcg-counter-page.is-online-game .tcg-timer > *,
.tcg-counter-page.is-online-game .tcg-timer-actions,
.tcg-counter-page.is-online-game .tcg-timer-actions > *,
.tcg-counter-page.is-online-game .tcg-tool-grid,
.tcg-counter-page.is-online-game .tcg-tool-grid > *,
.tcg-counter-page.is-online-game .tcg-player,
.tcg-counter-page.is-online-game .tcg-player > *,
.tcg-counter-page.is-online-game .tcg-player-inner,
.tcg-counter-page.is-online-game .tcg-player-inner > *,
.tcg-counter-page.is-online-game .tcg-player-head,
.tcg-counter-page.is-online-game .tcg-player-head > *,
.tcg-counter-page.is-online-game .tcg-quick-row,
.tcg-counter-page.is-online-game .tcg-quick-row > *,
.tcg-counter-page.is-online-game .tcg-calc,
.tcg-counter-page.is-online-game .tcg-calc > *,
.tcg-counter-page.is-online-game .tcg-history,
.tcg-counter-page.is-online-game .tcg-history > *,
.tcg-counter-page.is-online-game .tcg-history ol,
.tcg-counter-page.is-online-game .tcg-history li {
    bottom: auto !important;
    float: none !important;
    left: auto !important;
    margin: 0 !important;
    max-width: 100% !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
}

.tcg-counter-page.is-online-game .tcg-center-panel::before,
.tcg-counter-page.is-online-game .tcg-center-panel::after,
.tcg-counter-page.is-online-game .tcg-player::before,
.tcg-counter-page.is-online-game .tcg-player::after,
.tcg-counter-page.is-online-game .tcg-history::before,
.tcg-counter-page.is-online-game .tcg-history::after,
.tcg-counter-page.is-online-game .tcg-player-head::after {
    display: none !important;
}

.tcg-counter-page.is-online-game .tcg-counter-board > *,
.tcg-counter-page.is-online-game .tcg-center-panel > *,
.tcg-counter-page.is-online-game .tcg-player > *,
.tcg-counter-page.is-online-game .tcg-player-inner > *,
.tcg-counter-page.is-online-game .tcg-history > * {
    position: relative !important;
}

.tcg-counter-page.is-online-game .tcg-online-game-head,
.tcg-counter-page.is-online-game .tcg-online-game-head *,
.tcg-counter-page.is-online-game .tcg-pixi-stage,
.tcg-counter-page.is-online-game .tcg-event-overlay,
.tcg-counter-page.is-online-game .tcg-confirm-overlay,
.tcg-counter-page.is-online-game .tcg-log-overlay,
.tcg-counter-page.is-online-game .tcg-mobile-keypad {
    transform: none !important;
}

.tcg-counter-page.is-online-game .tcg-dice-stage,
.tcg-counter-page.is-online-game .tcg-coin-stage,
.tcg-counter-page.is-online-game .tcg-dice-cube,
.tcg-counter-page.is-online-game .tcg-dice-face,
.tcg-counter-page.is-online-game .tcg-coin-disc,
.tcg-counter-page.is-online-game .tcg-coin-face {
    position: absolute !important;
}

.tcg-counter-page.is-online-game .tcg-dice-stage,
.tcg-counter-page.is-online-game .tcg-coin-stage {
    position: relative !important;
}

.tcg-counter-page.is-online-game .tcg-dice-face-1 { transform: rotateY(0deg) translateZ(calc(clamp(2.5rem, 10.5vw, 3.15rem) / 2)) !important; }
.tcg-counter-page.is-online-game .tcg-dice-face-2 { transform: rotateY(90deg) translateZ(calc(clamp(2.5rem, 10.5vw, 3.15rem) / 2)) !important; }
.tcg-counter-page.is-online-game .tcg-dice-face-3 { transform: rotateX(90deg) translateZ(calc(clamp(2.5rem, 10.5vw, 3.15rem) / 2)) !important; }
.tcg-counter-page.is-online-game .tcg-dice-face-4 { transform: rotateX(-90deg) translateZ(calc(clamp(2.5rem, 10.5vw, 3.15rem) / 2)) !important; }
.tcg-counter-page.is-online-game .tcg-dice-face-5 { transform: rotateY(-90deg) translateZ(calc(clamp(2.5rem, 10.5vw, 3.15rem) / 2)) !important; }
.tcg-counter-page.is-online-game .tcg-dice-face-6 { transform: rotateX(180deg) translateZ(calc(clamp(2.5rem, 10.5vw, 3.15rem) / 2)) !important; }

.tcg-counter-page.is-online-game .tcg-coin-face.tcg-coin-heads {
    transform: rotateY(0deg) translateZ(.09rem) !important;
}

.tcg-counter-page.is-online-game .tcg-coin-face.tcg-coin-tails {
    transform: rotateY(180deg) translateZ(.09rem) !important;
}

/* Higher-specificity pass for JS-added mobile fit classes. */
body.tcg-online-game-body .tcg-counter-page.is-online-game.is-mobile-fit,
body.tcg-online-game-body .tcg-counter-page.is-online-game.is-mobile-fit.is-stage-compact,
body.tcg-online-game-body .tcg-counter-page.is-online-game.is-mobile-fit.is-tight-height,
body.tcg-online-game-body .tcg-counter-page.is-online-game.is-mobile-fit.is-ultra-tight {
    display: grid !important;
    gap: var(--duel-gap) !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    height: auto !important;
    max-height: none !important;
    min-height: 100svh !important;
    overflow: visible !important;
    padding: clamp(.45rem, 1.4vw, .8rem) clamp(.45rem, 1.5vw, .75rem) max(8rem, calc(env(safe-area-inset-bottom, 0px) + 8rem)) !important;
    transform: none !important;
    width: 100% !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game.is-mobile-fit .tcg-counter-board,
body.tcg-online-game-body .tcg-counter-page.is-online-game.is-mobile-fit.is-stage-compact .tcg-counter-board {
    display: grid !important;
    gap: var(--duel-gap) !important;
    grid-template-areas:
        "controls"
        "opponent"
        "you"
        "history" !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto minmax(18rem, auto) !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
    transform: none !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game.is-mobile-fit .tcg-center-panel,
body.tcg-online-game-body .tcg-counter-page.is-online-game.is-mobile-fit.is-stage-compact .tcg-center-panel {
    display: grid !important;
    gap: .55rem !important;
    grid-area: controls !important;
    grid-template-areas:
        "round"
        "timer"
        "tools" !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: .58rem !important;
    position: relative !important;
    transform: none !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game.is-mobile-fit .tcg-round-card,
body.tcg-online-game-body .tcg-counter-page.is-online-game.is-mobile-fit.is-stage-compact .tcg-round-card {
    display: grid !important;
    gap: .55rem !important;
    grid-area: round !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    padding: .45rem !important;
    position: relative !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game.is-mobile-fit .tcg-timer,
body.tcg-online-game-body .tcg-counter-page.is-online-game.is-mobile-fit.is-stage-compact .tcg-timer {
    display: grid !important;
    gap: .55rem !important;
    grid-area: timer !important;
    grid-template-columns: minmax(7.2rem, .42fr) minmax(0, .58fr) !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: .45rem !important;
    position: relative !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game.is-mobile-fit .tcg-timer-actions,
body.tcg-online-game-body .tcg-counter-page.is-online-game.is-mobile-fit.is-stage-compact .tcg-timer-actions {
    display: grid !important;
    gap: .45rem !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, minmax(2.32rem, auto)) !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game.is-mobile-fit .tcg-tool-grid,
body.tcg-online-game-body .tcg-counter-page.is-online-game.is-mobile-fit.is-stage-compact .tcg-tool-grid {
    display: grid !important;
    gap: .55rem !important;
    grid-area: tools !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game.is-mobile-fit .tcg-tool,
body.tcg-online-game-body .tcg-counter-page.is-online-game.is-mobile-fit.is-stage-compact .tcg-tool {
    display: grid !important;
    gap: .45rem !important;
    grid-template-columns: minmax(2.8rem, .28fr) minmax(0, .72fr) !important;
    height: auto !important;
    min-height: 4.8rem !important;
    overflow: visible !important;
    padding: .45rem !important;
    position: relative !important;
    transform: none !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game.is-mobile-fit .tcg-player-top,
body.tcg-online-game-body .tcg-counter-page.is-online-game.is-mobile-fit.is-stage-compact .tcg-player-top {
    grid-area: opponent !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game.is-mobile-fit .tcg-player-bottom,
body.tcg-online-game-body .tcg-counter-page.is-online-game.is-mobile-fit.is-stage-compact .tcg-player-bottom {
    grid-area: you !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game.is-mobile-fit .tcg-player,
body.tcg-online-game-body .tcg-counter-page.is-online-game.is-mobile-fit.is-stage-compact .tcg-player {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    position: relative !important;
    transform: none !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game.is-mobile-fit .tcg-player .tcg-player-inner,
body.tcg-online-game-body .tcg-counter-page.is-online-game.is-mobile-fit.is-stage-compact .tcg-player .tcg-player-inner {
    display: grid !important;
    gap: .46rem !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: .56rem !important;
    position: relative !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game.is-mobile-fit .tcg-player-top .tcg-player-inner,
body.tcg-online-game-body .tcg-counter-page.is-online-game.is-mobile-fit.is-stage-compact .tcg-player-top .tcg-player-inner {
    grid-template-rows: auto minmax(4.8rem, auto) !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game.is-mobile-fit .tcg-player-bottom .tcg-player-inner,
body.tcg-online-game-body .tcg-counter-page.is-online-game.is-mobile-fit.is-stage-compact .tcg-player-bottom .tcg-player-inner {
    grid-template-rows: auto minmax(5.65rem, auto) auto auto !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game.is-mobile-fit .tcg-player-head,
body.tcg-online-game-body .tcg-counter-page.is-online-game.is-mobile-fit.is-stage-compact .tcg-player-head {
    display: grid !important;
    gap: .42rem !important;
    grid-template-columns: minmax(4.6rem, .24fr) minmax(0, .52fr) minmax(4.9rem, .24fr) !important;
    height: auto !important;
    min-height: 2.08rem !important;
    overflow: visible !important;
    padding: 0 !important;
    position: relative !important;
    transform: none !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game.is-mobile-fit .tcg-player .tcg-player-name,
body.tcg-online-game-body .tcg-counter-page.is-online-game.is-mobile-fit.is-stage-compact .tcg-player .tcg-player-name {
    height: 2rem !important;
    line-height: 2rem !important;
    max-height: none !important;
    max-width: 100% !important;
    min-height: 2rem !important;
    min-width: 0 !important;
    position: static !important;
    text-align: center !important;
    transform: none !important;
    width: 100% !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game.is-mobile-fit .tcg-player-online-state,
body.tcg-online-game-body .tcg-counter-page.is-online-game.is-mobile-fit.is-stage-compact .tcg-player-online-state {
    height: 1.65rem !important;
    justify-self: end !important;
    max-width: 100% !important;
    min-height: 1.65rem !important;
    min-width: 4.6rem !important;
    position: static !important;
    transform: none !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game.is-mobile-fit .tcg-lp-display,
body.tcg-online-game-body .tcg-counter-page.is-online-game.is-mobile-fit.is-stage-compact .tcg-lp-display {
    align-items: center !important;
    display: flex !important;
    font-size: clamp(3.65rem, 15.6vw, 5.35rem) !important;
    height: auto !important;
    justify-content: center !important;
    line-height: .9 !important;
    max-height: none !important;
    min-height: 4.75rem !important;
    overflow: visible !important;
    padding: .22rem 0 .35rem !important;
    position: relative !important;
    transform: none !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game.is-mobile-fit .tcg-player-bottom .tcg-quick-row,
body.tcg-online-game-body .tcg-counter-page.is-online-game.is-mobile-fit.is-stage-compact .tcg-player-bottom .tcg-quick-row {
    display: grid !important;
    gap: .42rem !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, minmax(2.35rem, auto)) !important;
    height: auto !important;
    overflow: visible !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game.is-mobile-fit .tcg-player-bottom .tcg-calc,
body.tcg-online-game-body .tcg-counter-page.is-online-game.is-mobile-fit.is-stage-compact .tcg-player-bottom .tcg-calc {
    display: grid !important;
    gap: .42rem !important;
    grid-template-columns: minmax(0, 1fr) minmax(3.35rem, .13fr) minmax(3.35rem, .13fr) !important;
    height: auto !important;
    overflow: visible !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game.is-mobile-fit .tcg-history,
body.tcg-online-game-body .tcg-counter-page.is-online-game.is-mobile-fit.is-stage-compact .tcg-history {
    display: grid !important;
    gap: .58rem !important;
    grid-area: history !important;
    grid-template-rows: auto minmax(14rem, auto) !important;
    height: auto !important;
    max-height: none !important;
    min-height: clamp(18rem, 42vh, 30rem) !important;
    overflow: visible !important;
    padding: .72rem !important;
    position: relative !important;
    transform: none !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game.is-mobile-fit .tcg-history ol,
body.tcg-online-game-body .tcg-counter-page.is-online-game.is-mobile-fit.is-stage-compact .tcg-history ol {
    display: grid !important;
    gap: .5rem !important;
    grid-auto-rows: max-content !important;
    height: auto !important;
    max-height: none !important;
    min-height: 14rem !important;
    overflow: visible !important;
}

/* V3 clean-room online layout. This intentionally clears legacy layout styles. */
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-online-game-head,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-online-game-head *,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-counter-board,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-center-panel,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-center-panel > *,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-round-card,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-round-card > *,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-timer,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-timer > *,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-timer-actions,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-timer-actions > *,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-tool-grid,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-tool,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-tool > *,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-player,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-player > *,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-player-inner,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-player-inner > *,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-player-head,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-player-head > *,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-quick-row,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-quick-row > *,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-calc,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-calc > *,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-history,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-history > *,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-history ol,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-history li,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-history li > * {
    all: unset !important;
    box-sizing: border-box !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game {
    align-items: stretch !important;
    display: grid !important;
    gap: .6rem !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    height: auto !important;
    max-height: none !important;
    max-width: min(540px, 100vw) !important;
    min-height: 100svh !important;
    overflow: visible !important;
    padding: .5rem .5rem 8.5rem !important;
    width: 100% !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-online-game-head {
    align-items: center !important;
    background: linear-gradient(180deg, rgba(12, 21, 42, .96), rgba(5, 12, 27, .96)) !important;
    border: 1px solid rgba(255, 195, 90, .5) !important;
    border-radius: .8rem !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), 0 .8rem 1.7rem rgba(0, 0, 0, .24) !important;
    display: grid !important;
    gap: .45rem !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
        "brand exit"
        "status status" !important;
    min-width: 0 !important;
    padding: .48rem !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-online-title-lockup {
    align-items: center !important;
    display: grid !important;
    gap: .5rem !important;
    grid-area: brand !important;
    grid-template-columns: 2.15rem minmax(0, 1fr) !important;
    min-width: 0 !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-online-crest {
    align-items: center !important;
    background: linear-gradient(135deg, #8ef7d8, #ffc75b) !important;
    border-radius: .45rem !important;
    color: #071321 !important;
    display: inline-flex !important;
    font: 950 1rem/1 "Segoe UI", Arial, sans-serif !important;
    height: 2.15rem !important;
    justify-content: center !important;
    overflow: hidden !important;
    width: 2.15rem !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-online-title-lockup strong {
    color: #f8fbff !important;
    display: block !important;
    font: 950 clamp(1rem, 4.8vw, 1.28rem)/1 "Segoe UI", Arial, sans-serif !important;
    letter-spacing: .035em !important;
    overflow: hidden !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    text-shadow: 0 0 .75rem rgba(125, 211, 255, .5) !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-online-exit-game {
    align-items: center !important;
    background: linear-gradient(180deg, rgba(255, 195, 90, .24), rgba(255, 165, 35, .08)) !important;
    border: 1px solid rgba(255, 195, 90, .9) !important;
    border-radius: .65rem !important;
    color: #ffd47a !important;
    display: inline-flex !important;
    font: 950 .82rem/1 "Segoe UI", Arial, sans-serif !important;
    gap: .35rem !important;
    grid-area: exit !important;
    justify-content: center !important;
    min-height: 2.3rem !important;
    padding: 0 .6rem !important;
    white-space: nowrap !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-online-status-strip {
    display: grid !important;
    gap: .42rem !important;
    grid-area: status !important;
    grid-template-columns: minmax(0, .42fr) minmax(0, .58fr) !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-online-chip {
    align-items: center !important;
    background: rgba(3, 12, 27, .92) !important;
    border: 1px solid rgba(72, 148, 255, .42) !important;
    border-radius: .45rem !important;
    color: #ffd787 !important;
    display: inline-flex !important;
    font: 950 .72rem/1 "Segoe UI", Arial, sans-serif !important;
    gap: .32rem !important;
    justify-content: center !important;
    letter-spacing: .08em !important;
    min-height: 1.95rem !important;
    overflow: hidden !important;
    padding: 0 .42rem !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-online-dot {
    background: #34e584 !important;
    border-radius: 50% !important;
    box-shadow: 0 0 .7rem rgba(52, 229, 132, .9) !important;
    display: inline-block !important;
    height: .52rem !important;
    width: .52rem !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-counter-board {
    display: grid !important;
    gap: .6rem !important;
    grid-template-areas:
        "controls"
        "opponent"
        "you"
        "history" !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto minmax(18rem, auto) !important;
    min-width: 0 !important;
    overflow: visible !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-center-panel,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-player,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-history {
    background: linear-gradient(135deg, rgba(8, 20, 42, .96), rgba(2, 8, 20, .97)) !important;
    border: 1px solid rgba(65, 150, 255, .42) !important;
    border-radius: .85rem !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .035), 0 .7rem 1.6rem rgba(0, 0, 0, .24) !important;
    display: grid !important;
    min-width: 0 !important;
    overflow: visible !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-center-panel {
    gap: .55rem !important;
    grid-area: controls !important;
    grid-template-areas: "round" "timer" "tools" !important;
    padding: .58rem !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-round-card {
    display: grid !important;
    gap: .55rem !important;
    grid-area: round !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-round-card > div,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-round-card .tcg-solo-exit-game,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-timer-actions [data-return-lobby] {
    display: none !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-timer {
    display: grid !important;
    gap: .55rem !important;
    grid-area: timer !important;
    grid-template-columns: minmax(7rem, .42fr) minmax(0, .58fr) !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-timer > div:first-child {
    align-items: center !important;
    background: rgba(3, 12, 27, .68) !important;
    border: 1px solid rgba(72, 148, 255, .28) !important;
    border-radius: .58rem !important;
    display: grid !important;
    justify-items: center !important;
    min-height: 4.1rem !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-timer span {
    display: none !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-timer strong {
    color: #f8fbff !important;
    display: block !important;
    font: 950 clamp(2rem, 8.5vw, 2.9rem)/.9 "Segoe UI", Arial, sans-serif !important;
    text-shadow: 0 0 .65rem rgba(185, 225, 255, .75) !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-timer-actions {
    display: grid !important;
    gap: .45rem !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-tool-grid {
    display: grid !important;
    gap: .55rem !important;
    grid-area: tools !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-tool {
    align-items: center !important;
    background: linear-gradient(180deg, rgba(6, 24, 52, .88), rgba(3, 12, 27, .92)) !important;
    border: 1px solid rgba(72, 148, 255, .38) !important;
    border-radius: .62rem !important;
    display: grid !important;
    gap: .45rem !important;
    grid-template-columns: 3rem minmax(0, 1fr) !important;
    min-height: 4.8rem !important;
    padding: .45rem !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-tool > svg,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-tool > span:not(.tcg-dice-stage):not(.tcg-coin-stage) {
    display: none !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-dice-stage,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-coin-stage {
    align-items: center !important;
    background: rgba(125, 211, 255, .12) !important;
    border: 1px solid rgba(125, 211, 255, .42) !important;
    border-radius: .55rem !important;
    display: grid !important;
    height: 2.75rem !important;
    justify-items: center !important;
    overflow: hidden !important;
    position: relative !important;
    width: 2.75rem !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-dice-stage::before {
    color: #dff7ff !important;
    content: "Dice" !important;
    display: block !important;
    font: 950 .72rem/1 "Segoe UI", Arial, sans-serif !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-coin-stage::before {
    color: #071321 !important;
    content: "H" !important;
    display: grid !important;
    place-items: center !important;
    background: radial-gradient(circle at 35% 25%, #fff4ba, #ffc75b 58%, #a15c00) !important;
    border-radius: 50% !important;
    font: 950 1.2rem/1 "Segoe UI", Arial, sans-serif !important;
    height: 2.25rem !important;
    width: 2.25rem !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-dice-cube,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-coin-disc {
    display: none !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-tool strong {
    align-items: center !important;
    background: linear-gradient(180deg, rgba(12, 39, 78, .9), rgba(3, 12, 27, .94)) !important;
    border: 1px solid rgba(72, 148, 255, .38) !important;
    border-radius: .5rem !important;
    color: #ffd787 !important;
    display: flex !important;
    font: 950 1.12rem/1 "Segoe UI", Arial, sans-serif !important;
    justify-content: center !important;
    min-height: 3rem !important;
    overflow: hidden !important;
    padding: 0 .45rem !important;
    text-align: center !important;
    white-space: nowrap !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-reset,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-timer-actions button,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-quick-row button,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-calc button,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-calc-input,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-history summary button {
    align-items: center !important;
    background: linear-gradient(180deg, rgba(13, 40, 78, .96), rgba(4, 14, 31, .96)) !important;
    border: 1px solid rgba(73, 148, 255, .42) !important;
    border-radius: .5rem !important;
    color: #f5fbff !important;
    display: inline-flex !important;
    font: 900 .95rem/1 "Segoe UI", Arial, sans-serif !important;
    justify-content: center !important;
    min-height: 2.42rem !important;
    overflow: hidden !important;
    padding: 0 .42rem !important;
    text-align: center !important;
    white-space: nowrap !important;
    width: 100% !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-timer-actions button:first-child {
    background: linear-gradient(180deg, #1688ff, #064c9d) !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-player-top {
    grid-area: opponent !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-player-bottom {
    border-color: rgba(22, 136, 255, .82) !important;
    grid-area: you !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-player .tcg-player-inner {
    display: grid !important;
    gap: .46rem !important;
    padding: .56rem !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-player-top .tcg-player-inner {
    grid-template-rows: auto minmax(4.75rem, auto) !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-player-bottom .tcg-player-inner {
    grid-template-rows: auto minmax(5.7rem, auto) auto auto !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-player-top .tcg-quick-row,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-player-top .tcg-calc,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-player-actions {
    display: none !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-player-head {
    align-items: center !important;
    display: grid !important;
    gap: .42rem !important;
    grid-template-columns: 4.65rem minmax(0, 1fr) 4.8rem !important;
    min-height: 2.08rem !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-player-head::before {
    color: #1495ff !important;
    content: "YOU" !important;
    display: block !important;
    font: 950 .76rem/1 "Segoe UI", Arial, sans-serif !important;
    letter-spacing: .12em !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-player-top .tcg-player-head::before {
    color: #9fb2ce !important;
    content: "OPPONENT" !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-player .tcg-player-name {
    background: rgba(1, 7, 18, .68) !important;
    border: 1px solid rgba(88, 143, 205, .28) !important;
    border-radius: 999px !important;
    color: #fff !important;
    display: block !important;
    font: 950 .95rem/2rem "Segoe UI", Arial, sans-serif !important;
    height: 2rem !important;
    overflow: hidden !important;
    padding: 0 .65rem !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    width: 100% !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-player-online-state {
    align-items: center !important;
    background: rgba(17, 83, 52, .6) !important;
    border: 1px solid rgba(52, 229, 132, .42) !important;
    border-radius: 999px !important;
    color: #c9ffe0 !important;
    display: inline-flex !important;
    font: 950 .63rem/1 "Segoe UI", Arial, sans-serif !important;
    gap: .22rem !important;
    justify-content: center !important;
    min-height: 1.55rem !important;
    padding: 0 .38rem !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-player-online-state::before {
    background: #34e584 !important;
    border-radius: 50% !important;
    content: "" !important;
    display: inline-block !important;
    height: .42rem !important;
    width: .42rem !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-lp-display {
    align-items: center !important;
    color: #fff !important;
    display: flex !important;
    font: 950 clamp(3.55rem, 15vw, 5.2rem)/.9 "Segoe UI", Arial, sans-serif !important;
    justify-content: center !important;
    min-height: 4.85rem !important;
    overflow: visible !important;
    text-shadow: 0 0 .7rem rgba(204, 235, 255, .82), 0 0 1.5rem rgba(20, 149, 255, .35) !important;
    width: 100% !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-player-bottom .tcg-quick-row {
    display: grid !important;
    gap: .42rem !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-player-bottom .tcg-calc {
    display: grid !important;
    gap: .42rem !important;
    grid-template-columns: minmax(0, 1fr) 3.45rem 3.45rem !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-player-bottom .tcg-calc [data-calc-action="clear"] {
    display: none !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-quick-row button[data-lp-delta^="-"] {
    color: #ff7581 !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-quick-row button[data-lp-delta="100"],
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-quick-row button[data-lp-delta="500"],
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-quick-row button[data-lp-delta="1000"] {
    color: #37ef91 !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-history {
    gap: .58rem !important;
    grid-area: history !important;
    grid-template-rows: auto minmax(14rem, auto) !important;
    min-height: 18rem !important;
    padding: .72rem !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-history summary {
    align-items: center !important;
    border-bottom: 1px solid rgba(69, 144, 255, .26) !important;
    display: grid !important;
    gap: .5rem !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    min-height: 2.55rem !important;
    padding-bottom: .55rem !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-history summary span:first-child {
    align-items: center !important;
    color: #d9efff !important;
    display: inline-flex !important;
    font: 950 1rem/1 "Segoe UI", Arial, sans-serif !important;
    gap: .42rem !important;
    text-transform: uppercase !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-history-actions {
    display: inline-flex !important;
    gap: .35rem !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-history summary button {
    min-height: 2.18rem !important;
    padding: 0 .58rem !important;
    width: auto !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-history ol {
    display: grid !important;
    gap: .5rem !important;
    grid-auto-rows: max-content !important;
    min-height: 14rem !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-history li {
    background: linear-gradient(180deg, rgba(16, 28, 54, .94), rgba(7, 14, 30, .94)) !important;
    border: 1px solid rgba(90, 155, 255, .25) !important;
    border-left: .32rem solid #1495ff !important;
    border-radius: .52rem !important;
    display: grid !important;
    gap: .2rem !important;
    min-height: 3.35rem !important;
    padding: .58rem .7rem !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-history li span,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-history li time {
    color: #93a9c8 !important;
    display: block !important;
    font: 400 .78rem/1.15 "Segoe UI", Arial, sans-serif !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-history li strong {
    color: #f8fbff !important;
    display: block !important;
    font: 850 .92rem/1.25 "Segoe UI", Arial, sans-serif !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
}

/* Grid reset pass: the previous online HUD styles used fixed heights and overlapping layers.
   This section deliberately re-owns the online game page as normal document flow. */
body.tcg-online-game-body .tcg-counter-page.is-online-game,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-online-game-head,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-online-title-lockup,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-online-status-strip,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-counter-board,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-center-panel,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-round-card,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-tool-grid,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-tool,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-timer,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-timer > div,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-timer-actions,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-player,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-player-inner,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-player-head,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-quick-row,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-calc,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-history,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-history summary,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-history ol,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-history li {
    bottom: auto !important;
    clear: none !important;
    flex: none !important;
    float: none !important;
    grid-column: auto !important;
    grid-row: auto !important;
    height: auto !important;
    inset: auto !important;
    left: auto !important;
    margin: 0 !important;
    max-height: none !important;
    min-height: 0 !important;
    order: 0 !important;
    position: static !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    width: auto !important;
    z-index: auto !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game {
    --duel-panel: rgba(7, 17, 36, .95);
    --duel-panel-2: rgba(11, 26, 54, .96);
    --duel-border: rgba(66, 151, 255, .45);
    --duel-border-hot: rgba(0, 149, 255, .9);
    --duel-gold: #ffc35a;
    --duel-blue: #1495ff;
    --duel-red: #ff6678;
    --duel-green: #42f19a;
    background:
        radial-gradient(circle at 15% -8%, rgba(29, 145, 255, .26), transparent 20rem),
        radial-gradient(circle at 90% 25%, rgba(255, 195, 90, .11), transparent 22rem),
        linear-gradient(180deg, #081222 0%, #040b17 64%, #020710 100%) !important;
    color: #f7fbff !important;
    display: grid !important;
    gap: clamp(.48rem, 1.7vw, .78rem) !important;
    justify-content: center !important;
    margin: 0 auto !important;
    max-width: 34rem !important;
    min-width: 0 !important;
    min-height: 100svh !important;
    overflow: visible !important;
    padding: clamp(.45rem, 1.6vw, .8rem) clamp(.42rem, 1.5vw, .75rem) max(7rem, env(safe-area-inset-bottom)) !important;
    width: min(100%, 34rem) !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game *,
body.tcg-online-game-body .tcg-counter-page.is-online-game *::before,
body.tcg-online-game-body .tcg-counter-page.is-online-game *::after {
    max-width: 100% !important;
}

@media (min-width: 900px) {
    body.tcg-online-game-body .tcg-counter-page.is-online-game {
        max-width: 42rem !important;
        padding-bottom: 2rem !important;
        width: min(100%, 42rem) !important;
    }
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-online-game-head {
    align-items: center !important;
    background: linear-gradient(180deg, rgba(10, 17, 36, .98), rgba(5, 13, 28, .98)) !important;
    border: 1px solid rgba(255, 195, 90, .45) !important;
    border-radius: 1rem !important;
    box-shadow: 0 0 0 1px rgba(35, 121, 255, .16) inset, 0 .7rem 1.7rem rgba(0, 0, 0, .28) !important;
    display: grid !important;
    gap: .45rem !important;
    grid-template-columns: 2.35rem minmax(0, 1fr) 4.8rem !important;
    grid-template-rows: auto auto !important;
    padding: .48rem !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-online-title-lockup {
    align-items: center !important;
    display: contents !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-online-crest {
    align-items: center !important;
    background: linear-gradient(135deg, #61f4d8, #ffc35a) !important;
    border: 1px solid rgba(255, 255, 255, .32) !important;
    border-radius: .62rem !important;
    color: #06101f !important;
    display: grid !important;
    font: 950 1rem/1 "Segoe UI", Arial, sans-serif !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    height: 2.35rem !important;
    justify-content: center !important;
    overflow: hidden !important;
    width: 2.35rem !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-online-crest img,
body.tcg-online-game-body .tcg-counter-page.is-online-game .brand-logo-slide,
body.tcg-online-game-body .tcg-counter-page.is-online-game .brand-logo-slide img {
    border-radius: inherit !important;
    display: block !important;
    height: 100% !important;
    object-fit: cover !important;
    width: 100% !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-online-title-lockup > strong {
    align-self: center !important;
    color: #ffffff !important;
    display: block !important;
    font: 950 clamp(.92rem, 4.1vw, 1.2rem)/1.05 "Segoe UI", Arial, sans-serif !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    letter-spacing: .04em !important;
    overflow: hidden !important;
    text-align: center !important;
    text-shadow: 0 0 .65rem rgba(113, 187, 255, .7) !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-online-exit-game {
    align-items: center !important;
    background: linear-gradient(180deg, #ffd16b, #d9911e) !important;
    border: 1px solid rgba(255, 231, 162, .75) !important;
    border-radius: .82rem !important;
    box-shadow: 0 0 1rem rgba(255, 183, 58, .3) !important;
    color: #08111f !important;
    display: inline-flex !important;
    font: 950 clamp(.72rem, 2.8vw, .82rem)/1 "Segoe UI", Arial, sans-serif !important;
    gap: .32rem !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-content: center !important;
    min-height: 2.35rem !important;
    padding: 0 .4rem !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-online-exit-game span {
    font-size: 0 !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-online-exit-game span::after {
    content: "Exit" !important;
    font: 950 .78rem/1 "Segoe UI", Arial, sans-serif !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-online-exit-game svg {
    height: 1rem !important;
    width: 1rem !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-online-status-strip {
    display: grid !important;
    gap: .4rem !important;
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    grid-template-columns: minmax(7.1rem, .72fr) minmax(0, 1.28fr) !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-online-chip {
    align-items: center !important;
    background: linear-gradient(180deg, rgba(8, 27, 58, .95), rgba(4, 12, 29, .95)) !important;
    border: 1px solid rgba(76, 154, 255, .52) !important;
    border-radius: .55rem !important;
    color: #ffd787 !important;
    display: inline-flex !important;
    font: 950 clamp(.68rem, 3vw, .86rem)/1 "Segoe UI", Arial, sans-serif !important;
    gap: .32rem !important;
    justify-content: center !important;
    min-height: 2rem !important;
    overflow: hidden !important;
    padding: 0 .42rem !important;
    text-align: center !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-online-dot {
    background: #35e987 !important;
    border-radius: 999px !important;
    box-shadow: 0 0 .55rem rgba(53, 233, 135, .8) !important;
    display: inline-block !important;
    flex: 0 0 auto !important;
    height: .58rem !important;
    width: .58rem !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-counter-board {
    display: grid !important;
    gap: .55rem !important;
    grid-template-areas:
        "controls"
        "opponent"
        "you"
        "history" !important;
    grid-template-columns: minmax(0, 1fr) !important;
    overflow: visible !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-center-panel {
    grid-column: auto !important;
    grid-row: auto !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-center-panel,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-player,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-history {
    background: linear-gradient(180deg, rgba(9, 27, 57, .94), rgba(3, 11, 25, .96)) !important;
    border: 1px solid var(--duel-border) !important;
    border-radius: .92rem !important;
    box-shadow: 0 0 0 1px rgba(23, 139, 255, .12) inset, 0 0 1.15rem rgba(16, 118, 255, .1) !important;
    overflow: visible !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-player-top,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-player-bottom,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-center-panel,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-history {
    margin: 0 !important;
    max-width: none !important;
    opacity: 1 !important;
    transform: none !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-center-panel {
    display: grid !important;
    gap: .5rem !important;
    grid-area: controls !important;
    grid-template-areas:
        "round"
        "timer"
        "tools" !important;
    grid-template-columns: minmax(0, 1fr) !important;
    padding: .5rem !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-round-card {
    background: transparent !important;
    border: 0 !important;
    display: grid !important;
    gap: .45rem !important;
    grid-area: round !important;
    grid-template-columns: 1fr 1fr !important;
    padding: 0 !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-round-card > div,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-round-card .tcg-solo-exit-game,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-timer-actions [data-return-lobby],
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-player-actions,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-player-top .tcg-quick-row,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-player-top .tcg-calc {
    display: none !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game button,
body.tcg-online-game-body .tcg-counter-page.is-online-game input {
    font-family: "Segoe UI", Arial, sans-serif !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-reset,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-timer-actions button,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-tool strong,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-quick-row button,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-calc button,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-calc-input,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-history summary button {
    align-items: center !important;
    appearance: none !important;
    background: linear-gradient(180deg, rgba(17, 47, 91, .98), rgba(4, 14, 31, .98)) !important;
    border: 1px solid rgba(83, 159, 255, .42) !important;
    border-radius: .5rem !important;
    box-shadow: 0 .15rem .55rem rgba(0, 0, 0, .28), 0 0 0 1px rgba(255, 255, 255, .04) inset !important;
    color: #f8fbff !important;
    cursor: pointer !important;
    display: inline-flex !important;
    font: 900 clamp(.8rem, 3.2vw, .95rem)/1 "Segoe UI", Arial, sans-serif !important;
    justify-content: center !important;
    min-height: 2.7rem !important;
    min-width: 0 !important;
    overflow: hidden !important;
    padding: 0 .5rem !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    width: 100% !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-reset svg {
    display: none !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-timer {
    align-items: stretch !important;
    display: grid !important;
    gap: .5rem !important;
    grid-area: timer !important;
    grid-template-columns: minmax(6.9rem, .76fr) minmax(0, 1.55fr) !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-timer > div:first-child {
    align-items: center !important;
    background: rgba(2, 8, 20, .62) !important;
    border: 1px solid rgba(75, 147, 255, .28) !important;
    border-radius: .62rem !important;
    display: grid !important;
    justify-items: center !important;
    min-height: 4.7rem !important;
    padding: .28rem !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-timer > div:first-child span {
    color: #9eb4d4 !important;
    display: block !important;
    font: 950 .64rem/1 "Segoe UI", Arial, sans-serif !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-timer > div:first-child strong {
    color: #f6fbff !important;
    display: block !important;
    font: 950 clamp(1.75rem, 9vw, 2.45rem)/.9 "Segoe UI", Arial, sans-serif !important;
    text-shadow: 0 0 .65rem rgba(204, 235, 255, .7) !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-timer-actions {
    display: grid !important;
    gap: .45rem !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-timer-actions button:first-child {
    background: linear-gradient(180deg, #1592ff, #064d9f) !important;
    border-color: rgba(70, 179, 255, .8) !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-tool-grid {
    display: grid !important;
    gap: .5rem !important;
    grid-area: tools !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-tool {
    align-items: center !important;
    background: rgba(4, 15, 35, .74) !important;
    border: 1px solid rgba(79, 157, 255, .34) !important;
    border-radius: .68rem !important;
    display: grid !important;
    gap: .35rem !important;
    grid-template-columns: 3.4rem minmax(0, 1fr) !important;
    min-height: 4.4rem !important;
    padding: .42rem !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-tool > i,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-tool > span:not(.tcg-dice-stage):not(.tcg-coin-stage) {
    display: none !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-dice-stage,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-coin-stage {
    align-items: center !important;
    display: grid !important;
    height: 3.1rem !important;
    justify-items: center !important;
    min-width: 0 !important;
    perspective: none !important;
    width: 3.1rem !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-dice-cube,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-coin-disc {
    display: none !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-dice-stage::before {
    align-items: center !important;
    background:
        radial-gradient(circle at 31% 31%, #13518f 0 .15rem, transparent .16rem),
        radial-gradient(circle at 50% 50%, #13518f 0 .15rem, transparent .16rem),
        radial-gradient(circle at 69% 69%, #13518f 0 .15rem, transparent .16rem),
        linear-gradient(135deg, #f4ffff, #8ee8ff) !important;
    border: 1px solid rgba(220, 255, 255, .95) !important;
    border-radius: .58rem !important;
    box-shadow: 0 0 .8rem rgba(105, 218, 255, .72) !important;
    content: "" !important;
    display: grid !important;
    height: 2.65rem !important;
    justify-items: center !important;
    transform: rotate(-7deg) !important;
    width: 2.65rem !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-coin-stage::before {
    align-items: center !important;
    background: radial-gradient(circle at 34% 25%, #fff1aa, #ffc04d 58%, #9b5705) !important;
    border: 1px solid rgba(255, 246, 204, .9) !important;
    border-radius: 999px !important;
    box-shadow: 0 0 .9rem rgba(255, 198, 73, .68) !important;
    color: #271604 !important;
    content: "H" !important;
    display: grid !important;
    font: 950 1rem/1 "Segoe UI", Arial, sans-serif !important;
    height: 2.65rem !important;
    justify-items: center !important;
    width: 2.65rem !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-tool strong {
    color: #ffd787 !important;
    font-size: clamp(1rem, 4.2vw, 1.18rem) !important;
    min-height: 3rem !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-player-top {
    grid-area: opponent !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-player-bottom {
    border-color: rgba(19, 149, 255, .75) !important;
    grid-area: you !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-player-inner {
    display: grid !important;
    gap: .42rem !important;
    grid-template-columns: minmax(0, 1fr) !important;
    padding: .55rem !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-player-top .tcg-player-inner {
    grid-template-rows: auto minmax(4.8rem, auto) !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-player-bottom .tcg-player-inner {
    grid-template-rows: auto minmax(5.25rem, auto) auto auto !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-player-head {
    align-items: center !important;
    display: grid !important;
    gap: .4rem !important;
    grid-template-columns: minmax(0, 1fr) 5.15rem !important;
    min-height: 2rem !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-player-head::before {
    content: none !important;
    display: none !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-player-top .tcg-player-head::before {
    content: none !important;
    display: none !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-player-head::after {
    display: none !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-player-inner::before,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-player-inner::after {
    content: none !important;
    display: none !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-player-name {
    appearance: none !important;
    background: rgba(1, 8, 20, .7) !important;
    border: 1px solid rgba(88, 143, 205, .3) !important;
    border-radius: 999px !important;
    color: #fff !important;
    display: block !important;
    font: 950 clamp(.82rem, 3.25vw, .98rem)/1 "Segoe UI", Arial, sans-serif !important;
    height: 2rem !important;
    min-width: 0 !important;
    overflow: hidden !important;
    padding: 0 .58rem !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    width: 100% !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-player-online-state {
    align-items: center !important;
    background: rgba(14, 76, 48, .68) !important;
    border: 1px solid rgba(55, 237, 140, .55) !important;
    border-radius: 999px !important;
    color: #c9ffe0 !important;
    display: inline-flex !important;
    font: 950 .62rem/1 "Segoe UI", Arial, sans-serif !important;
    gap: .25rem !important;
    justify-content: center !important;
    min-height: 1.52rem !important;
    overflow: hidden !important;
    padding: 0 .42rem !important;
    text-align: center !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-player-online-state::before {
    background: #34e584 !important;
    border-radius: 50% !important;
    box-shadow: 0 0 .4rem rgba(52, 229, 132, .8) !important;
    content: "" !important;
    display: inline-block !important;
    height: .42rem !important;
    width: .42rem !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-lp-display {
    align-items: center !important;
    background: radial-gradient(ellipse at center, rgba(132, 204, 255, .18), transparent 66%) !important;
    border: 0 !important;
    border-radius: .8rem !important;
    color: #fff !important;
    display: flex !important;
    font: 950 clamp(3.15rem, 15vw, 4.9rem)/.86 "Segoe UI", Arial, sans-serif !important;
    grid-column: 1 !important;
    grid-row: auto !important;
    justify-self: stretch !important;
    justify-content: center !important;
    min-height: 4.8rem !important;
    overflow: visible !important;
    padding: .08rem .25rem .2rem !important;
    text-align: center !important;
    text-shadow: 0 0 .62rem rgba(204, 235, 255, .86), 0 0 1.4rem rgba(32, 150, 255, .36) !important;
    width: 100% !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-player-head,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-quick-row,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-calc {
    grid-column: 1 !important;
    grid-row: auto !important;
    justify-self: stretch !important;
    width: 100% !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-player-bottom .tcg-quick-row {
    display: grid !important;
    gap: .38rem !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-player-bottom .tcg-calc {
    display: grid !important;
    gap: .38rem !important;
    grid-template-columns: minmax(0, 1fr) 3.25rem 3.25rem !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-player-bottom .tcg-calc [data-calc-action="clear"] {
    display: none !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-quick-row button,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-calc button,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-calc-input {
    min-height: 2.52rem !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-calc-input {
    cursor: text !important;
    justify-content: flex-start !important;
    text-align: left !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-quick-row button[data-lp-delta^="-"] {
    color: var(--duel-red) !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-quick-row button[data-lp-delta="100"],
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-quick-row button[data-lp-delta="500"],
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-quick-row button[data-lp-delta="1000"] {
    color: var(--duel-green) !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-history {
    display: grid !important;
    gap: .55rem !important;
    grid-area: history !important;
    grid-template-rows: auto minmax(18rem, auto) !important;
    min-height: 22rem !important;
    padding: .72rem !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-history summary {
    align-items: center !important;
    border-bottom: 1px solid rgba(70, 148, 255, .24) !important;
    cursor: default !important;
    display: grid !important;
    gap: .5rem !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    list-style: none !important;
    min-height: 2.45rem !important;
    padding: 0 0 .55rem !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-history summary::-webkit-details-marker {
    display: none !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-history summary > span:first-child {
    align-items: center !important;
    color: #e5f5ff !important;
    display: inline-flex !important;
    font: 950 1rem/1 "Segoe UI", Arial, sans-serif !important;
    gap: .4rem !important;
    min-width: 0 !important;
    text-transform: uppercase !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-history summary svg {
    height: 1.1rem !important;
    width: 1.1rem !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-history-actions {
    display: inline-grid !important;
    gap: .35rem !important;
    grid-template-columns: auto auto !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-history summary button {
    font-size: .78rem !important;
    min-height: 2.15rem !important;
    padding: 0 .52rem !important;
    width: auto !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-history ol {
    display: grid !important;
    gap: .5rem !important;
    grid-auto-rows: max-content !important;
    list-style: none !important;
    margin: 0 !important;
    min-height: 18rem !important;
    overflow: visible !important;
    padding: 0 !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-history li {
    background: linear-gradient(180deg, rgba(16, 28, 54, .94), rgba(7, 14, 30, .94)) !important;
    border: 1px solid rgba(90, 155, 255, .25) !important;
    border-left: .32rem solid var(--tcg-entry-color, #1495ff) !important;
    border-radius: .58rem !important;
    color: #fff !important;
    display: grid !important;
    gap: .18rem !important;
    min-height: 3.25rem !important;
    overflow: visible !important;
    padding: .56rem .68rem !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-history li span,
body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-history li time {
    color: #9fb2ce !important;
    display: block !important;
    font: 500 .78rem/1.2 "Segoe UI", Arial, sans-serif !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-history li strong {
    color: #f8fbff !important;
    display: block !important;
    font: 850 .92rem/1.28 "Segoe UI", Arial, sans-serif !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
}

body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-lp-pop {
    left: 50% !important;
    pointer-events: none !important;
    position: fixed !important;
    top: 48% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 9999 !important;
}

@media (max-width: 420px) {
    body.tcg-online-game-body .tcg-counter-page.is-online-game {
        padding-left: .35rem !important;
        padding-right: .35rem !important;
    }

    body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-online-game-head {
        grid-template-columns: 2.2rem minmax(0, 1fr) auto !important;
        padding: .42rem !important;
    }

    body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-online-crest {
        height: 2.1rem !important;
        width: 2.1rem !important;
    }

    body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-online-exit-game span {
        font-size: 0 !important;
    }

    body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-online-status-strip {
        grid-template-columns: minmax(6.9rem, .75fr) minmax(0, 1.25fr) !important;
    }

    body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-timer {
        grid-template-columns: minmax(6.9rem, .82fr) minmax(0, 1.48fr) !important;
    }

    body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-player-head {
        grid-template-columns: minmax(0, 1fr) 4.7rem !important;
    }

    body.tcg-online-game-body .tcg-counter-page.is-online-game .tcg-lp-display {
        font-size: clamp(3rem, 15vw, 4.45rem) !important;
    }
}

html.tcg-online-game-document:has(.tcg-counter-page.is-online-game),
body.tcg-online-game-body:has(.tcg-counter-page.is-online-game),
body.tcg-online-game-body:has(.tcg-counter-page.is-online-game) .public-main {
    bottom: auto !important;
    height: auto !important;
    left: auto !important;
    max-height: none !important;
    min-height: 100svh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    position: static !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
}

body.tcg-online-game-body:has(.tcg-counter-page.is-online-game) {
    width: 100% !important;
}

body.tcg-online-game-body:has(.tcg-counter-page.is-online-game) .public-main {
    display: block !important;
    padding: 0 !important;
}

body.tcg-online-game-body .tcg-lp-effect.tcg-lp-viewport-effect {
    align-items: center !important;
    border: 1px solid currentColor !important;
    border-radius: 999px !important;
    box-shadow: 0 0 1rem currentColor, inset 0 0 .7rem rgba(255, 255, 255, .08) !important;
    display: inline-flex !important;
    filter: drop-shadow(0 0 .45rem currentColor) !important;
    font: 950 clamp(2rem, 9.5vw, 3.25rem)/.9 "Segoe UI", Arial, sans-serif !important;
    font-variant-numeric: tabular-nums !important;
    height: auto !important;
    justify-content: center !important;
    max-height: none !important;
    max-width: none !important;
    min-height: 0 !important;
    min-width: max-content !important;
    overflow: visible !important;
    padding: .12em .34em .16em !important;
    pointer-events: none !important;
    position: fixed !important;
    text-align: center !important;
    white-space: nowrap !important;
    width: max-content !important;
    z-index: 2147483000 !important;
}

body.tcg-online-game-body .tcg-lp-effect.tcg-lp-viewport-effect.is-loss {
    background: rgba(91, 18, 29, .86) !important;
    color: #ff6677 !important;
}

body.tcg-online-game-body .tcg-lp-effect.tcg-lp-viewport-effect.is-gain {
    background: rgba(5, 78, 50, .86) !important;
    color: #39f29a !important;
}

body.tcg-online-game-body .tcg-confirm-overlay {
    align-items: center !important;
    bottom: 0 !important;
    display: flex !important;
    height: 100dvh !important;
    justify-content: center !important;
    left: 0 !important;
    min-height: 100svh !important;
    overflow: hidden !important;
    padding: max(1rem, env(safe-area-inset-top, 0px)) 1rem max(1rem, env(safe-area-inset-bottom, 0px)) !important;
    position: fixed !important;
    right: 0 !important;
    top: 0 !important;
    transform: none !important;
    width: 100vw !important;
    z-index: 2147482000 !important;
}

body.tcg-online-game-body .tcg-confirm-overlay.is-showing {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
}

body.tcg-online-game-body .tcg-confirm-card {
    margin: auto !important;
    max-height: calc(100dvh - 2rem) !important;
    max-width: min(28rem, calc(100vw - 2rem)) !important;
    overflow: auto !important;
    transform: none !important;
}

body.public-tcg-counter-body .tcg-event-overlay,
body.public-tcg-counter-body .tcg-confirm-overlay,
body.public-tcg-counter-body .tcg-log-overlay,
body.public-tcg-counter-body .tcg-mobile-keypad {
    align-items: center !important;
    bottom: 0 !important;
    display: flex !important;
    height: 100dvh !important;
    justify-content: center !important;
    left: 0 !important;
    max-height: none !important;
    min-height: 100svh !important;
    opacity: 0 !important;
    overflow: hidden !important;
    padding: max(.85rem, env(safe-area-inset-top, 0px)) .85rem max(.85rem, env(safe-area-inset-bottom, 0px)) !important;
    pointer-events: none !important;
    position: fixed !important;
    right: 0 !important;
    top: 0 !important;
    transform: none !important;
    visibility: hidden !important;
    width: 100vw !important;
    z-index: 2147482000 !important;
}

body.public-tcg-counter-body .tcg-event-overlay.is-showing,
body.public-tcg-counter-body .tcg-confirm-overlay.is-showing,
body.public-tcg-counter-body .tcg-log-overlay.is-showing,
body.public-tcg-counter-body .tcg-mobile-keypad.is-showing {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    visibility: visible !important;
}

body.public-tcg-counter-body .tcg-event-card,
body.public-tcg-counter-body .tcg-confirm-card,
body.public-tcg-counter-body .tcg-log-card,
body.public-tcg-counter-body .tcg-mobile-keypad-card {
    margin: auto !important;
    max-height: calc(100dvh - max(2rem, env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px) + 1.7rem)) !important;
    max-width: min(34rem, calc(100vw - 1.7rem)) !important;
    overflow: auto !important;
    transform: none !important;
}

body.public-tcg-counter-body .tcg-mobile-keypad {
    align-items: center !important;
}

body.public-tcg-counter-body .tcg-mobile-keypad-card {
    width: min(24rem, calc(100vw - 1.7rem)) !important;
}

body.public-tcg-counter-body .tcg-log-card {
    width: min(34rem, calc(100vw - 1.7rem)) !important;
}

body.public-tcg-counter-body .storefront-auth-modal.modal {
    align-items: center !important;
}

body.public-tcg-counter-body .storefront-auth-modal.show {
    display: flex !important;
}

body.public-tcg-counter-body .storefront-auth-modal .modal-dialog {
    margin: auto !important;
    max-height: calc(100dvh - 1.7rem) !important;
    max-width: min(28rem, calc(100vw - 1.7rem)) !important;
}

body.public-tcg-counter-body .storefront-auth-modal .modal-content {
    max-height: calc(100dvh - 1.7rem) !important;
    overflow: auto !important;
}