/* Telegram (owner, 2026-10-11; docs/27): «Войти через Телеграм» on the start screen, the wait for the bot, settings'
   «Привязать Телеграм», the shop's prices in Stars and the Mini App's loading screen. The Pirate Gothic palette keeps
   Telegram's blue muted (steel, under 35 % saturation); the Star is the game's gold. Loaded before fit.css. */

.tg-ico { width: 1.15em; height: 1.15em; flex: none; fill: currentColor; }
.tg-star { width: 1.05em; height: 1.05em; flex: none; fill: var(--gold, #d8b45c); filter: drop-shadow(0 0 2px rgba(216, 180, 92, 0.45)); }

/* ---------------------------------------------------------------- the start screen */
.login-panel #login-form .tg-login {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 40px; margin-top: 6px;
  color: #cfe0ea; border-color: rgba(122, 160, 184, 0.65); background: linear-gradient(180deg, rgba(46, 70, 86, 0.55), rgba(22, 34, 44, 0.75));
  font-size: 14px;
}
.login-panel #login-form .tg-login .tg-ico { color: #8fb7cf; }
.login-panel #login-form .tg-login:hover:not(:disabled) { border-color: rgba(150, 188, 210, 0.85); color: #e6f0f5; }
.login-panel #login-form .tg-login.hidden { display: none; }
.login-panel #login-form .tg-login .tgl-short { display: none; }
@media (max-height: 520px) {
  .login-panel #login-form .tg-login { min-height: var(--f-btn2, 40px); margin-top: 4px; font-size: var(--f-fs, 13px); }
}
/* the smallest phones held sideways: the guest's way and Telegram's side by side, so the account's line keeps its room */
@media (max-height: 340px) {
  #screen-login .login-panel #login-form:has(.tg-login:not(.hidden)) { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 6px; align-items: stretch; }
  #screen-login .login-panel #login-form:has(.tg-login:not(.hidden)) > label { grid-column: 1 / -1; }
  #screen-login .login-panel #login-form .tg-login .tgl-long { display: none; }
  #screen-login .login-panel #login-form .tg-login .tgl-short { display: inline; }
  #screen-login .login-panel #login-form:has(.tg-login:not(.hidden)) .btn-primary,
  #screen-login .login-panel #login-form:has(.tg-login:not(.hidden)) .tg-login { margin-top: 0; min-height: var(--f-btn2, 38px); line-height: 1.1; padding-left: 4px; padding-right: 4px; white-space: normal; }
}

/* ---------------------------------------------------------------- the wait for the bot */
#tg-wait {
  position: fixed; inset: 0; z-index: 2147482000; display: flex; align-items: center; justify-content: center;
  padding: max(8px, var(--sa-t, 0px)) max(8px, var(--sa-r, 0px)) max(8px, var(--sa-b, 0px)) max(8px, var(--sa-l, 0px));
  background: rgba(5, 7, 9, 0.72); box-sizing: border-box;
}
#tg-wait .tgw-card {
  width: min(440px, 100%); max-height: 100%; box-sizing: border-box; overflow: hidden; margin: 0;
  padding: clamp(10px, 3.4vh, 20px) clamp(12px, 3vw, 22px); display: flex; flex-direction: column; gap: clamp(4px, 1.6vh, 10px);
}
#tg-wait .tgw-h { display: flex; align-items: center; gap: 8px; margin: 0; font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(18px, 4.6vh, 24px); color: var(--brass, #c9a46a); }
#tg-wait .tgw-h .tg-ico { color: #8fb7cf; }
#tg-wait .tgw-text { margin: 0; font-size: clamp(13px, 3.4vh, 15px); line-height: 1.35; color: var(--bone, #e6dccb); }
#tg-wait .tgw-left { margin: 0; font-size: 13px; min-height: 1.3em; }
/* the code to pick in the bot (three are offered there, one is this) */
#tg-wait .tgw-code { display: flex; align-items: baseline; gap: 10px; margin: 0; color: var(--fog, #9aa3a8); font-size: 13px; }
#tg-wait .tgw-code b { font-family: Inter, system-ui, sans-serif; font-weight: 600; font-size: clamp(24px, 7.5vh, 34px); line-height: 1; letter-spacing: 0.16em; color: var(--gold, #d8b45c); font-variant-numeric: lining-nums tabular-nums; }
#tg-wait .tgw-left.bad { color: #e08a7a; }
#tg-wait .tgw-left.good { color: #a9c79a; }
#tg-wait .tgw-btns { display: flex; gap: 8px; flex-wrap: wrap; }
#tg-wait .tgw-btns .btn { flex: 1 1 140px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

