/* Saltanat 0.3.340 — tablet and desktop responsive shell. */

@media (min-width: 600px) {
  html {
    background-color: #07100e;
    background-image: var(--app-tile-image,url('./ui-backgrounds/desktop-tile.webp'));
    background-repeat: repeat;
    background-position: center top;
    background-size: var(--app-tile-size,160px) var(--app-tile-size,160px);
  }

  body.saltanat-app-page,
  body.online-page,
  body.offline-lobby-page,
  body.offline-game-page {
    padding: 12px;
    background-color: transparent !important;
    background-image: var(--app-tile-image,url('./ui-backgrounds/desktop-tile.webp')) !important;
    background-repeat: repeat !important;
    background-position: center top !important;
    background-size: 160px 160px !important;
    background-size: var(--app-tile-size,160px) var(--app-tile-size,160px) !important;
  }

  body.saltanat-app-page::before,
  body.online-page::before,
  body.offline-lobby-page::before,
  body.offline-game-page::before {
    content: "";
    position: fixed;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    background: rgba(1, 8, 7, .32);
  }


  /* The selected table art is a single non-repeating center surface.
     The carpet tile exists only on the browser canvas around that surface. */
  body.saltanat-app-page :is(.home-screen,.app-shell),
  body.online-page .shell,
  body.offline-lobby-page .shell,
  body.offline-game-page .shell {
    background-color: var(--table-fallback, #020807) !important;
    background-image: linear-gradient(rgba(0,22,16,.12),rgba(0,8,6,.24)), var(--table-art, none) !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: center, center !important;
    background-size: 100% 100%, cover !important;
  }

  body.saltanat-app-page .profile-screen {
    background-color: var(--table-fallback, #020807) !important;
    background-image: none !important;
    background-repeat: no-repeat !important;
  }

  body.saltanat-app-page .profile-screen::before,
  body.saltanat-app-page .shell-view::before {
    background-color: var(--table-fallback, #020807) !important;
    background-image: linear-gradient(rgba(0,22,16,.12),rgba(0,8,6,.24)), var(--table-art, none) !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: center, center !important;
    background-size: 100% 100%, cover !important;
  }

  body.saltanat-app-page .home-screen,
  body.saltanat-app-page .profile-screen,
  body.saltanat-app-page .shell-view,
  body.saltanat-app-page .app-shell {
    width: min(calc(100vw - 24px), 820px) !important;
    height: min(calc(100dvh - 24px), 1024px) !important;
    max-width: none !important;
    border-radius: 28px !important;
    box-shadow: 0 0 0 1px rgba(238, 196, 104, .14), 0 28px 90px rgba(0, 0, 0, .56) !important;
  }

  body.saltanat-app-page .home-dashboard,
  body.saltanat-app-page .profile-screen::before,
  body.saltanat-app-page .shell-view::before,
  body.saltanat-app-page .shell-view::after {
    border-radius: inherit;
  }

  body.saltanat-app-page .home-profile-header {
    padding: 18px 22px 10px !important;
  }

  body.saltanat-app-page .home-profile-card,
  body.saltanat-app-page .home-dashboard-scroll,
  body.saltanat-app-page .shell-view-scroll {
    width: 100%;
    max-width: 780px;
    margin-inline: auto;
  }

  body.saltanat-app-page .home-dashboard-scroll {
    padding: 0 22px 26px !important;
  }

  body.saltanat-app-page .home-brand-stage {
    min-height: 205px;
  }

  body.saltanat-app-page .home-brand-stage .home-logo-art {
    width: 210px !important;
    max-width: 34vw !important;
  }

  body.saltanat-app-page .home-brand-cards img {
    width: 82px;
    height: 115px;
  }

  body.saltanat-app-page .home-game-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  body.saltanat-app-page .home-game-card {
    min-height: 126px !important;
    grid-template-columns: 96px minmax(0, 1fr) 30px !important;
  }

  body.saltanat-app-page .home-progress-card,
  body.saltanat-app-page .home-utility-actions,
  body.saltanat-app-page .pwa-status,
  body.saltanat-app-page .home-version {
    grid-column: 1 / -1;
  }

  body.saltanat-app-page .home-bottom-nav,
  body.saltanat-app-page .shell-view .home-bottom-nav,
  body.saltanat-app-page .profile-persistent-nav {
    padding-inline: 18px !important;
    gap: 8px !important;
  }

  body.saltanat-app-page .home-bottom-nav :is(button, a),
  body.saltanat-app-page .shell-view .home-bottom-nav a {
    max-width: 150px;
    width: 100%;
    justify-self: center;
  }

  body.saltanat-app-page .shell-view-scroll {
    padding: 16px 22px 28px !important;
  }

  body.saltanat-app-page .shell-view-head {
    position: sticky;
    top: 0;
  }

  body.saltanat-app-page .profile-screen {
    padding: 0 !important;
  }

  body.saltanat-app-page .profile-screen > .profile-page-card {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    max-height: none !important;
    padding: 0 18px 26px !important;
  }

  body.saltanat-app-page .profile-page-head {
    margin-inline: 0 !important;
  }

  body.saltanat-app-page .profile-overview,
  body.saltanat-app-page .profile-section.profile-panel,
  body.saltanat-app-page .profile-page-actions {
    margin-inline: 0 !important;
  }

  body.saltanat-app-page .profile-card-theme-list,
  body.saltanat-app-page .profile-background-theme-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.online-page .shell,
  body.offline-lobby-page .shell,
  body.offline-game-page .shell {
    width: min(calc(100vw - 24px), 940px) !important;
    height: min(calc(100dvh - 24px), 1024px) !important;
    max-width: none !important;
    border-radius: 28px;
    padding: 10px !important;
    box-shadow: 0 0 0 1px rgba(238, 196, 104, .14), 0 28px 90px rgba(0, 0, 0, .58) !important;
  }

  body.online-page .shell:not(.game-active),
  body.offline-lobby-page .shell {
    grid-template-rows: 70px minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  body.online-page .shell:not(.game-active) > .top,
  body.offline-lobby-page .top {
    min-height: 70px;
    padding-inline: 16px !important;
    border-radius: 22px !important;
  }

  body.online-page .shell:not(.game-active) .brand-mark,
  body.offline-lobby-page .brand-mark {
    width: 50px !important;
    height: 50px !important;
  }

  body.online-page .shell:not(.game-active) .profile-pill,
  body.offline-lobby-page .profile-pill {
    height: 50px !important;
    max-width: 205px !important;
    padding-inline: 7px 12px !important;
  }

  body.online-page .shell:not(.game-active) .profile-pill .avatar,
  body.offline-lobby-page .profile-pill .avatar {
    width: 39px !important;
    height: 39px !important;
  }

  body.online-page .shell:not(.game-active) .icon-btn,
  body.offline-lobby-page .icon-btn {
    width: 50px !important;
    height: 50px !important;
  }

  body.online-page .screen,
  body.offline-lobby-page .screen,
  body.offline-game-page .screen {
    border-radius: 26px !important;
  }

  body.online-page #lobbyScreen.lobby,
  body.offline-lobby-page .lobby {
    grid-template-columns: minmax(250px, .78fr) minmax(410px, 1.35fr) !important;
    grid-template-areas:
      "profile match"
      "tools match" !important;
    align-content: center !important;
    align-items: stretch;
    gap: 14px !important;
    padding: 22px !important;
    overflow-y: auto;
  }

  body.online-page #lobbyScreen > .profile-card,
  body.offline-lobby-page .lobby > .profile-card {
    grid-area: profile;
    align-self: end;
  }

  body.online-page #lobbyScreen > .match-card,
  body.offline-lobby-page .lobby > .match-card {
    grid-area: match;
    align-self: center;
  }

  body.online-page #lobbyScreen > .lobby-tools-grid,
  body.offline-lobby-page .lobby > .tools {
    grid-area: tools;
    align-self: start;
  }

  body.online-page #lobbyScreen .profile-card,
  body.offline-lobby-page .profile-card {
    padding: 18px !important;
  }

  body.online-page #lobbyScreen .match-card,
  body.offline-lobby-page .match-card {
    padding: 22px 20px !important;
  }

  body.online-page #lobbyScreen .match-modes,
  body.offline-lobby-page .match-modes {
    gap: 10px;
  }

  body.online-page #lobbyScreen .match-mode,
  body.offline-lobby-page .match-mode {
    min-height: 76px;
  }

  body.online-page .auth-panel {
    max-width: 620px !important;
    padding-inline: 34px !important;
  }

  body.online-page .friend-room-stage,
  body.online-page .search-stage,
  body.online-page .found-stage {
    width: min(100%, 760px) !important;
    margin-inline: auto;
  }

  body.online-page #foundPlayers.found-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.online-page dialog,
  body.offline-lobby-page dialog,
  body.offline-game-page dialog,
  body.saltanat-app-page dialog {
    max-width: min(680px, calc(100vw - 48px));
  }

  body.online-page .shell.game-active,
  body.offline-game-page .shell.game-active {
    grid-template-rows: minmax(0, 1fr) !important;
    gap: 0 !important;
    padding: 10px !important;
  }

  body.online-page #gameScreen,
  body.offline-game-page #gameScreen {
    border-radius: 28px !important;
  }

  body.online-page #gameScreen .royal-scoreboard,
  body.offline-game-page #gameScreen .royal-scoreboard {
    top: 12px !important;
    width: min(390px, calc(100% - 180px)) !important;
  }

  body.online-page #gameScreen .game-tools {
    top: 14px !important;
    left: 16px !important;
    gap: 10px !important;
  }

  body.offline-game-page #gameScreen .offline-stop-btn {
    top: 15px !important;
    right: auto !important;
    left: 16px !important;
  }

  body.offline-game-page #gameScreen .offline-history-btn {
    top: 15px !important;
    right: 16px !important;
    left: auto !important;
  }

  body.online-page #gameScreen .seat-player.top,
  body.offline-game-page #gameScreen .seat-player.top {
    top: 138px !important;
  }

  body.online-page #gameScreen .seat-player.bottom,
  body.offline-game-page #gameScreen .seat-player.bottom {
    bottom: 18px !important;
  }

  body.online-page #gameScreen .seat-player.left,
  body.offline-game-page #gameScreen .seat-player.left {
    left: 30px !important;
    top: 50% !important;
  }

  body.online-page #gameScreen .seat-player.right,
  body.offline-game-page #gameScreen .seat-player.right {
    right: 30px !important;
    top: 50% !important;
  }

  body.online-page #gameScreen .player-info,
  body.offline-game-page #gameScreen .player-info {
    min-height: 60px !important;
    max-width: 205px !important;
    padding: 7px 12px !important;
  }

  body.online-page #gameScreen .player-info .avatar,
  body.offline-game-page #gameScreen .player-info .avatar {
    width: 48px !important;
    height: 48px !important;
  }

  body.online-page #gameScreen .player-info strong,
  body.offline-game-page #gameScreen .player-info strong {
    max-width: 112px !important;
    font-size: 12px !important;
  }

  body.online-page #gameScreen .player-info small,
  body.offline-game-page #gameScreen .player-info small {
    max-width: 112px !important;
    font-size: 10px !important;
  }

  body.online-page #gameScreen .hand-zone,
  body.offline-game-page #gameScreen .hand-zone {
    bottom: 72px !important;
    width: min(calc(100% - 150px), 720px) !important;
    max-width: 720px !important;
    height: 218px !important;
  }

  body.online-page #gameScreen .hand,
  body.offline-game-page #gameScreen .hand {
    width: 100% !important;
    max-width: 720px !important;
    height: 214px !important;
  }

  body.online-page #gameScreen .hand .playing-card,
  body.online-page #gameScreen .hand .playing-card:hover,
  body.online-page #gameScreen .hand .playing-card:focus,
  body.online-page #gameScreen .hand .playing-card:focus-visible,
  body.online-page #gameScreen .hand .playing-card:active,
  body.offline-game-page #gameScreen .hand .playing-card,
  body.offline-game-page #gameScreen .hand .playing-card:hover,
  body.offline-game-page #gameScreen .hand .playing-card:focus,
  body.offline-game-page #gameScreen .hand .playing-card:focus-visible,
  body.offline-game-page #gameScreen .hand .playing-card:active {
    width: 78px !important;
    height: 110px !important;
  }

  body.online-page #gameScreen.two-row-hand-active .hand-zone,
  body.offline-game-page #gameScreen.two-row-hand-active .hand-zone {
    height: 260px !important;
  }

  body.online-page #gameScreen.two-row-hand-active .hand,
  body.offline-game-page #gameScreen.two-row-hand-active .hand {
    height: 256px !important;
  }

  body.online-page #gameScreen .game-actions,
  body.online-page #gameScreen .game-actions.trump-actions,
  body.online-page #gameScreen .game-actions.choice-actions,
  body.offline-game-page #gameScreen .game-actions,
  body.offline-game-page #gameScreen .game-actions.trump-actions,
  body.offline-game-page #gameScreen .game-actions.choice-actions {
    bottom: 304px !important;
    width: min(760px, calc(100% - 170px)) !important;
  }

  body.online-page #gameScreen.two-row-hand-active .game-actions,
  body.online-page #gameScreen.two-row-hand-active .game-actions.trump-actions,
  body.online-page #gameScreen.two-row-hand-active .game-actions.choice-actions,
  body.offline-game-page #gameScreen.two-row-hand-active .game-actions,
  body.offline-game-page #gameScreen.two-row-hand-active .game-actions.trump-actions,
  body.offline-game-page #gameScreen.two-row-hand-active .game-actions.choice-actions {
    bottom: 342px !important;
  }

  body.online-page #gameScreen #trickLayer,
  body.offline-game-page #gameScreen #trickLayer {
    width: 270px !important;
    height: 250px !important;
    --center-card-width: 78px !important;
    --center-card-height: 109px !important;
  }

  body.online-page #gameScreen .played.top,
  body.offline-game-page #gameScreen .played.top {
    --trick-x: -10px;
    --trick-y: -52px;
  }

  body.online-page #gameScreen .played.right,
  body.offline-game-page #gameScreen .played.right {
    --trick-x: 58px;
    --trick-y: 4px;
  }

  body.online-page #gameScreen .played.bottom,
  body.offline-game-page #gameScreen .played.bottom {
    --trick-x: 8px;
    --trick-y: 57px;
  }

  body.online-page #gameScreen .played.left,
  body.offline-game-page #gameScreen .played.left {
    --trick-x: -62px;
    --trick-y: 8px;
  }
}

