/* ClashFarm release UI layer.
   Loaded last so every current and future game page shares the same mobile
   viewport, tap targets, feedback states and narrow-screen safeguards. */

:root {
  --cf-viewport-height: 100vh;
  --cf-safe-top: env(safe-area-inset-top, 0px);
  --cf-safe-right: env(safe-area-inset-right, 0px);
  --cf-safe-bottom: env(safe-area-inset-bottom, 0px);
  --cf-safe-left: env(safe-area-inset-left, 0px);
  --cf-tap-size: 42px;
  --cf-panel-border: rgba(255, 222, 139, .42);
  --cf-panel-bg: rgba(8, 23, 16, .86);
  --cf-panel-text: #fff2cc;
}

@supports (height: 100dvh) {
  :root { --cf-viewport-height: 100dvh; }
}

html {
  min-width: 0;
  min-height: 100%;
  overflow-x: hidden;
  overflow-x: clip;
  background: #050806;
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-width: none;
  overscroll-behavior: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
body *::-webkit-scrollbar,
.cf-social-content::-webkit-scrollbar,
.cf-achievements-scroll::-webkit-scrollbar,
.cf-newcomer-scroll::-webkit-scrollbar,
.cf-dragon-scroll::-webkit-scrollbar,
.cf-ranking-scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

body,
#root {
  min-width: 0;
  min-height: var(--cf-viewport-height);
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  margin: 0;
  -webkit-tap-highlight-color: transparent;
}

#root {
  isolation: isolate;
}

button,
input,
select,
textarea {
  max-width: 100%;
  font-family: inherit;
}

button,
[role="button"] {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(255, 226, 117, .92);
  outline-offset: 2px;
}

img {
  max-width: 100%;
  -webkit-user-drag: none;
}

/* Prevent a previously rendered icon from flashing while React changes src. */
img.cf-image-pending:not(.cf-item-image),
img.cf-image-error:not(.cf-item-image) {
  opacity: 0 !important;
}

/* Item art is delivered by the API and may be replaced after a card is
   rendered. Never turn a delayed item request into an invisible slot. */
img.cf-item-image.cf-image-pending,
img.cf-item-image.cf-image-error {
  opacity: 1 !important;
}

img.cf-image-ready {
  opacity: 1;
  transition: opacity .12s ease-out;
}

.main-menu-root,
.register-root,
.loading-root,
.garden-root,
.profile-page,
.training-page,
.inventory-page,
.shop-page,
.village-page,
.druid-page,
.witch-page,
.blacksmith-page,
.monk-page,
.petstore-page,
.petprofile-page,
.pettraining-page,
.petstats-page,
.petsettings-page,
.guard-page,
.travel-page,
.mine-page,
.playersettings-page,
.merchant-page,
.home-page,
.market-page,
.clan-page,
.arena-page,
.stats-page,
.play-page {
  box-sizing: border-box;
  width: 100%;
  max-width: 100vw;
  min-width: 0;
  min-height: var(--cf-viewport-height);
  overflow-x: hidden;
  overflow-x: clip;
}

.main-menu-page,
.register-screen,
.loading-screen,
.garden-screen,
.profile-frame,
.training-frame,
.inventory-frame,
.shop-frame,
.village-frame,
.druid-frame,
.witch-frame,
.blacksmith-frame,
.monk-frame,
.petstore-frame,
.petprofile-frame,
.pettraining-frame,
.petstats-frame,
.petsettings-frame,
.guard-frame,
.travel-frame,
.mine-frame,
.playersettings-frame,
.merchant-frame,
.home-frame,
.market-frame,
.clan-frame,
.arena-frame,
.stats-frame,
.mobile-game-frame {
  box-sizing: border-box;
  width: min(100%, var(--game-shell-width, 430px));
  max-width: min(100vw, var(--game-shell-width, 430px));
  min-width: 0;
  min-height: var(--cf-viewport-height);
  margin-inline: auto;
}

.main-menu-page,
.register-screen,
.loading-screen,
.shop-frame,
.blacksmith-frame,
.training-frame,
.mine-frame,
.witch-frame,
.market-frame,
.village-frame,
.clan-frame,
.petstore-frame,
.travel-frame,
.guard-frame,
.petsettings-frame,
.druid-frame,
.home-frame,
.monk-frame,
.merchant-frame,
.playersettings-frame,
.petprofile-frame {
  height: var(--cf-viewport-height);
  max-height: var(--cf-viewport-height);
}