/* ---------------------------------------------------------------- settings */
.opt-foot { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--k-sp-2, 6px); margin-top: var(--k-sp-3, 10px); }
.opt-foot .opt-more { margin-top: 0; }
.opt-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px; margin-top: var(--k-sp-2, 6px); font-size: 12px; opacity: 0.75; }
.opt-legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.opt-tg { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; }
.opt-tg .tg-ico { color: #8fb7cf; }
.opt-tg:disabled { opacity: 0.75; cursor: default; }
@media (max-height: 420px) { .opt-foot { margin-top: var(--k-sp-2, 6px); } }

/* ---------------------------------------------------------------- the shop's Stars */
.pm-pack .pm-stars { display: inline-flex; align-items: center; justify-content: center; gap: 5px; font-variant-numeric: tabular-nums; }
.pm-pack .pm-stars b { font-weight: 600; }
.pm-pack .pm-stars:disabled { opacity: 0.6; }
.pm-paynote { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; color: var(--fog, #9aa3a8); font-size: 12px; }

/* ---------------------------------------------------------------- the Mini App */
/* the sign-in's loading screen, in the theme's colours (the game keeps its own ink everywhere else) */
#tg-boot {
  position: fixed; inset: 0; z-index: 2147483100; display: flex; align-items: center; justify-content: center;
  background: var(--tgb-bg, #0b0d10); color: var(--tgb-fg, #e6dccb); text-align: center;
}
#tg-boot .tgb-card { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px; max-width: 360px; }
/* dressed (the owner's pack, 2026-10-17): the painting behind (index.html), the logo, the pack's wheel, the game's own ink
   rather than the theme's; clear of the notch and Telegram's bar */
#tg-boot { color: #e6dccb; box-sizing: border-box; padding: calc(env(safe-area-inset-top, 0px) + var(--tg-top, 0px)) 0 calc(env(safe-area-inset-bottom, 0px) + var(--tg-bottom, 0px)); }
#tg-boot .tgb-logo { display: block; line-height: 0; }
#tg-boot .tgb-logo img { width: min(64vw, 300px, 38vh); height: auto; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.85)); }
#tg-boot p, #tg-boot .tgb-slow { text-shadow: 0 1px 2px #000, 0 0 10px rgba(0, 0, 0, 0.9); }
#tg-boot .tgb-name { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 28px; letter-spacing: 0.08em; }
#tg-boot p { margin: 0; font-size: 14px; opacity: 0.85; }
#tg-boot .tgb-spin { width: 28px; height: 28px; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--tgb-accent, #c9a46a) 25%, transparent); border-top-color: var(--tgb-accent, #c9a46a); animation: tgb-spin 0.9s linear infinite; }
@keyframes tgb-spin { to { transform: rotate(360deg); } }
#tg-boot .tgb-slow { font-size: 13px; opacity: 0.75; max-width: 300px; line-height: 1.35; }
#tg-boot .tgb-retry { min-height: 40px; padding: 0 18px; font-size: 14px; }
@media (prefers-reduced-motion: reduce) { #tg-boot .tgb-spin { animation: none; } }
#tg-boot .tgb-name:has(.tgb-logo) { font-size: 0; }
/* the «turn your phone» veil's word on Telegram's auto-rotate */
#rotate-lock .tg-rot { display: none; }
.tg-app #rotate-lock .tg-rot { display: block; font-size: 13px; opacity: 0.7; max-width: 280px; }
/* Telegram's fullscreen puts its controls over the top of the page (the content safe area, src/tg.ts → --tg-*): the
   screens and the windows stand below them and take the rest of the height, so the phone fit (fit.css, kit/fit.ts —
   it measures the panes, not the screen) lays them out in what is left */
html.tg-app .screen, html.tg-app #modal { top: var(--tg-top, 0px); bottom: var(--tg-bottom, 0px); left: var(--tg-left, 0px); right: var(--tg-right, 0px); }
html.tg-app #modal-panel, html.tg-app .captain-wrap, html.tg-app #screen-login > .login-panel { max-height: 100%; }
/* …and the window's own padding for the notch (feel.css, fit.css: --sa-*) is not added on top: Telegram's insets
   (src/tg.ts) are both of them, so the window stood a second Telegram band lower — 46 px of a 270 px screen lost, the
   page under it cut (owner, 2026-10-22: «кнопки выходят за рамку», the exchange at 1093×481) */
html.tg-app #modal { padding: 0; }
html.tg-app .screen { padding-left: 0; padding-right: 0; }
@media (max-height: 520px), (max-width: 699px) {
  html.tg-app #modal-panel, html.tg-app .captain-wrap { height: 100%; }
}
.tg-app body, html.tg-app { overscroll-behavior: none; }
/* the toasts' band below Telegram's controls (hud.ts places it by the HUD; the content safe area is Telegram's) */
html.tg-app body.simple #toasts, html.tg-app body.simple.tq-side #toasts, html.tg-app body.simple.touch #toasts { top: max(var(--st-top, 0px), calc(var(--sa-t) + 8px)) !important; }