/* Telegram Mini App layer (docs/18). Active only with html.tma, set by tma.js. */
html.tma {
  /* Telegram's safe areas (its close/menu controls in fullscreen) are part of --safe-top and
     --safe-bottom in tokens.css, so every fixed element already clears them; these are aliases. */
  --tma-top: var(--safe-top);
  --tma-bottom: var(--safe-bottom);
  overscroll-behavior: none;
}
html.tma body {
  min-height: var(--tg-viewport-stable-height, 100dvh);
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
html.tma input, html.tma textarea { -webkit-user-select: text; user-select: text; }

/* Telegram's Main Button replaces the page CTA it mirrors; Telegram sessions
   end with the app, so there is nothing to log out of. */
html.tma .tg-main-source { display: none !important; }
html.tma #logout, html.tma #logout-all { display: none !important; }
/* Inside Telegram the account is the Telegram user: no web login options. */
html.tma .gate-alt, html.tma .gate-screen a[href^="/auth/telegram"], html.tma .email-login { display: none !important; }

/* Sheets of the Mini App layer: notifications and the optional write-access prompt (the shop is
   a screen of its own, shop.css).
   Real dialogs (tma.js): labelled, focus kept inside, Escape / Back close them. */
.tma-shop { position: fixed; inset: 0; z-index: var(--z-sheet, 50); display: flex; align-items: flex-end; justify-content: center; background: #061526cf; }
.tma-shop-sheet { width: min(100%, 430px); max-height: calc(100dvh - var(--safe-top, var(--tma-top, 0px)) - 24px);
  overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: 16px 16px calc(18px + env(safe-area-inset-bottom)); border: 1px solid #b2dde1;
  border-radius: 19px 19px 0 0; color: #e7f6f5; background: linear-gradient(#255e7a, #0c304b 58%, #08253b); box-shadow: 0 -14px 40px #020b17; }
.tma-shop-sheet:focus { outline: none; }
.tma-shop-sheet header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tma-shop-sheet h2 { margin: 0; color: #fff3cf; font-size: 21px; line-height: 1.25; }
.tma-shop-close { flex: 0 0 44px; width: 44px; height: 44px; border: 1px solid #b8dbdf; border-radius: 12px; color: #f1f7ef; background: #103a55e8; font-size: 24px; line-height: 1; }
.tma-shop-sheet p { margin: 8px 0; color: #cfe6e6; font-size: 13px; line-height: 1.4; }

/* Optional "allow the bot to message you" prompt, asked when it pays off. */
.tma-wa-actions { display: grid; gap: 8px; margin-top: 14px; }
.tma-wa-actions .btn { width: 100%; min-height: 44px; }
.tma-wa-note { min-height: 18px; color: #ffcf8a !important; }
.tma-wa-off { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 0; padding: 10px 12px;
  border: 1px solid #efba6199; border-radius: 12px; background: #3b2a1340; color: #fff3cf; font-size: 14px; }
.tma-wa-off .btn { flex: 0 0 auto; min-height: 44px; padding: 0 16px; }

/* Notification settings. */
.tma-notify-list { display: grid; gap: 6px; margin: 12px 0 4px; }
.tma-notify-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 12px;
  border: 1px solid #84c9db7a; border-radius: 12px; background: #0b2a45b3; color: #f1f7ef; font-size: 15px; }
.tma-notify-row input { width: 22px; height: 22px; accent-color: #efba61; }

/* Telegram's TON-only rule while the admin switch tma_token is off (app.js noToken sets
   html.tma-notoken): no $DRAKLY wallet or earnings screen inside the Mini App (docs/18).
   The economy branch also hides its fields per surface; this is the last line of defence
   for any entry point into the economy screen; the token pool note and token prices are
   hidden too (the renderers skip them as well). With the switch on the wallet is shown. */
html.tma-notoken [data-menu-tab="economy"], html.tma-notoken .test-pool-note, html.tma-notoken .token-price { display: none !important; }

/* Purchase note over the game. */
.tma-toast { position: fixed; left: 50%; bottom: calc(var(--nav-h, 76px) + 16px + var(--tma-bottom, env(safe-area-inset-bottom, 0px)));  /* over the tab bar */ z-index: var(--z-toast, 60);
  max-width: min(92vw, 420px); padding: 12px 16px; border: 1px solid var(--c-success, #7fd6a4); border-radius: var(--r-md, 12px);
  background: var(--c-surface-3, #123a55); color: var(--c-text, #e9f8fb); font: 700 var(--fs-md, 14px)/1.35 var(--font-ui, system-ui, sans-serif);
  box-shadow: 0 12px 32px #020b17cc; opacity: 0; pointer-events: none; transform: translate(-50%, 12px);
  transition: opacity var(--dur-2, 220ms) var(--ease-out, ease-out), transform var(--dur-2, 220ms) var(--ease-out, ease-out); }
.tma-toast[data-tone="info"] { border-color: var(--c-line-2, #568eaa); }
.tma-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* TON Connect: one more tap to open the wallet after the connect modal (tma.js sendTon). */
.tma-ton-tap { position: fixed; inset: 0; z-index: var(--z-dialog, 70); display: flex; align-items: center; justify-content: center; padding: 16px; background: #04101add; }
.tma-ton-tap-card { display: grid; gap: 10px; width: min(100%, 360px); padding: 18px 16px; border: 1px solid var(--c-line-2, #568eaa); border-radius: var(--r-md, 12px);
  background: var(--c-surface-3, #123a55); color: var(--c-text, #e9f8fb); box-shadow: 0 12px 32px #020b17cc; text-align: center; }
.tma-ton-tap-card p { margin: 0 0 4px; font: 700 var(--fs-md, 14px)/1.35 var(--font-ui, system-ui, sans-serif); }

@media (prefers-reduced-motion: reduce) {
  .tma-toast { transition: none; }
  .tma-toast { transform: translate(-50%, 0); }
}
/* Promo tasks of the Rewards screen (promo.py): steps, copy buttons, what to fix. */
html.tma .promo-steps { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
html.tma .promo-steps li { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 1.35; }
html.tma .promo-steps li > svg { flex: none; width: 18px; height: 18px; opacity: .6; }
html.tma .promo-steps li.is-ok > svg { opacity: 1; color: #8ff0b0; }
html.tma .promo-steps code { display: inline-block; max-width: 100%; padding: 1px 6px; border-radius: 6px;
  background: #0006; font-size: 12px; overflow-wrap: anywhere; -webkit-user-select: all; user-select: all; }
html.tma .promo-copies, html.tma .promo-actions { display: flex; flex-wrap: wrap; gap: 8px; }
html.tma .promo-copy { min-height: 36px; padding: 6px 12px; font-size: 13px; }
html.tma .promo-warn { margin: 0; font-size: 13px; color: #ffd27a; }