:is(
  .main-menu-root,
  .register-root,
  .loading-root,
  .garden-root,
  .shop-page,
  .village-page,
  .druid-page,
  .witch-page,
  .blacksmith-page,
  .monk-page,
  .petstore-page,
  .petprofile-page,
  .training-page,
  .petsettings-page,
  .guard-page,
  .travel-page,
  .mine-page,
  .playersettings-page,
  .merchant-page,
  .home-page,
  .market-page,
  .clan-page,
  .inventory-page
) {
  height: var(--cf-viewport-height);
  min-height: var(--cf-viewport-height);
  max-height: var(--cf-viewport-height);
  overflow: hidden;
}

/*
 * Mobile scrolling model
 * ----------------------
 * The player HUD can wrap to an extra row (notices, narrow translations and
 * compact iPhones all change its real height).  The original pages subtracted
 * a fixed 96/146px from 100vh, so their scroll surface could extend below the
 * clipped frame.  Let flexbox measure the real HUD and give the exact remaining
 * visual viewport to the page content instead.
 */
:is(
  .shop-frame,
  .village-frame,
  .druid-frame,
  .witch-frame,
  .blacksmith-frame,
  .monk-frame,
  .petstore-frame,
  .petprofile-frame,
  .training-frame,
  .petsettings-frame,
  .guard-frame,
  .travel-frame,
  .mine-frame,
  .playersettings-frame,
  .merchant-frame,
  .home-frame,
  .market-frame,
  .clan-frame,
  .inventory-frame
) {
  display: flex;
  flex-direction: column;
  height: var(--cf-viewport-height);
  min-height: 0;
  max-height: var(--cf-viewport-height);
}

:is(
  .shop-frame,
  .village-frame,
  .druid-frame,
  .witch-frame,
  .blacksmith-frame,
  .monk-frame,
  .petstore-frame,
  .petprofile-frame,
  .training-frame,
  .petsettings-frame,
  .guard-frame,
  .travel-frame,
  .mine-frame,
  .playersettings-frame,
  .merchant-frame,
  .home-frame,
  .market-frame,
  .clan-frame,
  .inventory-frame
) > .compact-player-panel {
  flex: 0 0 auto;
}

:is(
  .shop-content,
  .village-content,
  .druid-content,
  .witch-content,
  .blacksmith-content,
  .monk-content,
  .petstore-content,
  .petprofile-content,
  .training-content,
  .petsettings-content,
  .guard-content,
  .travel-content,
  .mine-content,
  .playersettings-content,
  .merchant-content,
  .home-content,
  .market-content,
  .clan-content,
  .inventory-content
) {
  flex: 1 1 0;
  height: auto;
  min-height: 0;
  max-height: none;
}

/* Pages whose list is the content node itself. */
:is(
  .druid-content,
  .witch-content,
  .blacksmith-content,
  .monk-content,
  .petstore-content,
  .petprofile-content,
  .training-content,
  .petsettings-content,
  .guard-content,
  .travel-content,
  .mine-content,
  .playersettings-content,
  .merchant-content,
  .home-content,
  .clan-content
) {
  overflow-x: hidden;
  overflow-y: auto;
}