@media (min-width: 1024px) {
  body.saltanat-app-page,
  body.online-page,
  body.offline-lobby-page,
  body.offline-game-page {
    padding: 16px;
  }

  body.saltanat-app-page .home-screen,
  body.saltanat-app-page .profile-screen,
  body.saltanat-app-page .shell-view,
  body.saltanat-app-page .app-shell {
    width: min(calc(100vw - 32px), 1100px) !important;
    height: min(calc(100dvh - 32px), 920px) !important;
    border-radius: 32px !important;
  }

  body.saltanat-app-page .home-profile-card,
  body.saltanat-app-page .home-dashboard-scroll,
  body.saltanat-app-page .shell-view-scroll {
    max-width: 1020px;
  }

  body.saltanat-app-page .home-profile-header {
    padding-inline: 36px !important;
  }

  body.saltanat-app-page .home-dashboard-scroll {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    padding-inline: 36px !important;
  }

  body.saltanat-app-page .home-brand-stage {
    min-height: 225px;
  }

  body.saltanat-app-page .home-brand-stage .home-logo-art {
    width: 235px !important;
  }

  body.saltanat-app-page .home-game-card {
    min-height: 150px !important;
    grid-template-columns: 122px minmax(0, 1fr) 38px !important;
    padding: 16px 18px !important;
  }

  body.saltanat-app-page .home-game-art {
    width: 112px;
    height: 116px;
  }

  body.saltanat-app-page .game-art-card {
    width: 64px;
    height: 90px;
  }

  body.saltanat-app-page .game-art-emblem {
    width: 46px;
    height: 46px;
  }

  body.saltanat-app-page .home-game-copy small {
    font-size: 10px;
  }

  body.saltanat-app-page .home-game-copy strong {
    font-size: 24px;
  }

  body.saltanat-app-page .home-game-copy span {
    font-size: 11px;
    white-space: normal;
  }

  body.saltanat-app-page .home-progress-card {
    padding: 16px;
  }

  body.saltanat-app-page .home-utility-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.saltanat-app-page .settings-spa-screen .shell-view-scroll {
    display: grid;
    grid-template-columns: minmax(290px, .72fr) minmax(0, 1.35fr);
    grid-template-rows: auto auto;
    align-content: start;
    gap: 16px;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
  }

  body.saltanat-app-page .settings-spa-screen .shell-view-head {
    grid-column: 1 / -1;
  }

  body.saltanat-app-page .settings-spa-screen .settings-account-card {
    grid-column: 1;
    align-self: start;
    margin: 0;
  }

  body.saltanat-app-page .settings-spa-screen #settingsMount {
    grid-column: 2;
    padding: 0;
  }

  body.saltanat-app-page .friends-spa-screen .home-social-card {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  body.saltanat-app-page .friends-spa-screen .home-social-head,
  body.saltanat-app-page .friends-spa-screen .home-friend-search {
    grid-column: 1 / -1;
  }

  body.saltanat-app-page .friends-spa-screen #homeFriendSearchSection {
    grid-column: 1 / -1;
  }

  body.saltanat-app-page .profile-screen > .profile-page-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 14px;
    padding-inline: 28px !important;
  }

  body.saltanat-app-page .profile-page-head,
  body.saltanat-app-page .profile-overview,
  body.saltanat-app-page .profile-page-actions,
  body.saltanat-app-page .profile-scroll-end {
    grid-column: 1 / -1;
  }

  body.saltanat-app-page .profile-section.profile-panel {
    margin-top: 0 !important;
    align-self: start;
  }

  body.saltanat-app-page .profile-card-theme-list,
  body.saltanat-app-page .profile-background-theme-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.online-page .shell,
  body.offline-lobby-page .shell,
  body.offline-game-page .shell {
    width: min(calc(100vw - 32px), 1240px) !important;
    height: min(calc(100dvh - 32px), 920px) !important;
    border-radius: 32px;
    padding: 12px !important;
  }

  body.online-page #lobbyScreen.lobby,
  body.offline-lobby-page .lobby {
    grid-template-columns: minmax(300px, .72fr) minmax(500px, 1.45fr) !important;
    gap: 20px !important;
    padding: 32px !important;
  }

  body.online-page #lobbyScreen .match-card,
  body.offline-lobby-page .match-card {
    padding: 28px 26px !important;
  }

  body.online-page .friend-room-stage,
  body.online-page .search-stage,
  body.online-page .found-stage {
    width: min(100%, 900px) !important;
  }

  body.online-page #gameScreen .seat-player.top,
  body.offline-game-page #gameScreen .seat-player.top {
    top: 150px !important;
  }

  body.online-page #gameScreen .seat-player.left,
  body.offline-game-page #gameScreen .seat-player.left {
    left: 48px !important;
  }

  body.online-page #gameScreen .seat-player.right,
  body.offline-game-page #gameScreen .seat-player.right {
    right: 48px !important;
  }

  body.online-page #gameScreen .hand-zone,
  body.offline-game-page #gameScreen .hand-zone {
    width: min(calc(100% - 220px), 850px) !important;
    max-width: 850px !important;
    height: 236px !important;
  }

  body.online-page #gameScreen .hand,
  body.offline-game-page #gameScreen .hand {
    max-width: 850px !important;
    height: 232px !important;
  }

  body.online-page #gameScreen .hand .playing-card,
  body.online-page #gameScreen .hand .playing-card:hover,
  body.online-page #gameScreen .hand .playing-card:focus,
  body.online-page #gameScreen .hand .playing-card:focus-visible,
  body.online-page #gameScreen .hand .playing-card:active,
  body.offline-game-page #gameScreen .hand .playing-card,
  body.offline-game-page #gameScreen .hand .playing-card:hover,
  body.offline-game-page #gameScreen .hand .playing-card:focus,
  body.offline-game-page #gameScreen .hand .playing-card:focus-visible,
  body.offline-game-page #gameScreen .hand .playing-card:active {
    width: 86px !important;
    height: 121px !important;
  }

  body.online-page #gameScreen.two-row-hand-active .hand-zone,
  body.offline-game-page #gameScreen.two-row-hand-active .hand-zone {
    height: 280px !important;
  }

  body.online-page #gameScreen.two-row-hand-active .hand,
  body.offline-game-page #gameScreen.two-row-hand-active .hand {
    height: 276px !important;
  }

  body.online-page #gameScreen .game-actions,
  body.online-page #gameScreen .game-actions.trump-actions,
  body.online-page #gameScreen .game-actions.choice-actions,
  body.offline-game-page #gameScreen .game-actions,
  body.offline-game-page #gameScreen .game-actions.trump-actions,
  body.offline-game-page #gameScreen .game-actions.choice-actions {
    bottom: 324px !important;
    width: min(820px, calc(100% - 260px)) !important;
  }

  body.online-page #gameScreen.two-row-hand-active .game-actions,
  body.online-page #gameScreen.two-row-hand-active .game-actions.trump-actions,
  body.online-page #gameScreen.two-row-hand-active .game-actions.choice-actions,
  body.offline-game-page #gameScreen.two-row-hand-active .game-actions,
  body.offline-game-page #gameScreen.two-row-hand-active .game-actions.trump-actions,
  body.offline-game-page #gameScreen.two-row-hand-active .game-actions.choice-actions {
    bottom: 370px !important;
  }

  body.online-page #gameScreen #trickLayer,
  body.offline-game-page #gameScreen #trickLayer {
    width: 330px !important;
    height: 300px !important;
    --center-card-width: 86px !important;
    --center-card-height: 120px !important;
  }

  body.online-page #gameScreen .played.top,
  body.offline-game-page #gameScreen .played.top {
    --trick-x: -12px;
    --trick-y: -66px;
  }

  body.online-page #gameScreen .played.right,
  body.offline-game-page #gameScreen .played.right {
    --trick-x: 75px;
    --trick-y: 5px;
  }

  body.online-page #gameScreen .played.bottom,
  body.offline-game-page #gameScreen .played.bottom {
    --trick-x: 10px;
    --trick-y: 72px;
  }

  body.online-page #gameScreen .played.left,
  body.offline-game-page #gameScreen .played.left {
    --trick-x: -80px;
    --trick-y: 10px;
  }
}

