/*
 * Design reference: Figma "380-640 DESKTOP" node — 380 px wide
 * This is a Telegram Mini App (WebView).
 * Phone screen width is typically 360–428 px, so 380 px is the
 * ideal baseline.  All Figma px values scale via:
 *   calc(100vw * <figma-px> / 380)
 * so the layout is proportionally correct at every phone width.
 */

/* ── MODAL OVERRIDES ─────────────────────────────────────────── */
.modal.vertical-align-center .modal-dialog {
    display: flex;
    align-items: center;
    min-height: 100vh;
}
.modal-footer { justify-content: center; }
.modal.vertical-align-center .modal-content {
    margin: auto;
    border: none;
    border-radius: 0;
    box-shadow: none;
}
.custom-modal            { width: 200px; margin: auto; }
.modal-content           { border-radius: 0; }
.modal-body              { text-align: center; }
.specialmodal__content-block--info---btn { cursor: pointer; }

/* ── PAGE BACKGROUND ─────────────────────────────────────────── */
html, body {
    background-color:  #053033 !important;
    background-image:  linear-gradient(to bottom,
        #053033  0%,
        #32bdb5 20%,
        #32bdb5 78%,
        #053033 100%) !important;
    background-attachment: fixed !important;
}

/* ── PROMO WRAPPER + CONFETTI ────────────────────────────────── */
/* z-index:0 makes .promo a stacking context so confetti can sit at -1
   (behind all content but above the body gradient). */
.promo {
    position: relative;
    z-index: 0;
    overflow-x: hidden;
}
.confetti {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    user-select: none;
}
/* Content sits above the confetti layer */
.hero,
.steps-section,
.code-section,
.story {
    position: relative;
    z-index: 1;
}
/* Single confetti.png (760×446, RGBA) — spans full width, no rotation.
   Image is 2× the 380px frame width, so 100vw displays both clusters. */
.confetti {
    left:   0;
    right:  0;
    top:    calc(100vw * 440 / 380);
    width:  100%;
    height: auto;
}

/* ── HERO ────────────────────────────────────────────────────── */
/* Single composite banner (bottle, ball, player, text, prize bar
   all baked in). Swapped per language by language.js (#top_image). */
.hero {
    position: relative;
    width: 100%;
}

.hero__banner {
    display: block;
    width: 100%;
    height: auto;
    /* Rounded bottom corners are baked into the PNG alpha (matches top_ru.png) */
}

/* ── STEPS SECTION ───────────────────────────────────────────── */
.steps-section {
    display: flex;
    width: calc(100vw * 338 / 380);
    margin: 0 auto;
    padding: calc(100vw * 6 / 380) 0 0;
    gap: calc(100vw * 5 / 380);
    box-sizing: border-box;
}

.step-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(100vw * 5 / 380);
    min-width: 0;
}

.step-img-wrap {
    position: relative;
    width: 100%;
}

/* Uniform-height box + contain keeps all three the same visual height and
   sitting on a common baseline (images are auto-trimmed to their content). */
.step-img {
    width: 100%;
    height: calc(100vw * 108 / 380);
    object-fit: contain;
    object-position: center bottom;
    display: block;
}
/* img_1 (bottles) fills its PNG more than img_2/3 — shrink it to match */
.step-col:first-child .step-img {
    padding: calc(100vw * 5 / 380);
    box-sizing: border-box;
}
.step-col:nth-child(2) .step-img {
    padding: calc(100vw * 5 / 380);
    box-sizing: border-box;
}

/* Step description text (Figma: 6.1 px — tiny by design; browser min raises to ~10 px) */
.step-text {
    font-size: clamp(8px, calc(100vw * 4.5 / 380), 10px);
    font-weight: 600;
    color: #09151c;
    text-align: left;
    line-height: 1.35;
    margin-top: auto;
    padding: 0 calc(100vw * 2 / 380);
}

/* ── CODE INPUT + REGISTER BUTTON ───────────────────────────── */
/* Figma: width 338 px, centred, vertical gap 11 px */
.code-section {
    display: flex;
    flex-direction: column;
    gap: calc(100vw * 11 / 380);
    width: calc(100vw * 338 / 380);
    max-width: 95vw;
    margin: calc(100vw * 12 / 380) auto 0;
}

/* White input with teal border */
.scancheckinputs__bottom {
    width: 100%;
}
.scancheckinputs__bottom input {
    width: 100% !important;
    background: #ffffff !important;
    border: calc(100vw * 1.4 / 380) solid #009490 !important;
    border-radius: calc(100vw * 8.8 / 380) !important;
    color: #009490 !important;
    font-family: K_TCCCUnity-Bold;
    font-size: clamp(12px, calc(100vw * 16.9 / 380), 22px) !important;
    padding: calc(100vw * 5 / 380) calc(100vw * 10 / 380) !important;
    height: auto !important;
    outline: none;
}
.scancheckinputs__bottom input::placeholder {
    color: #009490 !important;
    opacity: 0.7;
}

/* Yellow register button */
#activate_button {
    width: 100% !important;
    background: #fee300 !important;
    border: calc(100vw * 1.4 / 380) solid #09151c !important;
    border-radius: calc(100vw * 8.8 / 380) !important;
    color: #09151c !important;
    font-family: K_TCCCUnity-Bold;
    font-size: clamp(12px, calc(100vw * 16.9 / 380), 22px) !important;
    padding: calc(100vw * 5 / 380) 0 !important;
    text-align: center;
    cursor: pointer;
    display: block;
}

/* ── HISTORY SECTION ─────────────────────────────────────────── */
.story .container {
    margin: 0 auto;
    width: calc(100vw * 338 / 380);
    max-width: 95vw;
    padding: 0;
}

/* "Моя история" title */
.story__content-title {
    color: #ffffff !important;
    font-size: clamp(14px, calc(100vw * 16.9 / 380), 22px) !important;
    text-transform: none !important;
    font-weight: 700;
}

/* User info card — white, teal border */
.storyThree__top {
    background: #ffffff;
    border: calc(100vw * 1.4 / 380) solid #009490;
    border-radius: calc(100vw * 8.8 / 380);
    padding: calc(100vw * 8 / 380) calc(100vw * 16 / 380);
}
.storyThree__top span {
    color: #009490 !important;
    font-size: clamp(12px, calc(100vw * 16.9 / 380), 22px);
    font-weight: 700;
}

/* History table card */
.storyTwo {
    border: calc(100vw * 1.4 / 380) solid #009490;
    border-radius: calc(100vw * 8.8 / 380);
    background: #ffffff;
}
.storyTwo__navinfo {
    background: transparent;
    border-radius: 0;
}
.storyTwo__navinfo span {
    background-color: #32bdb5 !important;
    border-radius:    calc(100vw * 8.8 / 380) !important;
    font-size: clamp(11px, calc(100vw * 16.9 / 380), 22px);
    padding: 4px clamp(8px, calc(100vw * 20 / 380), 28px);
}