.inventory-content {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.inventory-scroll {
  flex: 1 1 0;
  height: auto;
  min-height: 0;
  max-height: none;
}

/* Natural-height pages keep one explicit scroll owner as well. */
:is(.garden-screen, .profile-page, .stats-page, .petstats-page, .arena-page) {
  height: var(--cf-viewport-height);
  min-height: 0;
  max-height: var(--cf-viewport-height);
  overflow-x: hidden;
  overflow-y: auto;
}

:is(.profile-page, .stats-page, .petstats-page) {
  align-items: flex-start;
}

:is(.profile-frame, .stats-frame, .petstats-frame, .arena-frame) {
  min-height: 100%;
}

/* The safe area belongs inside the scrollable box, never below its clipping
   parent.  This keeps the last control above the iPhone home indicator. */
:is(
  .shop-content,
  .village-content,
  .druid-content,
  .witch-content,
  .blacksmith-content,
  .monk-content,
  .petstore-content,
  .guard-content,
  .travel-content,
  .mine-content,
  .merchant-content,
  .home-content
) {
  padding-bottom: calc(118px + var(--cf-safe-bottom));
}

.market-content {
  padding-bottom: calc(110px + var(--cf-safe-bottom));
}

:is(.petprofile-content, .training-content, .petsettings-content) {
  padding-bottom: calc(24px + var(--cf-safe-bottom));
}

.playersettings-content {
  padding-bottom: calc(28px + var(--cf-safe-bottom));
}

.clan-content {
  padding-bottom: calc(16px + var(--cf-safe-bottom));
}

.inventory-scroll {
  padding-bottom: calc(80px + var(--cf-safe-bottom));
}

:is(.profile-content, .stats-content, .petstats-content, .arena-content) {
  padding-bottom: calc(28px + var(--cf-safe-bottom));
}

.garden-screen {
  padding-bottom: calc(14px + var(--cf-safe-bottom));
}

:is(
  .shop-categories,
  .shop-scroll-view,
  .village-list,
  .market-scroll,
  .inventory-scroll,
  .druid-content,
  .witch-content,
  .blacksmith-content,
  .monk-content,
  .petstore-content,
  .petprofile-content,
  .training-content,
  .petsettings-content,
  .guard-content,
  .travel-content,
  .mine-content,
  .playersettings-content,
  .merchant-content,
  .home-content,
  .clan-content,
  .clan-chat-box,
  .mail-sections,
  .mail-events,
  .mail-compose,
  .mail-chat-messages,
  .mail-news-details,
  .mail-arena-detail-screen,
  .plant-select-list,
  .market-details-panel,
  .arena-detail-modal,
  .cf-social-content,
  .cf-achievements-scroll,
  .cf-newcomer-scroll,
  .cf-daily-scroll,
  .cf-dragon-scroll,
  .cf-ranking-scroll,
  .garden-screen,
  .profile-page,
  .stats-page,
  .petstats-page,
  .arena-page
) {
  min-height: 0;
  scrollbar-width: none;
  overscroll-behavior-x: none;
  overscroll-behavior-y: contain;
  scroll-padding-bottom: max(16px, var(--cf-safe-bottom));
  touch-action: pan-y pinch-zoom;
  -webkit-overflow-scrolling: touch;
}

.mail-panel {
  height: min(720px, calc(var(--cf-viewport-height) - var(--cf-safe-top) - var(--cf-safe-bottom) - 28px));
  max-height: calc(var(--cf-viewport-height) - var(--cf-safe-top) - var(--cf-safe-bottom) - 28px);
}

:is(
  .mail-sections,
  .mail-events,
  .mail-compose,
  .mail-chat,
  .mail-news-details,
  .mail-arena-detail-screen
) {
  flex: 1 1 0;
  height: auto;
  min-height: 0;
  max-height: none;
}

.plant-select-modal {
  display: flex;
  flex-direction: column;
  height: auto;
  max-height: calc(var(--cf-viewport-height) - var(--cf-safe-top) - var(--cf-safe-bottom) - 28px);
}

.plant-select-list {
  flex: 0 1 auto;
  min-height: 0;
  max-height: calc(78vh - 62px);
  overflow-y: auto;
}

:is(
  .settings-panel,
  .shop-modal,
  .profile-modal,
  .inventory-details-panel,
  .inventory-sell-panel,
  .garden-confirm-modal,
  .training-confirm-modal,
  .druid-confirm-modal,
  .witch-confirm-modal,
  .blacksmith-confirm-modal,
  .home-confirm-modal,
  .guard-confirm-modal,
  .travel-confirm-modal,
  .mine-confirm-modal,
  .merchant-confirm-modal,
  .petstore-confirm-modal,
  .petprofile-revive-modal,
  .clan-confirm-modal,
  .market-details-panel,
  .arena-detail-modal
) {
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  overscroll-behavior: contain;
  touch-action: pan-y pinch-zoom;
  -webkit-overflow-scrolling: touch;
}

.shop-content,
.blacksmith-content,
.profile-content,
.training-content,
.mine-content,
.witch-content,
.market-content,
.petstats-content,
.village-content,
.clan-content,
.petstore-content,
.travel-content,
.guard-content,
.petsettings-content,
.druid-content,
.home-content,
.monk-content,
.merchant-content,
.stats-content,
.playersettings-content,
.inventory-content,
.petprofile-content,
.arena-content,
.mail-sections,
.mail-events,
.mail-compose,
.cf-social-content,
  .cf-achievements-scroll,
.cf-newcomer-scroll,
.cf-dragon-scroll,
.cf-ranking-scroll {
  min-width: 0;
  scrollbar-width: none;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  overflow-anchor: auto;
}

:is(
  .shop-card,
  .blacksmith-card,
  .clan-card,
  .clan-member-card,
  .druid-card,
  .home-card,
  .inventory-item,
  .market-lot,
  .merchant-card,
  .petstore-card,
  .village-card,
  .witch-card,
  .arena-section,
  .arena-history-card,
  .stats-row,
  .petstats-row,
  .mail-event,
  .mail-dialog,
  .cf-social-list-card,
  .cf-achievement-card,
  .cf-newcomer-step,
  .cf-ranking-row
) {
  min-width: 0;
  overflow-wrap: anywhere;
}

:is(
  [class$="-main"],
  [class$="-copy"],
  [class$="-info"],
  [class$="-text"],
  [class$="-title-box"],
  [class$="-title-block"]
) {
  min-width: 0;
}

:is(
  [class$="-title"],
  [class$="-subtitle"],
  [class$="-desc"],
  [class$="-description"],
  [class$="-message"],
  [class$="-hint"]
) {
  overflow-wrap: anywhere;
}

/* One recognizable back action on every full page. */
:is(
  .garden-back-button,
  .profile-back-button,
  .training-back-btn,
  .inventory-back-button,
  .shop-back,
  .village-back-button,
  .druid-back-button,
  .witch-back-button,
  .blacksmith-back-button,
  .monk-back-button,
  .petstore-back-button,
  .petprofile-back-button,
  .pettraining-back-button,
  .petstats-back-button,
  .petsettings-back-button,
  .guard-back-button,
  .travel-back-button,
  .mine-back-button,
  .playersettings-back-button,
  .merchant-back-button,
  .home-back-button,
  .market-back-button,
  .clan-back-button,
  .arena-back-button,
  .stats-back-button
) {
  box-sizing: border-box;
  min-width: 72px;
  min-height: 40px;
  height: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border: 1px solid rgba(255, 225, 151, .52);
  border-radius: 12px;
  color: #fff4d1;
  background: linear-gradient(#7d5528, #3e260f);
  box-shadow: inset 0 1px rgba(255, 255, 255, .13), 0 3px rgba(0, 0, 0, .28);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
  white-space: normal;
}

:is(
  .garden-back-button,
  .profile-back-button,
  .training-back-btn,
  .inventory-back-button,
  .shop-back,
  .village-back-button,
  .druid-back-button,
  .witch-back-button,
  .blacksmith-back-button,
  .monk-back-button,
  .petstore-back-button,
  .petprofile-back-button,
  .pettraining-back-button,
  .petstats-back-button,
  .petsettings-back-button,
  .guard-back-button,
  .travel-back-button,
  .mine-back-button,
  .playersettings-back-button,
  .merchant-back-button,
  .home-back-button,
  .market-back-button,
  .clan-back-button,
  .arena-back-button,
  .stats-back-button
):active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: inset 0 1px rgba(255, 255, 255, .1), 0 1px rgba(0, 0, 0, .3);
}

/* Shared feedback language: loading, empty and error states keep their space. */
:is(
  .arena-loading,
  .blacksmith-loading,
  .clan-loading,
  .druid-loading,
  .garden-loading,
  .home-loading,
  .inventory-loading,
  .market-loading,
  .merchant-loading,
  .monk-loading,
  .petstats-loading,
  .shop-loading,
  .stats-loading,
  .witch-loading,
  .cf-social-loading,
  .cf-achievements-loading,
  .cf-newcomer-loading,
  .cf-dragon-loading
) {
  box-sizing: border-box;
  min-height: 72px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 9px;
  margin-block: 10px;
  padding: 14px;
  border: 1px solid var(--cf-panel-border);
  border-radius: 14px;
  color: var(--cf-panel-text);
  background: var(--cf-panel-bg);
  text-align: center;
  line-height: 1.35;
}

:is(
  .arena-empty,
  .arena-pet-empty,
  .blacksmith-empty,
  .clan-empty,
  .druid-empty,
  .inventory-empty,
  .mail-empty,
  .market-empty,
  .market-bid-history-empty,
  .merchant-empty,
  .witch-empty,
  .cf-social-empty
) {
  box-sizing: border-box;
  min-height: 58px;
  display: grid;
  place-items: center;
  margin-block: 8px;
  padding: 13px;
  border: 1px dashed rgba(255, 222, 139, .3);
  border-radius: 13px;
  color: rgba(255, 242, 204, .82);
  background: rgba(8, 23, 16, .55);
  text-align: center;
  line-height: 1.35;
}

:is(
  .login-error,
  .inventory-error,
  .market-error,
  .cf-dragon-error,
  .cf-ranking-message.error,
  .cf-achievements-status.is-error
) {
  box-sizing: border-box;
  overflow-wrap: anywhere;
  border: 1px solid rgba(255, 126, 102, .46);
  border-radius: 13px;
  color: #ffd1c8;
  background: rgba(88, 24, 18, .74);
  line-height: 1.35;
}

/* Dialogs may never extend behind browser chrome or device cut-outs. */
:is(
  .settings-panel,
  .shop-modal,
  .profile-modal,
  .inventory-details-panel,
  .inventory-sell-panel,
  .garden-confirm-modal,
  .training-confirm-modal,
  .plant-select-modal,
  .druid-confirm-modal,
  .witch-confirm-modal,
  .blacksmith-confirm-modal,
  .home-confirm-modal,
  .guard-confirm-modal,
  .travel-confirm-modal,
  .mine-confirm-modal,
  .merchant-confirm-modal,
  .petstore-confirm-modal,
  .petprofile-revive-modal,
  .clan-confirm-modal,
  .cf-social-panel,
  .cf-achievements-panel,
  .cf-newcomer-panel,
  .cf-dragon-panel
) {
  max-width: calc(100vw - var(--cf-safe-left) - var(--cf-safe-right) - 14px);
  max-height: calc(var(--cf-viewport-height) - var(--cf-safe-top) - var(--cf-safe-bottom) - 14px);
  overscroll-behavior: contain;
}

.settings-overlay,
.mail-overlay,
.cf-social-overlay,
.cf-achievements-overlay,
.cf-newcomer-overlay,
.cf-dragon-page,
.cf-ranking-page {
  box-sizing: border-box;
  padding-top: max(7px, var(--cf-safe-top));
  padding-right: max(7px, var(--cf-safe-right));
  padding-bottom: max(7px, var(--cf-safe-bottom));
  padding-left: max(7px, var(--cf-safe-left));
}

:is(.cf-dragon-panel, .cf-ranking-panel) {
  height: 100%;
  min-height: 0;
  max-height: 100%;
}

.settings-title,
.mail-header b,
.cf-social-header h2,
.cf-achievements-header h2,
.cf-ranking-panel h1 {
  min-width: 0;
  max-width: 100%;
}

.cf-network-status {
  position: fixed;
  z-index: 65000;
  left: 50%;
  bottom: max(16px, calc(var(--cf-safe-bottom) + 8px));
  box-sizing: border-box;
  width: max-content;
  max-width: calc(100vw - var(--cf-safe-left) - var(--cf-safe-right) - 24px);
  padding: 10px 14px;
  border: 1px solid rgba(255, 220, 128, .54);
  border-radius: 12px;
  color: #fff1c9;
  background: rgba(71, 37, 13, .96);
  box-shadow: 0 9px 26px rgba(0, 0, 0, .45);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.3;
  text-align: center;
  pointer-events: none;
  transform: translate(-50%, 14px);
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
}

.cf-network-status.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.cf-network-status.is-online {
  border-color: rgba(118, 226, 139, .55);
  color: #d8f7dc;
  background: rgba(18, 70, 32, .96);
}

@media (max-width: 430px) {
  :root { --cf-tap-size: 40px; }

  .main-menu-page,
  .register-screen,
  .loading-screen {
    width: 100vw;
    max-width: 100vw;
    height: var(--cf-viewport-height);
    max-height: var(--cf-viewport-height);
    border-radius: 0;
  }

  .settings-panel {
    width: calc(100% - 12px);
    max-width: 390px;
    height: min(680px, calc(var(--cf-viewport-height) - var(--cf-safe-top) - var(--cf-safe-bottom) - 14px));
    padding: 66px clamp(18px, 8vw, 34px) 28px;
  }

  .settings-title {
    width: 100%;
    min-height: 40px;
    margin-bottom: 24px;
    white-space: normal;
    line-height: 1.15;
  }

  .settings-row {
    min-width: 0;
    gap: 7px;
    margin-bottom: 18px;
    font-size: clamp(15px, 4.5vw, 20px);
  }

  .settings-language-row {
    margin-top: 28px;
  }

  .tutorial-dialog {
    right: 4%;
    bottom: max(8%, calc(var(--cf-safe-bottom) + 5%));
    width: 49%;
    min-height: 24%;
    padding: 26px 10px 11px;
  }

  .tutorial-text,
  .tutorial-reward-text {
    font-size: clamp(12px, 3.55vw, 15px);
    line-height: 1.22;
    overflow-wrap: anywhere;
  }

  .tutorial-name {
    max-width: 100%;
    padding: 4px 8px;
    overflow: hidden;
    font-size: clamp(10px, 3vw, 13px);
    text-overflow: ellipsis;
  }

  .cf-social-panel,
  .cf-achievements-panel,
  .cf-newcomer-panel,
  .cf-dragon-panel {
    width: 100%;
    max-width: 100%;
  }

  input,
  select,
  textarea {
    font-size: max(16px, 1em);
  }
}

@media (max-width: 360px) {
  :is(
    .garden-back-button,
    .profile-back-button,
    .training-back-btn,
    .inventory-back-button,
    .shop-back,
    .village-back-button,
    .druid-back-button,
    .witch-back-button,
    .blacksmith-back-button,
    .monk-back-button,
    .petstore-back-button,
    .petprofile-back-button,
    .pettraining-back-button,
    .petstats-back-button,
    .petsettings-back-button,
    .guard-back-button,
    .travel-back-button,
    .mine-back-button,
    .playersettings-back-button,
    .merchant-back-button,
    .home-back-button,
    .market-back-button,
    .clan-back-button,
    .arena-back-button,
    .stats-back-button
  ) {
    min-width: 64px;
    padding-inline: 9px;
    font-size: 12px;
  }

  .mail-header,
  .cf-social-header,
  .cf-achievements-header,
  .cf-newcomer-header {
    grid-template-columns: 40px minmax(0, 1fr) 40px;
  }

  .mail-header b,
  .cf-social-header h2,
  .cf-achievements-header h2,
  .cf-ranking-panel h1,
  .settings-title {
    white-space: normal;
    text-overflow: clip;
    line-height: 1.08;
  }

  .cf-ranking-panel > header {
    grid-template-columns: 62px minmax(0, 1fr) 62px;
    min-height: 66px;
  }

  .cf-ranking-category-copy b,
  .cf-ranking-category-copy small,
  .cf-dragon-header small {
    white-space: normal;
    text-overflow: clip;
  }

  .cf-social-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .arena-status-grid,
  .arena-stats-grid,
  .profile-actions-grid,
  .cf-social-actions,
  .cf-social-stats,
  .cf-social-equipment,
  .cf-social-received,
  .cf-social-catalog {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .arena-zone-buttons,
  .arena-detail-tabs {
    gap: 4px;
  }

  .arena-zone-buttons button,
  .arena-detail-tabs button {
    min-width: 0;
    padding-inline: 5px;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .tutorial-dialog {
    right: 3%;
    width: 52%;
    padding-inline: 8px;
  }

  .cf-first-load-content {
    margin-inline: 0;
    padding-inline: 11px;
  }

  .cf-first-load-metrics {
    flex-wrap: wrap;
    row-gap: 1px;
  }
}

@media (max-height: 620px) and (orientation: landscape) {
  .main-menu-page,
  .register-screen,
  .loading-screen,
  .shop-frame,
  .blacksmith-frame,
  .training-frame,
  .mine-frame,
  .witch-frame,
  .market-frame,
  .village-frame,
  .clan-frame,
  .petstore-frame,
  .travel-frame,
  .guard-frame,
  .petsettings-frame,
  .druid-frame,
  .home-frame,
  .monk-frame,
  .merchant-frame,
  .playersettings-frame,
  .petprofile-frame {
    min-height: var(--cf-viewport-height);
  }

  .settings-panel {
    height: calc(var(--cf-viewport-height) - 12px);
    overflow-y: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }

  img.cf-image-ready,
  .cf-network-status {
    transition: none;
  }
}