@media (min-width: 600px) and (max-height: 820px) {
  body.online-page .shell,
  body.offline-lobby-page .shell,
  body.offline-game-page .shell,
  body.saltanat-app-page .home-screen,
  body.saltanat-app-page .profile-screen,
  body.saltanat-app-page .shell-view {
    height: calc(100dvh - 16px) !important;
  }

  body.online-page #gameScreen .hand-zone,
  body.offline-game-page #gameScreen .hand-zone {
    bottom: 58px !important;
    height: 190px !important;
  }

  body.online-page #gameScreen .hand,
  body.offline-game-page #gameScreen .hand {
    height: 186px !important;
  }

  body.online-page #gameScreen .hand .playing-card,
  body.online-page #gameScreen .hand .playing-card:hover,
  body.online-page #gameScreen .hand .playing-card:focus,
  body.online-page #gameScreen .hand .playing-card:focus-visible,
  body.online-page #gameScreen .hand .playing-card:active,
  body.offline-game-page #gameScreen .hand .playing-card,
  body.offline-game-page #gameScreen .hand .playing-card:hover,
  body.offline-game-page #gameScreen .hand .playing-card:focus,
  body.offline-game-page #gameScreen .hand .playing-card:focus-visible,
  body.offline-game-page #gameScreen .hand .playing-card:active {
    width: 70px !important;
    height: 98px !important;
  }

  body.online-page #gameScreen .game-actions,
  body.online-page #gameScreen .game-actions.trump-actions,
  body.online-page #gameScreen .game-actions.choice-actions,
  body.offline-game-page #gameScreen .game-actions,
  body.offline-game-page #gameScreen .game-actions.trump-actions,
  body.offline-game-page #gameScreen .game-actions.choice-actions {
    bottom: 264px !important;
  }

  body.online-page #gameScreen.two-row-hand-active .hand-zone,
  body.offline-game-page #gameScreen.two-row-hand-active .hand-zone {
    height: 224px !important;
  }

  body.online-page #gameScreen.two-row-hand-active .hand,
  body.offline-game-page #gameScreen.two-row-hand-active .hand {
    height: 220px !important;
  }

  body.online-page #gameScreen.two-row-hand-active .game-actions,
  body.online-page #gameScreen.two-row-hand-active .game-actions.trump-actions,
  body.online-page #gameScreen.two-row-hand-active .game-actions.choice-actions,
  body.offline-game-page #gameScreen.two-row-hand-active .game-actions,
  body.offline-game-page #gameScreen.two-row-hand-active .game-actions.trump-actions,
  body.offline-game-page #gameScreen.two-row-hand-active .game-actions.choice-actions {
    bottom: 300px !important;
  }

  body.online-page #gameScreen .seat-player.top,
  body.offline-game-page #gameScreen .seat-player.top {
    top: 122px !important;
  }

  body.online-page #gameScreen #trickLayer,
  body.offline-game-page #gameScreen #trickLayer {
    --center-card-width: 72px !important;
    --center-card-height: 101px !important;
  }
}


/* Saltanat 0.3.340 — desktop is a landscape table, not an enlarged tablet. */
@media (min-width: 1024px) {
  body.online-page,
  body.offline-game-page {
    min-height: 100dvh !important;
    display: grid !important;
    place-items: center !important;
    padding: 24px !important;
    overflow: hidden !important;
  }

  body.online-page .shell.game-active,
  body.offline-game-page .shell.game-active {
    width: min(calc(100vw - 48px), calc((100dvh - 48px) * 1.6), 1440px) !important;
    height: auto !important;
    max-height: calc(100dvh - 48px) !important;
    aspect-ratio: 16 / 10 !important;
    margin: auto !important;
    padding: 10px !important;
    border-radius: 32px !important;
    overflow: hidden !important;
  }

  body.online-page #gameScreen,
  body.offline-game-page #gameScreen {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    border-radius: 26px !important;
    overflow: hidden !important;
  }

  body.online-page #gameScreen .seat-player.left,
  body.offline-game-page #gameScreen .seat-player.left {
    left: 116px !important;
    top: 50% !important;
  }

  body.online-page #gameScreen .seat-player.right,
  body.offline-game-page #gameScreen .seat-player.right {
    right: 116px !important;
    top: 50% !important;
  }

  body.online-page #gameScreen .table-card-fan.left,
  body.offline-game-page #gameScreen .table-card-fan.left {
    left: 30px !important;
    right: auto !important;
  }

  body.online-page #gameScreen .table-card-fan.right,
  body.offline-game-page #gameScreen .table-card-fan.right {
    right: 30px !important;
    left: auto !important;
  }

  body.online-page #gameScreen .seat-player.top,
  body.offline-game-page #gameScreen .seat-player.top {
    top: 122px !important;
  }

  body.online-page #gameScreen .table-card-fan.top,
  body.offline-game-page #gameScreen .table-card-fan.top {
    top: 62px !important;
  }

  body.online-page #gameScreen .seat-player.bottom,
  body.offline-game-page #gameScreen .seat-player.bottom {
    bottom: 12px !important;
  }

  body.online-page #gameScreen .player-info,
  body.offline-game-page #gameScreen .player-info {
    min-height: 58px !important;
    max-width: 190px !important;
    padding: 6px 11px !important;
  }

  body.online-page #gameScreen .player-info .avatar,
  body.offline-game-page #gameScreen .player-info .avatar {
    width: 46px !important;
    height: 46px !important;
  }

  body.online-page #gameScreen .hand-zone,
  body.offline-game-page #gameScreen .hand-zone {
    bottom: 60px !important;
    width: min(calc(100% - 300px), 790px) !important;
    max-width: 790px !important;
    height: 190px !important;
  }

  body.online-page #gameScreen .hand,
  body.offline-game-page #gameScreen .hand {
    width: 100% !important;
    max-width: 790px !important;
    height: 186px !important;
  }

  body.online-page #gameScreen .hand .playing-card,
  body.online-page #gameScreen .hand .playing-card:hover,
  body.online-page #gameScreen .hand .playing-card:focus,
  body.online-page #gameScreen .hand .playing-card:focus-visible,
  body.online-page #gameScreen .hand .playing-card:active,
  body.offline-game-page #gameScreen .hand .playing-card,
  body.offline-game-page #gameScreen .hand .playing-card:hover,
  body.offline-game-page #gameScreen .hand .playing-card:focus,
  body.offline-game-page #gameScreen .hand .playing-card:focus-visible,
  body.offline-game-page #gameScreen .hand .playing-card:active {
    width: 72px !important;
    height: 102px !important;
  }

  body.online-page #gameScreen .game-actions,
  body.online-page #gameScreen .game-actions.trump-actions,
  body.online-page #gameScreen .game-actions.choice-actions,
  body.offline-game-page #gameScreen .game-actions,
  body.offline-game-page #gameScreen .game-actions.trump-actions,
  body.offline-game-page #gameScreen .game-actions.choice-actions {
    bottom: 252px !important;
    width: min(760px, calc(100% - 340px)) !important;
  }

  body.online-page #gameScreen #trickLayer,
  body.offline-game-page #gameScreen #trickLayer {
    width: 280px !important;
    height: 238px !important;
    --center-card-width: 76px !important;
    --center-card-height: 106px !important;
  }
}

/* Saltanat 0.3.340 — selected table art belongs only to an active match. */
@media (min-width: 600px) {
  body.saltanat-app-page :is(.home-screen,.profile-screen,.shell-view,.app-shell),
  body.online-page .shell:not(.game-active),
  body.offline-lobby-page .shell {
    background-color: rgba(2, 8, 7, .48) !important;
    background-image: none !important;
    background-repeat: no-repeat !important;
  }

  body.saltanat-app-page .profile-screen::before,
  body.saltanat-app-page .shell-view::before {
    background-color: transparent !important;
    background-image: none !important;
  }

  body.online-page .shell.game-active,
  body.offline-game-page .shell.game-active {
    padding: 12px !important;
    border: 1px solid rgba(224, 180, 83, .34) !important;
    background:
      linear-gradient(145deg, rgba(84, 55, 23, .98), rgba(20, 13, 8, .995) 42%, rgba(7, 8, 7, .995)) !important;
    box-shadow:
      0 46px 92px rgba(0, 0, 0, .74),
      0 18px 38px rgba(0, 0, 0, .58),
      0 0 0 8px rgba(15, 10, 6, .62),
      0 0 0 9px rgba(218, 169, 69, .12),
      inset 0 1px 0 rgba(255, 236, 179, .16),
      inset 0 -1px 0 rgba(0, 0, 0, .78) !important;
    overflow: visible !important;
  }

  body.online-page .shell.game-active::before,
  body.offline-game-page .shell.game-active::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 14px 5% -22px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .62);
    filter: blur(24px);
    pointer-events: none;
  }

  body.online-page .shell.game-active #gameScreen,
  body.offline-game-page .shell.game-active #gameScreen {
    border: 1px solid rgba(231, 193, 104, .24) !important;
    background-color: var(--table-fallback, #020807) !important;
    background-image:
      linear-gradient(rgba(0, 17, 13, .08), rgba(0, 6, 5, .18)),
      var(--table-art, none) !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: center, center !important;
    background-size: 100% 100%, cover !important;
    box-shadow:
      inset 0 0 0 1px rgba(255, 239, 191, .05),
      inset 0 0 42px rgba(0, 0, 0, .34) !important;
  }
}

@media (min-width: 1024px) {
  body.online-page .shell.game-active,
  body.offline-game-page .shell.game-active {
    overflow: visible !important;
  }
}

/* Saltanat 0.3.340 — tile-only app and lobby surfaces on every viewport. */
body.saltanat-app-page,
body.online-page,
body.offline-lobby-page,
body.offline-game-page {
  background-color: #07100e !important;
  background-image: linear-gradient(rgba(1,8,7,.32),rgba(1,8,7,.32)), var(--app-tile-image,url('./ui-backgrounds/desktop-tile.webp')) !important;
  background-repeat: repeat, repeat !important;
  background-position: center top, center top !important;
  background-size: auto, var(--app-tile-size,160px) var(--app-tile-size,160px) !important;
}

body.saltanat-app-page :is(.entry-auth-screen,.home-screen,.profile-screen,.app-shell,.shell-view),
body.online-page .shell:not(.game-active),
body.offline-lobby-page .shell {
  background-color: rgba(2, 8, 7, .48) !important;
  background-image: none !important;
}

body.saltanat-app-page .profile-screen::before,
body.saltanat-app-page .shell-view::before {
  background-color: transparent !important;
  background-image: none !important;
}

@media (max-width: 599px) {
  body.online-page .shell.game-active,
  body.offline-game-page .shell.game-active {
    background-color: var(--table-fallback, #020807) !important;
    background-image: var(--table-image, none) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 100% 100% !important;
  }
}


/* Saltanat 0.3.340 — centered table artwork, repeating carpet surround and responsive player anchors. */
body.online-page .shell.game-active #gameScreen,
body.offline-game-page .shell.game-active #gameScreen {
  background-color: var(--table-fallback, #020807) !important;
  background-image:
    linear-gradient(rgba(0, 10, 8, .10), rgba(0, 5, 4, .24)),
    var(--table-art, none),
    var(--app-tile-image,url('./ui-backgrounds/desktop-tile.webp')) !important;
  background-repeat: no-repeat, no-repeat, repeat !important;
  background-position: center, center, center top !important;
  background-size: 100% 100%, cover, var(--app-tile-size,160px) var(--app-tile-size,160px) !important;
}

@media (min-width: 600px) {
  body.online-page .shell.game-active #gameScreen,
  body.offline-game-page .shell.game-active #gameScreen {
    background-size: 100% 100%, clamp(520px, 68%, 780px) auto, var(--app-tile-size,160px) var(--app-tile-size,160px) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 239, 191, .06), inset 0 0 42px rgba(0, 0, 0, .34) !important;
  }

  body.online-page #gameScreen .seat-player,
  body.offline-game-page #gameScreen .seat-player {
    max-width: calc(100% - 28px) !important;
    z-index: 52 !important;
  }

  body.online-page #gameScreen .seat-player.left,
  body.offline-game-page #gameScreen .seat-player.left {
    left: clamp(18px, 4.5vw, 72px) !important;
    right: auto !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
  }

  body.online-page #gameScreen .seat-player.right,
  body.offline-game-page #gameScreen .seat-player.right {
    right: clamp(18px, 4.5vw, 72px) !important;
    left: auto !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
  }

  body.online-page #gameScreen .seat-player.top,
  body.offline-game-page #gameScreen .seat-player.top {
    left: 50% !important;
    right: auto !important;
    top: clamp(86px, 16%, 124px) !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
  }

  body.online-page #gameScreen .seat-player.bottom,
  body.offline-game-page #gameScreen .seat-player.bottom {
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: clamp(8px, 1.7%, 16px) !important;
    transform: translateX(-50%) !important;
  }

  body.online-page #gameScreen .player-info,
  body.offline-game-page #gameScreen .player-info {
    width: max-content !important;
    min-width: 0 !important;
    max-width: min(190px, 25vw) !important;
    overflow: visible !important;
  }

  body.online-page #gameScreen .player-info > div,
  body.offline-game-page #gameScreen .player-info > div {
    min-width: 0 !important;
  }

  body.online-page #gameScreen .player-info :is(strong, small),
  body.offline-game-page #gameScreen .player-info :is(strong, small) {
    max-width: clamp(72px, 11vw, 118px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

@media (min-width: 600px) and (max-height: 650px) {
  body.online-page #gameScreen .seat-player.top,
  body.offline-game-page #gameScreen .seat-player.top { top: 82px !important; }
  body.online-page #gameScreen .player-info,
  body.offline-game-page #gameScreen .player-info { min-height: 50px !important; padding: 4px 8px !important; }
  body.online-page #gameScreen .player-info .avatar,
  body.offline-game-page #gameScreen .player-info .avatar { width: 40px !important; height: 40px !important; }
}

/* Saltanat 0.3.340 — lock the complete table artwork to the exact center without cropping. */
body.online-page .shell.game-active #gameScreen,
body.offline-game-page .shell.game-active #gameScreen {
  background-color: #07100e !important;
  background-image:
    linear-gradient(rgba(0, 10, 8, .10), rgba(0, 5, 4, .24)),
    var(--table-art, none),
    var(--app-tile-image,url('./ui-backgrounds/desktop-tile.webp')) !important;
  background-repeat: no-repeat, no-repeat, repeat !important;
  background-position: center center, center center, center center !important;
  background-size: 100% 100%, auto 84%, var(--app-tile-size,160px) var(--app-tile-size,160px) !important;
  background-attachment: scroll, scroll, scroll !important;
}

@media (max-width: 599px) {
  body.online-page .shell.game-active,
  body.offline-game-page .shell.game-active {
    background-color: #07100e !important;
    background-image: var(--app-tile-image,url('./ui-backgrounds/desktop-tile.webp')) !important;
    background-repeat: repeat !important;
    background-position: center center !important;
    background-size: var(--app-tile-size,160px) var(--app-tile-size,160px) !important;
  }
}


/* Saltanat 0.3.340 — slightly smaller centered table art and stable desktop seat profiles. */
@media (min-width: 900px) {
  body.online-page #gameScreen .seat-player.left,
  body.offline-game-page #gameScreen .seat-player.left {
    left: clamp(28px, 5.2vw, 98px) !important;
    right: auto !important;
  }

  body.online-page #gameScreen .seat-player.right,
  body.offline-game-page #gameScreen .seat-player.right {
    right: clamp(28px, 5.2vw, 98px) !important;
    left: auto !important;
  }

  body.online-page #gameScreen .player-info,
  body.offline-game-page #gameScreen .player-info {
    min-height: 56px !important;
    max-width: 172px !important;
    padding: 6px 10px !important;
  }

  body.online-page #gameScreen .player-info .avatar,
  body.offline-game-page #gameScreen .player-info .avatar {
    width: 44px !important;
    height: 44px !important;
  }

  body.online-page #gameScreen .player-info :is(strong, small),
  body.offline-game-page #gameScreen .player-info :is(strong, small) {
    max-width: 92px !important;
  }

  body.online-page #gameScreen .seat-player.left .seat-card-stack,
  body.offline-game-page #gameScreen .seat-player.left .seat-card-stack,
  body.online-page #gameScreen .seat-player.right .seat-card-stack,
  body.offline-game-page #gameScreen .seat-player.right .seat-card-stack {
    top: 50% !important;
    width: 86px !important;
    height: 138px !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
  }

  body.online-page #gameScreen .seat-player.left .seat-card-stack,
  body.offline-game-page #gameScreen .seat-player.left .seat-card-stack {
    left: calc(100% + 10px) !important;
    right: auto !important;
  }

  body.online-page #gameScreen .seat-player.right .seat-card-stack,
  body.offline-game-page #gameScreen .seat-player.right .seat-card-stack {
    right: calc(100% + 10px) !important;
    left: auto !important;
  }

  body.online-page #gameScreen .seat-player.left .seat-card-stack img,
  body.offline-game-page #gameScreen .seat-player.left .seat-card-stack img,
  body.online-page #gameScreen .seat-player.right .seat-card-stack img,
  body.offline-game-page #gameScreen .seat-player.right .seat-card-stack img {
    top: 50% !important;
    width: 36px !important;
    height: 52px !important;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,.2)) !important;
  }

  body.online-page #gameScreen .seat-player.left .seat-card-stack img,
  body.offline-game-page #gameScreen .seat-player.left .seat-card-stack img {
    left: 0 !important;
    right: auto !important;
    transform: translateY(calc(-50% + (var(--back-index) - (var(--back-total) - 1)/2) * 6px)) rotate(calc((var(--back-index) - (var(--back-total) - 1)/2) * -2.8deg)) !important;
    transform-origin: 0 50% !important;
  }

  body.online-page #gameScreen .seat-player.right .seat-card-stack img,
  body.offline-game-page #gameScreen .seat-player.right .seat-card-stack img {
    right: 0 !important;
    left: auto !important;
    transform: translateY(calc(-50% + (var(--back-index) - (var(--back-total) - 1)/2) * 6px)) rotate(calc((var(--back-index) - (var(--back-total) - 1)/2) * 2.8deg)) !important;
    transform-origin: 100% 50% !important;
  }
}


/* Saltanat 0.3.340 — smaller shadowed table art and unified responsive player profiles. */
body.online-page .shell.game-active #gameScreen,
body.offline-game-page .shell.game-active #gameScreen{
  border-radius:24px!important;
  background-color:#07100e!important;
  background-image:linear-gradient(rgba(0,10,8,.10),rgba(0,5,4,.22)),var(--app-tile-image,url('./ui-backgrounds/desktop-tile.webp'))!important;
  background-repeat:no-repeat,repeat!important;
  background-position:center,center!important;
  background-size:100% 100%,var(--app-tile-size,160px) var(--app-tile-size,160px)!important;
}
body.online-page .shell.game-active #gameScreen::after,
body.offline-game-page .shell.game-active #gameScreen::after{
  content:''!important;
  position:absolute!important;
  z-index:0!important;
  left:50%!important;
  top:50%!important;
  width:86%!important;
  height:76%!important;
  transform:translate(-50%,-50%)!important;
  pointer-events:none!important;
  border-radius:24px!important;
  background:var(--table-art,none) center/contain no-repeat!important;
  filter:drop-shadow(0 30px 42px rgba(0,0,0,.88)) drop-shadow(0 0 30px rgba(0,0,0,.58))!important;
}

/* Keep avatar wrappers, portraits and decorative frames on one geometry. */
body.online-page #gameScreen .player-avatar-wrap,
body.offline-game-page #gameScreen .player-avatar-wrap{
  width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important;
}
body.online-page #gameScreen .player-avatar-wrap>.avatar,
body.offline-game-page #gameScreen .player-avatar-wrap>.avatar{
  width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;
}
body.online-page #gameScreen .player-info,
body.offline-game-page #gameScreen .player-info{
  min-width:0!important;min-height:50px!important;max-width:118px!important;
  padding:4px 7px!important;gap:6px!important;overflow:visible!important;
}
body.online-page #gameScreen .player-info>div,
body.offline-game-page #gameScreen .player-info>div{min-width:0!important}
body.online-page #gameScreen .player-info :is(strong,small),
body.offline-game-page #gameScreen .player-info :is(strong,small){max-width:58px!important}
body.online-page #gameScreen .seat-player.left,
body.offline-game-page #gameScreen .seat-player.left{
  left:clamp(54px,15vw,68px)!important;right:auto!important;top:50%!important;transform:translateY(-50%)!important;
}
body.online-page #gameScreen .seat-player.right,
body.offline-game-page #gameScreen .seat-player.right{
  right:clamp(54px,15vw,68px)!important;left:auto!important;top:50%!important;transform:translateY(-50%)!important;
}
body.online-page #gameScreen .seat-player.top,
body.offline-game-page #gameScreen .seat-player.top{
  top:clamp(132px,18vh,160px)!important;left:50%!important;right:auto!important;transform:translateX(-50%)!important;
}
body.online-page #gameScreen .seat-player.bottom,
body.offline-game-page #gameScreen .seat-player.bottom{
  bottom:max(7px,env(safe-area-inset-bottom))!important;left:50%!important;right:auto!important;transform:translateX(-50%)!important;
}
body.online-page #gameScreen .table-card-fan.left,
body.offline-game-page #gameScreen .table-card-fan.left,
body.online-page #gameScreen .table-card-fan.right,
body.offline-game-page #gameScreen .table-card-fan.right{
  top:50%!important;width:58px!important;height:158px!important;transform:translateY(-50%)!important;
}
body.online-page #gameScreen .table-card-fan.left,
body.offline-game-page #gameScreen .table-card-fan.left{left:0!important;right:auto!important}
body.online-page #gameScreen .table-card-fan.right,
body.offline-game-page #gameScreen .table-card-fan.right{right:0!important;left:auto!important}
body.online-page #gameScreen .table-card-fan.left img,
body.offline-game-page #gameScreen .table-card-fan.left img,
body.online-page #gameScreen .table-card-fan.right img,
body.offline-game-page #gameScreen .table-card-fan.right img{
  top:50%!important;width:48px!important;height:69px!important;
}
body.online-page #gameScreen .table-card-fan.left img,
body.offline-game-page #gameScreen .table-card-fan.left img{
  left:-24px!important;right:auto!important;transform-origin:-12px 50%!important;
}
body.online-page #gameScreen .table-card-fan.right img,
body.offline-game-page #gameScreen .table-card-fan.right img{
  right:-24px!important;left:auto!important;transform-origin:calc(100% + 12px) 50%!important;
}
body.online-page #gameScreen .table-card-fan.top,
body.offline-game-page #gameScreen .table-card-fan.top{top:58px!important}

@media(min-width:600px){
  body.online-page .shell.game-active #gameScreen::after,
  body.offline-game-page .shell.game-active #gameScreen::after{width:72%!important;height:76%!important}
  body.online-page #gameScreen .player-avatar-wrap,
  body.offline-game-page #gameScreen .player-avatar-wrap{width:46px!important;height:46px!important;min-width:46px!important;min-height:46px!important}
  body.online-page #gameScreen .player-avatar-wrap>.avatar,
  body.offline-game-page #gameScreen .player-avatar-wrap>.avatar{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important}
  body.online-page #gameScreen .player-info,
  body.offline-game-page #gameScreen .player-info{min-height:54px!important;max-width:156px!important;padding:5px 9px!important}
  body.online-page #gameScreen .player-info :is(strong,small),
  body.offline-game-page #gameScreen .player-info :is(strong,small){max-width:88px!important}
  body.online-page #gameScreen .seat-player.left,
  body.offline-game-page #gameScreen .seat-player.left{left:clamp(76px,9vw,104px)!important}
  body.online-page #gameScreen .seat-player.right,
  body.offline-game-page #gameScreen .seat-player.right{right:clamp(76px,9vw,104px)!important}
  body.online-page #gameScreen .seat-player.top,
  body.offline-game-page #gameScreen .seat-player.top{top:clamp(126px,17%,150px)!important}
  body.online-page #gameScreen .table-card-fan.left img,
  body.offline-game-page #gameScreen .table-card-fan.left img,
  body.online-page #gameScreen .table-card-fan.right img,
  body.offline-game-page #gameScreen .table-card-fan.right img{width:52px!important;height:75px!important}
  body.online-page #gameScreen .table-card-fan.top,
  body.offline-game-page #gameScreen .table-card-fan.top{top:54px!important}
}

@media(min-width:900px){
  body.online-page .shell.game-active #gameScreen::after,
  body.offline-game-page .shell.game-active #gameScreen::after{width:min(64%,760px)!important;height:76%!important}
  body.online-page #gameScreen .player-avatar-wrap,
  body.offline-game-page #gameScreen .player-avatar-wrap{width:50px!important;height:50px!important;min-width:50px!important;min-height:50px!important}
  body.online-page #gameScreen .player-avatar-wrap>.avatar,
  body.offline-game-page #gameScreen .player-avatar-wrap>.avatar{width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important}
  body.online-page #gameScreen .player-info,
  body.offline-game-page #gameScreen .player-info{min-height:58px!important;max-width:178px!important;padding:6px 10px!important}
  body.online-page #gameScreen .player-info :is(strong,small),
  body.offline-game-page #gameScreen .player-info :is(strong,small){max-width:100px!important}
  body.online-page #gameScreen .seat-player.left,
  body.offline-game-page #gameScreen .seat-player.left{left:clamp(108px,8vw,156px)!important}
  body.online-page #gameScreen .seat-player.right,
  body.offline-game-page #gameScreen .seat-player.right{right:clamp(108px,8vw,156px)!important}
  body.online-page #gameScreen .seat-player.top,
  body.offline-game-page #gameScreen .seat-player.top{top:clamp(122px,15%,142px)!important}
  body.online-page #gameScreen .table-card-fan.left,
  body.offline-game-page #gameScreen .table-card-fan.left{left:18px!important}
  body.online-page #gameScreen .table-card-fan.right,
  body.offline-game-page #gameScreen .table-card-fan.right{right:18px!important}
  body.online-page #gameScreen .table-card-fan.top,
  body.offline-game-page #gameScreen .table-card-fan.top{top:50px!important}
}

@media(min-width:600px) and (max-height:650px){
  body.online-page #gameScreen .seat-player.top,
  body.offline-game-page #gameScreen .seat-player.top{top:94px!important}
  body.online-page #gameScreen .table-card-fan.top,
  body.offline-game-page #gameScreen .table-card-fan.top{top:30px!important}
}


/* Saltanat 0.3.340 — mobile side profiles and rival trick counter stay 8px from the table edges. */
@media (max-width: 599px) {
  body.online-page #gameScreen .seat-player.left,
  body.offline-game-page #gameScreen .seat-player.left {
    left: 8px !important;
    right: auto !important;
  }

  body.online-page #gameScreen .seat-player.right,
  body.offline-game-page #gameScreen .seat-player.right {
    right: 8px !important;
    left: auto !important;
  }

  body.online-page #gameScreen .seat-player.right .team-trick-counter.rival,
  body.offline-game-page #gameScreen .seat-player.right .team-trick-counter.rival {
    right: 0 !important;
    left: auto !important;
    top: calc(100% + 6px) !important;
    transform: none !important;
  }
}


/* Saltanat 0.3.340 — restore the two-column profile layout on tablets/desktops and round the actual centered table artwork. */
body.online-page .shell.game-active #gameScreen,
body.offline-game-page .shell.game-active #gameScreen{
  border-radius:0!important;
}
body.online-page .shell.game-active #gameScreen::after,
body.offline-game-page .shell.game-active #gameScreen::after{
  width:auto!important;
  height:70%!important;
  aspect-ratio:941/1672!important;
  border-radius:24px!important;
  background:var(--table-art,none) center/100% 100% no-repeat!important;
  box-shadow:0 26px 54px rgba(0,0,0,.58),0 0 38px rgba(0,0,0,.34)!important;
  filter:drop-shadow(0 20px 34px rgba(0,0,0,.72))!important;
}
@media (min-width:768px){
  body.saltanat-app-page .profile-screen>.profile-page-card{
    padding:0 20px 30px!important;
  }
  body.saltanat-app-page .profile-section-stack{
    width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:14px!important;
    align-items:start!important;
    margin:0!important;
    padding:0!important;
    columns:auto!important;
  }
  body.saltanat-app-page .profile-section-stack>.profile-section.profile-panel{
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    break-inside:auto!important;
  }
}
@media (min-width:1024px){
  body.saltanat-app-page .profile-screen>.profile-page-card{
    padding-inline:28px!important;
  }
  body.saltanat-app-page .profile-section-stack{
    gap:16px!important;
  }
}


/* Saltanat 0.3.340 — normalize profile spacing and remove empty grid-row gaps on tablet/desktop. */
@media (min-width:768px){
  body.saltanat-app-page .profile-screen>.profile-page-card{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    align-content:start!important;
    row-gap:14px!important;
    padding:0 18px 28px!important;
  }
  body.saltanat-app-page .profile-page-head,
  body.saltanat-app-page .profile-overview,
  body.saltanat-app-page .profile-section-stack,
  body.saltanat-app-page .profile-page-actions,
  body.saltanat-app-page .profile-scroll-end{
    width:100%!important;
    min-width:0!important;
    margin-inline:0!important;
    box-sizing:border-box!important;
  }
  body.saltanat-app-page .profile-section-stack{
    display:block!important;
    columns:2!important;
    column-gap:14px!important;
    column-fill:balance!important;
    padding:0!important;
    margin:0!important;
  }
  body.saltanat-app-page .profile-section-stack>.profile-section.profile-panel{
    display:inline-grid!important;
    width:100%!important;
    min-width:0!important;
    margin:0 0 14px!important;
    padding:14px!important;
    vertical-align:top!important;
    break-inside:avoid-column!important;
    page-break-inside:avoid!important;
    box-sizing:border-box!important;
  }
  body.saltanat-app-page .profile-section-stack :is(
    .profile-avatar-list,
    .profile-frame-list,
    .profile-card-theme-list,
    .profile-background-theme-list,
    .profile-mission-list,
    .profile-achievement-list,
    .profile-mode-stats
  ){
    gap:10px!important;
  }
}
@media (min-width:1024px){
  body.saltanat-app-page .profile-screen>.profile-page-card{
    row-gap:16px!important;
    padding:0 24px 32px!important;
  }
  body.saltanat-app-page .profile-section-stack{
    column-gap:16px!important;
  }
  body.saltanat-app-page .profile-section-stack>.profile-section.profile-panel{
    margin-bottom:16px!important;
    padding:16px!important;
  }
}


/* Saltanat 0.3.340 — stack player identity below the portrait and conceal human-like bot automation state. */
body.online-page #gameScreen .player-info,
body.offline-game-page #gameScreen .player-info{
  min-width:72px!important;
  max-width:112px!important;
  min-height:0!important;
  padding:6px 7px 7px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:4px!important;
  border-radius:18px!important;
  text-align:center!important;
  overflow:visible!important;
}
body.online-page #gameScreen .player-info-copy,
body.offline-game-page #gameScreen .player-info-copy{
  width:100%!important;
  min-width:0!important;
  display:grid!important;
  justify-items:center!important;
  gap:2px!important;
  line-height:1.15!important;
}
body.online-page #gameScreen .player-info-copy>strong,
body.offline-game-page #gameScreen .player-info-copy>strong{
  display:block!important;
  width:100%!important;
  max-width:96px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  text-align:center!important;
  font-size:10px!important;
}
body.online-page #gameScreen .hakem-note,
body.offline-game-page #gameScreen .hakem-note{
  min-height:17px!important;
  padding:1px 5px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:3px!important;
  border:1px solid rgba(244,215,122,.42)!important;
  border-radius:999px!important;
  color:#f5d982!important;
  background:rgba(49,35,8,.72)!important;
  font-size:7px!important;
  font-weight:900!important;
  line-height:1!important;
  white-space:nowrap!important;
}
body.online-page #gameScreen .hakem-note :is(.ui-icon,.icon,svg),
body.offline-game-page #gameScreen .hakem-note :is(.ui-icon,.icon,svg){
  width:10px!important;
  height:10px!important;
}
body.online-page #gameScreen .hakem-crown-badge,
body.offline-game-page #gameScreen .hakem-crown-badge{
  display:none!important;
}
body.online-page #gameScreen .player-info.auto-playing .connection-note{
  display:none!important;
}
@media(max-width:599px){
  body.online-page #gameScreen .player-info,
  body.offline-game-page #gameScreen .player-info{
    min-width:66px!important;
    max-width:88px!important;
    padding:5px 5px 6px!important;
    gap:3px!important;
    border-radius:16px!important;
  }
  body.online-page #gameScreen .player-info-copy>strong,
  body.offline-game-page #gameScreen .player-info-copy>strong{
    max-width:76px!important;
    font-size:9px!important;
  }
}


/* Saltanat 0.3.340 — more breathing room between portrait and player name. */
body.online-page #gameScreen .player-info-copy,
body.offline-game-page #gameScreen .player-info-copy{margin-top:4px!important}
@media(max-width:599px){
  body.online-page #gameScreen .player-info-copy,
  body.offline-game-page #gameScreen .player-info-copy{margin-top:3px!important}
}


/* Saltanat 0.3.340 — keep responsive application shells vertically centered whenever they fit. */
@media (min-width:600px){
  html,body.saltanat-app-page,body.online-page,body.offline-lobby-page,body.offline-game-page{min-height:100dvh!important}
  body.saltanat-app-page,body.saltanat-app-page.shell-route-active,body.online-page,body.offline-lobby-page,body.offline-game-page{height:100dvh!important;display:grid!important;place-items:center!important;align-content:center!important;justify-content:center!important;padding:12px!important;overflow:hidden!important}
  body.saltanat-app-page.shell-route-active[data-shell-route="friends"],body.saltanat-app-page.shell-route-active[data-shell-route="settings"],body.saltanat-app-page.shell-route-active[data-shell-route="profile"],body.saltanat-app-page.settings-name-editing{place-items:center!important;align-content:center!important;justify-content:center!important}
  body.saltanat-app-page>:is(.home-screen,.profile-screen,.app-shell,.shell-view),body.online-page>.shell,body.offline-lobby-page>.shell,body.offline-game-page>.shell{margin:auto!important;align-self:center!important;justify-self:center!important}
}


/* Saltanat 0.3.340 — stable small-tablet layout from 600px through 800px. */
@media (min-width:600px) and (max-width:800px){
  body.saltanat-app-page,
  body.online-page,
  body.offline-lobby-page,
  body.offline-game-page{
    padding:8px!important;
  }

  body.saltanat-app-page>:is(.home-screen,.profile-screen,.app-shell,.shell-view),
  body.online-page>.shell,
  body.offline-lobby-page>.shell,
  body.offline-game-page>.shell{
    width:calc(100vw - 16px)!important;
    height:calc(100dvh - 16px)!important;
    max-width:none!important;
    max-height:none!important;
    border-radius:22px!important;
  }

  body.saltanat-app-page .home-profile-header{
    padding:14px 14px 8px!important;
  }
  body.saltanat-app-page .home-dashboard-scroll,
  body.saltanat-app-page .shell-view-scroll{
    max-width:none!important;
    padding-inline:14px!important;
  }
  body.saltanat-app-page .home-brand-stage{
    min-height:172px!important;
  }
  body.saltanat-app-page .home-brand-stage .home-logo-art{
    width:176px!important;
    max-width:32vw!important;
  }
  body.saltanat-app-page .home-game-actions{
    grid-template-columns:minmax(0,1fr)!important;
    gap:10px!important;
  }
  body.saltanat-app-page .home-game-card{
    min-height:112px!important;
    grid-template-columns:82px minmax(0,1fr) 28px!important;
    padding:12px 14px!important;
  }

  body.saltanat-app-page .profile-screen>.profile-page-card{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    row-gap:12px!important;
    padding:0 14px 24px!important;
  }
  body.saltanat-app-page .profile-section-stack{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    columns:auto!important;
    column-gap:0!important;
    row-gap:12px!important;
  }
  body.saltanat-app-page .profile-section-stack>.profile-section.profile-panel{
    display:grid!important;
    margin:0!important;
    break-inside:auto!important;
    page-break-inside:auto!important;
  }
  body.saltanat-app-page .profile-card-theme-list,
  body.saltanat-app-page .profile-background-theme-list{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  body.online-page .shell:not(.game-active),
  body.offline-lobby-page .shell{
    grid-template-rows:64px minmax(0,1fr)!important;
    gap:8px!important;
    padding:8px!important;
  }
  body.online-page .shell:not(.game-active)>.top,
  body.offline-lobby-page .top{
    min-height:64px!important;
    padding-inline:10px!important;
    border-radius:18px!important;
  }
  body.online-page #lobbyScreen.lobby,
  body.offline-lobby-page .lobby{
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-areas:"profile" "match" "tools"!important;
    align-content:start!important;
    align-items:stretch!important;
    gap:12px!important;
    padding:14px!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
  }
  body.online-page #lobbyScreen>.profile-card,
  body.online-page #lobbyScreen>.match-card,
  body.online-page #lobbyScreen>.lobby-tools-grid,
  body.offline-lobby-page .lobby>.profile-card,
  body.offline-lobby-page .lobby>.match-card,
  body.offline-lobby-page .lobby>.tools{
    width:100%!important;
    min-width:0!important;
    align-self:stretch!important;
  }
  body.online-page #lobbyScreen .match-card,
  body.offline-lobby-page .match-card{
    padding:18px 16px!important;
  }
  body.online-page #foundPlayers.found-list{
    grid-template-columns:minmax(0,1fr)!important;
  }
  body.online-page dialog,
  body.offline-lobby-page dialog,
  body.offline-game-page dialog,
  body.saltanat-app-page dialog{
    width:min(100%,calc(100vw - 24px))!important;
    max-width:calc(100vw - 24px)!important;
  }

  body.online-page .shell.game-active,
  body.offline-game-page .shell.game-active{
    padding:8px!important;
    border-radius:22px!important;
  }
  body.online-page .shell.game-active #gameScreen,
  body.offline-game-page .shell.game-active #gameScreen{
    border-radius:18px!important;
  }
  body.online-page #gameScreen .seat-player.top,
  body.offline-game-page #gameScreen .seat-player.top{
    top:108px!important;
  }
  body.online-page #gameScreen .seat-player.left,
  body.offline-game-page #gameScreen .seat-player.left{
    left:12px!important;
  }
  body.online-page #gameScreen .seat-player.right,
  body.offline-game-page #gameScreen .seat-player.right{
    right:12px!important;
  }
  body.online-page #gameScreen .player-info,
  body.offline-game-page #gameScreen .player-info{
    min-width:66px!important;
    max-width:92px!important;
    padding:5px 6px 6px!important;
  }
  body.online-page #gameScreen .player-info .avatar,
  body.offline-game-page #gameScreen .player-info .avatar{
    width:42px!important;
    height:42px!important;
  }
  body.online-page #gameScreen .hand-zone,
  body.offline-game-page #gameScreen .hand-zone{
    bottom:48px!important;
    width:calc(100% - 84px)!important;
    max-width:610px!important;
    height:188px!important;
  }
  body.online-page #gameScreen .hand,
  body.offline-game-page #gameScreen .hand{
    max-width:610px!important;
    height:184px!important;
  }
  body.online-page #gameScreen .hand .playing-card,
  body.online-page #gameScreen .hand .playing-card:hover,
  body.online-page #gameScreen .hand .playing-card:focus,
  body.online-page #gameScreen .hand .playing-card:focus-visible,
  body.online-page #gameScreen .hand .playing-card:active,
  body.offline-game-page #gameScreen .hand .playing-card,
  body.offline-game-page #gameScreen .hand .playing-card:hover,
  body.offline-game-page #gameScreen .hand .playing-card:focus,
  body.offline-game-page #gameScreen .hand .playing-card:focus-visible,
  body.offline-game-page #gameScreen .hand .playing-card:active{
    width:68px!important;
    height:96px!important;
  }
  body.online-page #gameScreen .game-actions,
  body.online-page #gameScreen .game-actions.trump-actions,
  body.online-page #gameScreen .game-actions.choice-actions,
  body.offline-game-page #gameScreen .game-actions,
  body.offline-game-page #gameScreen .game-actions.trump-actions,
  body.offline-game-page #gameScreen .game-actions.choice-actions{
    bottom:246px!important;
    width:calc(100% - 116px)!important;
    max-width:570px!important;
  }
  body.online-page #gameScreen #trickLayer,
  body.offline-game-page #gameScreen #trickLayer{
    width:230px!important;
    height:214px!important;
    --center-card-width:68px!important;
    --center-card-height:95px!important;
  }
}

@media (min-width:600px) and (max-width:800px) and (max-height:700px){
  body.online-page #gameScreen .seat-player.top,
  body.offline-game-page #gameScreen .seat-player.top{
    top:82px!important;
  }
  body.online-page #gameScreen .hand-zone,
  body.offline-game-page #gameScreen .hand-zone{
    bottom:24px!important;
    height:150px!important;
  }
  body.online-page #gameScreen .hand,
  body.offline-game-page #gameScreen .hand{
    height:146px!important;
  }
  body.online-page #gameScreen .hand .playing-card,
  body.online-page #gameScreen .hand .playing-card:hover,
  body.online-page #gameScreen .hand .playing-card:focus,
  body.online-page #gameScreen .hand .playing-card:focus-visible,
  body.online-page #gameScreen .hand .playing-card:active,
  body.offline-game-page #gameScreen .hand .playing-card,
  body.offline-game-page #gameScreen .hand .playing-card:hover,
  body.offline-game-page #gameScreen .hand .playing-card:focus,
  body.offline-game-page #gameScreen .hand .playing-card:focus-visible,
  body.offline-game-page #gameScreen .hand .playing-card:active{
    width:58px!important;
    height:82px!important;
  }
  body.online-page #gameScreen .game-actions,
  body.online-page #gameScreen .game-actions.trump-actions,
  body.online-page #gameScreen .game-actions.choice-actions,
  body.offline-game-page #gameScreen .game-actions,
  body.offline-game-page #gameScreen .game-actions.trump-actions,
  body.offline-game-page #gameScreen .game-actions.choice-actions{
    bottom:188px!important;
  }
  body.online-page #gameScreen #trickLayer,
  body.offline-game-page #gameScreen #trickLayer{
    width:204px!important;
    height:180px!important;
    --center-card-width:58px!important;
    --center-card-height:81px!important;
  }
}

/* Saltanat 0.3.340 — dedicated wide-phone layout from 430px through 599px. */
@media (min-width:430px) and (max-width:599px){
  html,
  body.saltanat-app-page,
  body.online-page,
  body.offline-lobby-page,
  body.offline-game-page{
    min-width:0!important;
    min-height:100dvh!important;
  }
  body.saltanat-app-page,
  body.saltanat-app-page.shell-route-active,
  body.online-page,
  body.offline-lobby-page,
  body.offline-game-page{
    width:100%!important;
    height:100dvh!important;
    padding:6px!important;
    display:grid!important;
    place-items:center!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }
  body.saltanat-app-page.settings-name-editing{
    place-items:start center!important;
    align-content:start!important;
  }
  body.saltanat-app-page>:is(.home-screen,.profile-screen,.app-shell,.shell-view),
  body.online-page>.shell,
  body.offline-lobby-page>.shell,
  body.offline-game-page>.shell{
    width:calc(100vw - 12px)!important;
    height:calc(100dvh - 12px)!important;
    max-width:none!important;
    max-height:none!important;
    min-width:0!important;
    margin:auto!important;
    border-radius:19px!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }

  body.saltanat-app-page .home-profile-header{padding:12px 12px 7px!important}
  body.saltanat-app-page .home-dashboard-scroll,
  body.saltanat-app-page .shell-view-scroll{max-width:none!important;padding-inline:12px!important}
  body.saltanat-app-page .home-brand-stage{min-height:148px!important}
  body.saltanat-app-page .home-brand-stage .home-logo-art{width:158px!important;max-width:36vw!important}
  body.saltanat-app-page .home-game-actions{grid-template-columns:minmax(0,1fr)!important;gap:9px!important}
  body.saltanat-app-page .home-game-card{min-height:104px!important;grid-template-columns:72px minmax(0,1fr) 26px!important;padding:11px 12px!important}

  body.saltanat-app-page .profile-screen>.profile-page-card{display:grid!important;grid-template-columns:minmax(0,1fr)!important;row-gap:10px!important;padding:0 10px 22px!important}
  body.saltanat-app-page .profile-section-stack{display:grid!important;grid-template-columns:minmax(0,1fr)!important;columns:auto!important;gap:10px!important}
  body.saltanat-app-page .profile-section-stack>.profile-section.profile-panel{display:grid!important;width:100%!important;margin:0!important;break-inside:auto!important}
  body.saltanat-app-page .profile-card-theme-list,
  body.saltanat-app-page .profile-background-theme-list{grid-template-columns:repeat(2,minmax(0,1fr))!important}

  body.online-page .shell:not(.game-active),
  body.offline-lobby-page .shell{grid-template-rows:58px minmax(0,1fr)!important;gap:6px!important;padding:6px!important}
  body.online-page .shell:not(.game-active)>.top,
  body.offline-lobby-page .top{min-height:58px!important;padding-inline:9px!important;border-radius:15px!important}
  body.online-page #lobbyScreen.lobby,
  body.offline-lobby-page .lobby{grid-template-columns:minmax(0,1fr)!important;grid-template-areas:"profile" "match" "tools"!important;align-content:start!important;align-items:stretch!important;gap:10px!important;padding:10px!important;overflow-x:hidden!important;overflow-y:auto!important}
  body.online-page #lobbyScreen>:is(.profile-card,.match-card,.lobby-tools-grid),
  body.offline-lobby-page .lobby>:is(.profile-card,.match-card,.tools){width:100%!important;min-width:0!important;max-width:none!important}
  body.online-page #lobbyScreen .match-card,
  body.offline-lobby-page .match-card{padding:15px 13px!important}
  body.online-page #foundPlayers.found-list{grid-template-columns:minmax(0,1fr)!important}
  body.online-page dialog,
  body.offline-lobby-page dialog,
  body.offline-game-page dialog,
  body.saltanat-app-page dialog{width:calc(100vw - 20px)!important;max-width:calc(100vw - 20px)!important}

  body.online-page .shell.game-active,
  body.offline-game-page .shell.game-active{padding:6px!important;border-radius:19px!important}
  body.online-page .shell.game-active #gameScreen,
  body.offline-game-page .shell.game-active #gameScreen{border-radius:16px!important}
  body.online-page #gameScreen .royal-scoreboard,
  body.offline-game-page #gameScreen .royal-scoreboard{width:min(260px,calc(100% - 104px))!important}
  body.online-page #gameScreen .seat-player.top,
  body.offline-game-page #gameScreen .seat-player.top{top:94px!important}
  body.online-page #gameScreen .seat-player.left,
  body.offline-game-page #gameScreen .seat-player.left{left:8px!important}
  body.online-page #gameScreen .seat-player.right,
  body.offline-game-page #gameScreen .seat-player.right{right:8px!important}
  body.online-page #gameScreen .player-info,
  body.offline-game-page #gameScreen .player-info{min-width:64px!important;max-width:84px!important;padding:5px!important}
  body.online-page #gameScreen .player-info .avatar,
  body.offline-game-page #gameScreen .player-info .avatar{width:40px!important;height:40px!important}
  body.online-page #gameScreen .hand-zone,
  body.offline-game-page #gameScreen .hand-zone{bottom:24px!important;width:calc(100% - 28px)!important;max-width:560px!important;height:158px!important}
  body.online-page #gameScreen .hand,
  body.offline-game-page #gameScreen .hand{max-width:560px!important;height:154px!important}
  body.online-page #gameScreen .hand .playing-card,
  body.online-page #gameScreen .hand .playing-card:hover,
  body.online-page #gameScreen .hand .playing-card:focus,
  body.online-page #gameScreen .hand .playing-card:active,
  body.offline-game-page #gameScreen .hand .playing-card,
  body.offline-game-page #gameScreen .hand .playing-card:hover,
  body.offline-game-page #gameScreen .hand .playing-card:focus,
  body.offline-game-page #gameScreen .hand .playing-card:active{width:59px!important;height:83px!important}
  body.online-page #gameScreen .game-actions,
  body.online-page #gameScreen .game-actions.trump-actions,
  body.online-page #gameScreen .game-actions.choice-actions,
  body.offline-game-page #gameScreen .game-actions,
  body.offline-game-page #gameScreen .game-actions.trump-actions,
  body.offline-game-page #gameScreen .game-actions.choice-actions{bottom:190px!important;width:calc(100% - 32px)!important;max-width:520px!important}
  body.online-page #gameScreen #trickLayer,
  body.offline-game-page #gameScreen #trickLayer{width:198px!important;height:182px!important;--center-card-width:59px!important;--center-card-height:83px!important}
}

@media (min-width:430px) and (max-width:599px) and (max-height:680px){
  body.online-page #gameScreen .seat-player.top,
  body.offline-game-page #gameScreen .seat-player.top{top:76px!important}
  body.online-page #gameScreen .hand-zone,
  body.offline-game-page #gameScreen .hand-zone{bottom:12px!important;height:136px!important}
  body.online-page #gameScreen .hand,
  body.offline-game-page #gameScreen .hand{height:132px!important}
  body.online-page #gameScreen .game-actions,
  body.online-page #gameScreen .game-actions.trump-actions,
  body.online-page #gameScreen .game-actions.choice-actions,
  body.offline-game-page #gameScreen .game-actions,
  body.offline-game-page #gameScreen .game-actions.trump-actions,
  body.offline-game-page #gameScreen .game-actions.choice-actions{bottom:158px!important}
  body.online-page #gameScreen #trickLayer,
  body.offline-game-page #gameScreen #trickLayer{width:180px!important;height:160px!important;--center-card-width:54px!important;--center-card-height:76px!important}
}

/* Saltanat 0.3.340 — hidden partner hand uses real card backs rather than an overlay. */
#gameScreen .hidden-hand-card{opacity:1!important;filter:none!important;pointer-events:none!important;cursor:default!important}

/* Saltanat 0.3.340 — scoreboard itself has no glass blur; only its inner score pieces remain styled. */
body.online-page #gameScreen .royal-scoreboard,
body.offline-game-page #gameScreen .royal-scoreboard{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}


/* Saltanat 0.3.340 — remove the 430px breakpoint collision and keep the home shell fitted. */
@media (min-width:430px) and (max-width:599px){
  body.saltanat-app-page > .home-screen{
    padding:0!important;
  }
  body.saltanat-app-page .home-dashboard{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    grid-template-rows:auto minmax(0,1fr) auto!important;
  }
  body.saltanat-app-page .home-profile-header{
    padding:8px 10px 5px!important;
  }
  body.saltanat-app-page .home-dashboard-scroll{
    min-height:0!important;
    padding:0 10px 10px!important;
  }
  body.saltanat-app-page .home-brand-stage{
    min-height:132px!important;
  }
  body.saltanat-app-page .home-brand-stage .home-logo-art{
    width:146px!important;
    max-width:34vw!important;
  }
  body.saltanat-app-page .home-game-card{
    min-height:96px!important;
    grid-template-columns:68px minmax(0,1fr) 26px!important;
    padding:8px 10px!important;
  }
  body.saltanat-app-page .home-game-art{
    width:66px!important;
    height:72px!important;
  }
  body.saltanat-app-page .game-art-card{
    width:42px!important;
    height:59px!important;
  }
  body.saltanat-app-page .game-art-emblem{
    width:32px!important;
    height:32px!important;
  }
  body.saltanat-app-page .home-bottom-nav{
    min-height:76px!important;
    padding-top:6px!important;
  }
  body.saltanat-app-page .home-bottom-nav :is(button,a){
    min-height:56px!important;
  }
}

/* Saltanat 0.3.340 — roomier hand fan and click-through self profile. */
body.online-page #gameScreen .seat-player.self-seat,
body.offline-game-page #gameScreen .seat-player.self-seat{
  pointer-events:none!important;
}
body.online-page #gameScreen .self-player-profile,
body.offline-game-page #gameScreen .self-player-profile{
  pointer-events:none!important;
  cursor:default!important;
}
@media (max-width:800px){
  body.online-page #gameScreen .hand-zone,
  body.offline-game-page #gameScreen .hand-zone{
    width:calc(100% - 8px)!important;
    max-width:600px!important;
  }
}

/* Saltanat 0.3.338 — preserve the native 5:7 card artwork ratio at every breakpoint. */
body.online-page #gameScreen .hand .playing-card picture,
body.offline-game-page #gameScreen .hand .playing-card picture{
  display:block!important;
  width:100%!important;
  height:auto!important;
  aspect-ratio:5/7!important;
  overflow:visible!important;
}
body.online-page #gameScreen .hand .playing-card img.card-face,
body.offline-game-page #gameScreen .hand .playing-card img.card-face{
  position:absolute!important;
  left:0!important;
  right:auto!important;
  top:auto!important;
  bottom:0!important;
  display:block!important;
  width:100%!important;
  height:auto!important;
  min-width:0!important;
  min-height:0!important;
  max-width:none!important;
  max-height:none!important;
  aspect-ratio:5/7!important;
  object-fit:contain!important;
  object-position:center bottom!important;
}
body.online-page #gameScreen .hand .playing-card.disabled::after,
body.offline-game-page #gameScreen .hand .playing-card.disabled::after{
  top:auto!important;
  bottom:0!important;
  width:100%!important;
  height:auto!important;
  aspect-ratio:5/7!important;
}
body.online-page #gameScreen #trickLayer .played img.card-face,
body.offline-game-page #gameScreen #trickLayer .played img.card-face,
body.online-page #gameScreen .seat-card-stack img,
body.offline-game-page #gameScreen .seat-card-stack img,
body.online-page #gameScreen .table-card-fan img,
body.offline-game-page #gameScreen .table-card-fan img{
  object-fit:contain!important;
  object-position:center!important;
}


/* Saltanat 0.3.340 — restore compact hand overlap and remove artificial card strokes. */
body.online-page #gameScreen :is(.table-card-fan,.seat-card-stack) img,
body.offline-game-page #gameScreen :is(.table-card-fan,.seat-card-stack) img,
.deal-flight-card.is-back img{
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
}
body.online-page #gameScreen .hand .playing-card,
body.offline-game-page #gameScreen .hand .playing-card,
html[data-performance="safari"] body.online-page #gameScreen .hand .playing-card,
html[data-performance="safari"] body.offline-game-page #gameScreen .hand .playing-card{
  border:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
}
body.online-page #gameScreen .hand .playing-card img.card-face,
body.offline-game-page #gameScreen .hand .playing-card img.card-face,
html[data-card-theme="dark"] body.online-page #gameScreen .hand .playing-card img.card-face,
html[data-card-theme="dark"] body.offline-game-page #gameScreen .hand .playing-card img.card-face{
  border:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
  filter:drop-shadow(0 3px 2px rgba(0,0,0,.22))!important;
  -webkit-filter:drop-shadow(0 3px 2px rgba(0,0,0,.22))!important;
}
html[data-performance="safari"] body.online-page #gameScreen .table-card-fan img,
html[data-performance="safari"] body.offline-game-page #gameScreen .table-card-fan img{
  border:0!important;
}