.tresneria-player-intro {
    --tg-intro-blue: var(--tg-account-primary, #002f59);
    --tg-intro-blue-soft: var(--tg-account-primary-soft, #d4e3ff);
    --tg-intro-gold: var(--tg-account-gold, #b36b00);
    --tg-intro-ink: var(--tg-account-ink, #181c20);
    --tg-intro-muted: var(--tg-account-muted, #5d6572);
    --tg-intro-border: var(--tg-account-border, #dce3ef);
    --tg-intro-surface: var(--tg-account-surface, #ffffff);
    font-family: var(--tg-framework-font-body, var(--tg-account-font-body));
    inset: 0;
    position: fixed;
    z-index: 100000;
}

.tresneria-player-intro[hidden] {
    display: none !important;
}

.tresneria-player-intro *,
.tresneria-player-intro *::before,
.tresneria-player-intro *::after {
    box-sizing: border-box;
}

.tresneria-player-intro__backdrop {
    animation: tg-intro-fade var(--tg-motion-sheet, 360ms) var(--tg-motion-ease, ease) both;
    background: rgba(2, 18, 35, 0.72);
    inset: 0;
    position: absolute;
}

.tresneria-player-intro__dialog {
    background: var(--tg-intro-surface);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 30px;
    box-shadow: 0 28px 90px rgba(0, 24, 49, 0.34);
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    left: 50%;
    max-height: min(880px, calc(100vh - 42px));
    max-width: 1040px;
    min-height: 690px;
    overflow: hidden;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(1040px, calc(100vw - 42px));
}

.tresneria-player-intro.is-opening .tresneria-player-intro__dialog {
    animation: tg-intro-dialog-in var(--tg-motion-sheet, 360ms) var(--tg-motion-ease-out, ease) both;
}

.tresneria-player-intro__close {
    align-items: center;
    background: var(--tg-account-soft, #eef3fb);
    border: 1px solid var(--tg-intro-border);
    border-radius: 999px;
    color: var(--tg-intro-ink);
    cursor: pointer;
    display: inline-flex;
    height: 42px;
    justify-content: center;
    padding: 0;
    position: absolute;
    right: 18px;
    top: 18px;
    transition: transform var(--tg-motion-fast, 120ms) var(--tg-motion-ease-press, ease);
    width: 42px;
    z-index: 5;
}

.tresneria-player-intro__close:hover,
.tresneria-player-intro__close:focus-visible {
    transform: rotate(5deg) scale(1.04);
}

.tresneria-player-intro__close svg,
.tresneria-player-intro__replay svg {
    fill: none;
    height: 19px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 19px;
}

.tresneria-player-intro__screens {
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
}

.tresneria-player-intro__screen {
    display: none;
    gap: 36px;
    grid-template-columns: minmax(270px, 0.76fr) minmax(420px, 1.24fr);
    min-height: 570px;
    padding: 64px 60px 28px;
}

.tresneria-player-intro__screen.is-active {
    animation: tg-intro-screen-in var(--tg-motion-entry, 320ms) var(--tg-motion-ease-out, ease) both;
    display: grid;
}

.tresneria-player-intro__screen--rules {
    grid-template-columns: minmax(240px, 0.62fr) minmax(500px, 1.38fr);
}

.tresneria-player-intro__copy {
    align-content: center;
    display: grid;
    gap: 14px;
}

.tresneria-player-intro__copy p,
.tresneria-player-intro__copy h2,
.tresneria-player-intro__copy span {
    margin: 0;
}

.tresneria-player-intro__copy p,
.tresneria-player-intro__visual-caption strong,
.tresneria-player-intro__level-labels,
.tresneria-player-intro__rule-tabs button,
.tresneria-player-intro__rewards strong,
.tresneria-player-intro__levels-table th {
    font-family: var(--tg-framework-font-display, var(--tg-account-font-display));
}

.tresneria-player-intro__copy p {
    color: var(--tg-intro-gold);
    font-size: 0.79rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.tresneria-player-intro__copy h2 {
    color: var(--tg-intro-blue);
    font-family: var(--tg-framework-font-display, var(--tg-account-font-display));
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 1.02;
    text-wrap: balance;
}

.tresneria-player-intro__copy > span {
    color: var(--tg-intro-muted);
    font-size: 0.98rem;
    line-height: 1.65;
}

.tresneria-player-intro__visual {
    align-content: center;
    background: linear-gradient(145deg, #f2f7ff, #f7fff9 52%, #fff7e9);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 26px;
    box-shadow: var(--tg-account-inset, inset 4px 4px 9px rgba(163, 177, 198, 0.42));
    display: grid;
    min-width: 0;
    overflow: hidden;
    padding: 22px;
}

.tresneria-player-intro__visual svg {
    display: block;
    height: auto;
    max-height: 330px;
    width: 100%;
}

.tresneria-player-intro__visual-caption {
    display: grid;
    gap: 4px;
    margin-top: 10px;
    text-align: center;
}

.tresneria-player-intro__visual-caption strong {
    color: var(--tg-intro-blue);
    font-size: 1.05rem;
}

.tresneria-player-intro__visual-caption span,
.tresneria-player-intro__carry-note span {
    color: var(--tg-intro-muted);
    font-size: 0.8rem;
}

.tg-intro-line,
.tg-intro-action-path,
.tg-intro-vessel,
.tg-intro-month-line,
.tg-intro-wallet,
.tg-intro-cycle {
    fill: none;
    stroke: var(--tg-intro-blue);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 6;
    vector-effect: non-scaling-stroke;
}

.tg-intro-line,
.tg-intro-action-path,
.tg-intro-month-line {
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
}

.is-active .tg-intro-line,
.is-active .tg-intro-action-path,
.is-active .tg-intro-month-line {
    animation: tg-intro-draw 1.45s var(--tg-motion-ease-out, ease) forwards;
}

.tg-intro-seed,
.tg-intro-spark,
.tg-intro-runner,
.tg-intro-vessel-sparks circle {
    fill: var(--tg-intro-blue);
}

.tg-intro-spark {
    opacity: 0;
}

.is-active .tg-intro-spark {
    animation: tg-intro-pop 440ms var(--tg-motion-ease-out, ease) forwards;
}

.is-active .tg-intro-spark--one { animation-delay: 580ms; }
.is-active .tg-intro-spark--two { animation-delay: 850ms; }
.is-active .tg-intro-spark--three { animation-delay: 1120ms; }

.tg-intro-runner {
    offset-path: path("M48 90 C105 28 156 152 214 90 C272 28 322 152 380 90 C412 55 444 55 478 90");
    offset-distance: 0%;
    transform-box: fill-box;
    transform-origin: center;
}

.is-active .tg-intro-runner {
    animation: tg-intro-run 3.8s var(--tg-motion-ease-out, ease) forwards;
}

.tresneria-player-intro__action-labels {
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(5, 1fr);
    margin-top: -18px;
}

.tresneria-player-intro__action-labels span {
    align-items: center;
    display: grid;
    gap: 5px;
    justify-items: center;
    min-width: 0;
}

.tresneria-player-intro__action-labels i {
    align-items: center;
    background: var(--tg-intro-blue);
    border-radius: 999px;
    color: #fff;
    display: flex;
    font-family: var(--tg-framework-font-display, var(--tg-account-font-display));
    font-style: normal;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.tresneria-player-intro__action-labels b {
    color: var(--tg-intro-muted);
    font-size: 0.68rem;
    overflow-wrap: anywhere;
}

.tg-intro-vessel {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: bottom center;
}

.is-active .tg-intro-vessel {
    animation: tg-intro-vessel-grow 680ms var(--tg-motion-ease-out, ease) forwards;
}

.is-active .tg-intro-vessel--two { animation-delay: 360ms; }
.is-active .tg-intro-vessel--three { animation-delay: 720ms; }

.tg-intro-vessel-sparks circle {
    opacity: 0;
}

.is-active .tg-intro-vessel-sparks circle {
    animation: tg-intro-pop 360ms var(--tg-motion-ease-out, ease) forwards;
}

.is-active .tg-intro-vessel-sparks circle:nth-child(n+3) { animation-delay: 560ms; }
.is-active .tg-intro-vessel-sparks circle:nth-child(n+7) { animation-delay: 960ms; }

.tresneria-player-intro__level-labels {
    color: var(--tg-intro-blue);
    display: grid;
    font-size: 0.82rem;
    grid-template-columns: repeat(3, 1fr);
    margin-top: -12px;
    text-align: center;
}

.tg-intro-ranks circle {
    fill: var(--tg-intro-blue);
    opacity: 0;
}

.tg-intro-ranks text {
    fill: #fff;
    font-family: var(--tg-framework-font-display, var(--tg-account-font-display));
    font-size: 20px;
    opacity: 0;
    text-anchor: middle;
}

.is-active .tg-intro-ranks circle,
.is-active .tg-intro-ranks text {
    animation: tg-intro-fade 420ms ease 900ms forwards;
}

.tg-intro-wallet,
.tg-intro-cycle {
    opacity: 0;
}

.is-active .tg-intro-wallet { animation: tg-intro-fade 500ms ease 1.35s forwards; }
.is-active .tg-intro-cycle { animation: tg-intro-fade 500ms ease 1.75s forwards; }

.tresneria-player-intro__carry-note {
    align-items: baseline;
    border-top: 1px solid var(--tg-intro-border);
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    justify-content: center;
    margin-top: 13px;
    padding-top: 12px;
    text-align: center;
}

.tresneria-player-intro__rule-tabs {
    align-content: center;
    display: grid;
    gap: 8px;
}

.tresneria-player-intro__rule-tabs button {
    background: var(--tg-account-soft, #eef3fb);
    border: 1px solid var(--tg-intro-border);
    border-radius: 999px;
    color: var(--tg-intro-blue);
    cursor: pointer;
    padding: 11px 16px;
}

.tresneria-player-intro__rule-tabs button[aria-selected="true"] {
    background: var(--tg-intro-blue);
    color: #fff;
}

.tresneria-player-intro__screen--rules.is-active {
    grid-template-areas: "copy panel" "tabs panel";
    grid-template-rows: auto 1fr;
}

.tresneria-player-intro__screen--rules .tresneria-player-intro__copy { grid-area: copy; }
.tresneria-player-intro__screen--rules .tresneria-player-intro__rule-tabs { grid-area: tabs; }

.tresneria-player-intro__rule-panel {
    animation: tg-intro-screen-in var(--tg-motion-entry, 320ms) var(--tg-motion-ease-out, ease) both;
    grid-area: panel;
    min-width: 0;
    overflow: auto;
}

.tresneria-player-intro__rule-panel[hidden] { display: none !important; }

.tresneria-player-intro__rewards {
    align-items: end;
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-top: 28px;
}

.tresneria-player-intro__reward {
    align-content: center;
    background: linear-gradient(160deg, #eef4ff, #fff8e8);
    border: 1px solid var(--tg-intro-border);
    border-radius: 20px 20px 8px 8px;
    display: grid;
    gap: 5px;
    justify-items: center;
    min-height: 126px;
    padding: 14px 8px;
    text-align: center;
}

.tresneria-player-intro__reward--1 { min-height: 190px; order: 2; }
.tresneria-player-intro__reward--2 { min-height: 154px; order: 1; }
.tresneria-player-intro__reward--3 { order: 3; }
.tresneria-player-intro__reward b { background: var(--tg-intro-blue); border-radius: 999px; color: #fff; display: grid; height: 29px; place-items: center; width: 29px; }
.tresneria-player-intro__reward span { color: var(--tg-intro-muted); font-size: 0.68rem; }

.tresneria-player-intro__store-note {
    border-top: 1px solid var(--tg-intro-border);
    color: var(--tg-intro-muted);
    font-size: 0.72rem;
    line-height: 1.5;
    margin: 15px 0 0;
    padding-top: 12px;
    text-align: center;
}

.tresneria-player-intro__earn-list { display: grid; }
.tresneria-player-intro__earn-item { align-items: center; border-bottom: 1px solid var(--tg-intro-border); display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr) auto; padding: 8px 0; }
.tresneria-player-intro__earn-item span { display: grid; gap: 2px; }
.tresneria-player-intro__earn-item small { color: var(--tg-intro-muted); font-size: 0.68rem; }
.tresneria-player-intro__earn-item b { color: var(--tg-intro-blue); text-align: right; }
.tresneria-player-intro__dislike-note { background: #fff4f2; border: 1px solid #f2d1cb; border-radius: 16px; display: grid; gap: 4px; margin-top: 12px; padding: 12px; }
.tresneria-player-intro__dislike-note strong { color: var(--tg-account-rose, #a81717); }
.tresneria-player-intro__dislike-note span { color: var(--tg-intro-muted); font-size: 0.7rem; line-height: 1.5; }

.tresneria-player-intro__levels-table table { border-collapse: collapse; table-layout: fixed; width: 100%; }
.tresneria-player-intro__levels-table th,
.tresneria-player-intro__levels-table td { border-bottom: 1px solid var(--tg-intro-border); overflow-wrap: anywhere; padding: 8px 5px; text-align: left; }
.tresneria-player-intro__levels-table thead th { color: var(--tg-intro-muted); font-size: 0.7rem; }
.tresneria-player-intro__levels-table tbody th { color: var(--tg-intro-blue); font-size: 0.76rem; }
.tresneria-player-intro__levels-table td { font-size: 0.72rem; }

.tresneria-player-intro__footer {
    background: var(--tg-intro-surface);
    border-top: 1px solid var(--tg-intro-border);
    display: grid;
    gap: 12px;
    padding: 14px 24px 16px;
}

.tresneria-player-intro__controls {
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(120px, 0.4fr) minmax(220px, 1fr);
    margin: 0 auto;
    max-width: 600px;
    width: 100%;
}

.tresneria-player-intro__controls button {
    align-items: center;
    border: 1px solid var(--tg-intro-blue);
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    font-family: var(--tg-framework-font-body, var(--tg-account-font-body));
    font-weight: 800;
    justify-content: center;
    min-height: 46px;
    padding: 10px 18px;
    transition: transform var(--tg-motion-fast, 120ms) var(--tg-motion-ease-press, ease), box-shadow var(--tg-motion-base, 180ms) var(--tg-motion-ease, ease);
}

.tresneria-player-intro__controls button:hover,
.tresneria-player-intro__controls button:focus-visible { transform: translateY(-2px); }
.tresneria-player-intro__controls button:active { transform: translateY(1px) scale(0.985); }
.tresneria-player-intro__replay { background: transparent; color: var(--tg-intro-blue); gap: 7px; }
.tresneria-player-intro__next { background: var(--tg-intro-blue); color: #fff; }

.tresneria-player-intro__progress {
    align-items: center;
    display: flex;
    gap: 2px;
    justify-content: center;
}

.tresneria-player-intro__progress button {
    align-items: center;
    background: transparent;
    border: 0;
    cursor: pointer;
    display: flex;
    height: 44px;
    justify-content: center;
    padding: 0;
    width: 44px;
}

.tresneria-player-intro__progress button::before {
    background: var(--tg-intro-border);
    border-radius: 999px;
    content: "";
    height: 7px;
    transition: width var(--tg-motion-base, 180ms) var(--tg-motion-ease, ease), background var(--tg-motion-base, 180ms) var(--tg-motion-ease, ease);
    width: 7px;
}

.tresneria-player-intro__progress button.is-complete::before { background: var(--tg-account-primary-mid, #2c609b); }
.tresneria-player-intro__progress button.is-active::before { background: var(--tg-intro-blue); width: 24px; }

body.tresneria-player-intro-open { overflow: hidden; }

@keyframes tg-intro-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tg-intro-dialog-in { from { opacity: 0; transform: translate(-50%, calc(-50% + 22px)) scale(0.97); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes tg-intro-screen-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes tg-intro-draw { to { stroke-dashoffset: 0; } }
@keyframes tg-intro-pop { from { opacity: 0; transform: scale(0.2); } to { opacity: 1; transform: scale(1); } }
@keyframes tg-intro-run { to { offset-distance: 100%; } }
@keyframes tg-intro-vessel-grow { from { opacity: 0; transform: scaleY(0.08); } to { opacity: 1; transform: scaleY(1); } }

@media (max-width: 760px) {
    .tresneria-player-intro__dialog {
        border-radius: 24px 24px 0 0;
        bottom: 0;
        left: 0;
        max-height: calc(100dvh - 12px);
        min-height: 0;
        top: auto;
        transform: none;
        width: 100%;
    }

    .tresneria-player-intro.is-opening .tresneria-player-intro__dialog { animation-name: tg-intro-mobile-in; }
    .tresneria-player-intro__close { height: 38px; right: 12px; top: 12px; width: 38px; }
    .tresneria-player-intro__screen,
    .tresneria-player-intro__screen--rules {
        display: none;
        gap: 18px;
        grid-template-columns: 1fr;
        min-height: 0;
        padding: 52px 16px 24px;
    }

    .tresneria-player-intro__screen.is-active,
    .tresneria-player-intro__screen--rules.is-active { display: grid; }
    .tresneria-player-intro__copy { gap: 8px; text-align: center; }
    .tresneria-player-intro__copy h2 { font-size: clamp(1.75rem, 8.5vw, 2.4rem); }
    .tresneria-player-intro__copy > span { font-size: 0.84rem; line-height: 1.5; }
    .tresneria-player-intro__visual { border-radius: 20px; padding: 12px; }
    .tresneria-player-intro__visual svg { max-height: 245px; }
    .tresneria-player-intro__screen--rules.is-active { grid-template-areas: "copy" "tabs" "panel"; grid-template-rows: auto auto auto; }
    .tresneria-player-intro__rule-tabs { display: flex; flex-wrap: wrap; justify-content: center; }
    .tresneria-player-intro__rule-tabs button { padding: 9px 12px; }
    .tresneria-player-intro__rule-panel { overflow: visible; }
    .tresneria-player-intro__footer { padding: 10px 12px max(12px, env(safe-area-inset-bottom)); }
    .tresneria-player-intro__controls { grid-template-columns: minmax(100px, 0.38fr) minmax(0, 1fr); }
    .tresneria-player-intro__controls button { font-size: 0.76rem; min-height: 44px; padding: 9px 12px; }
    .tresneria-player-intro__action-labels b { font-size: 0.58rem; }
    .tresneria-player-intro__level-labels { font-size: 0.66rem; }
}

@media (max-width: 360px) {
    .tresneria-player-intro__controls { grid-template-columns: 1fr; }
    .tresneria-player-intro__rewards { gap: 5px; }
    .tresneria-player-intro__reward { padding-inline: 4px; }
    .tresneria-player-intro__reward strong { font-size: 0.75rem; }
}

@keyframes tg-intro-mobile-in { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
    .tresneria-player-intro *,
    .tresneria-player-intro *::before,
    .tresneria-player-intro *::after {
        animation-duration: 1ms !important;
        animation-delay: 0ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 1ms !important;
    }

    .tg-intro-line,
    .tg-intro-action-path,
    .tg-intro-month-line { stroke-dashoffset: 0; }
    .tg-intro-spark,
    .tg-intro-vessel,
    .tg-intro-vessel-sparks circle,
    .tg-intro-ranks circle,
    .tg-intro-ranks text,
    .tg-intro-wallet,
    .tg-intro-cycle { opacity: 1; }
}

/* Production bridge for the four approved prototype screens. */
.tresneria-player-intro {
    --background: var(--tg-account-bg, #f7f9ff);
    --foreground: var(--tg-account-ink, #181c20);
    --card: var(--tg-account-surface, #ffffff);
    --card-foreground: var(--tg-account-ink, #181c20);
    --primary: var(--tg-account-primary, #002f59);
    --primary-foreground: #ffffff;
    --secondary: var(--tg-account-soft, #eef3fb);
    --secondary-foreground: var(--tg-account-ink, #181c20);
    --muted: var(--tg-account-soft, #eef3fb);
    --muted-foreground: var(--tg-account-muted, #5d6572);
    --border: var(--tg-account-border, #dce3ef);
    --viz-series-1: var(--tg-account-primary-mid, #2c609b);
}

.tresneria-player-intro__screen--approved.is-active {
    align-items: start;
    display: flex;
    justify-content: center;
    padding: 44px 34px 18px;
}

.tresneria-player-intro__screen--approved > [id] {
    width: min(100%, 440px) !important;
}

.tresneria-player-intro__screen--approved > #tg-expanding-capacity-mobile {
    width: min(100%, 520px) !important;
}

.tresneria-player-intro__screen--approved .tg-mobile-canvas {
    width: 100% !important;
}

@media (min-width: 761px) {
    .tresneria-player-intro__screen--approved section {
        gap: 12px !important;
    }

    .tresneria-player-intro__screen--approved #tg-expanding-capacity-mobile .tg-copy h2 {
        max-width: 500px !important;
    }

    .tresneria-player-intro__screen--approved #tg-community-intro .tg-intro-stage { min-height: 310px !important; }
    .tresneria-player-intro__screen--approved #tg-one-line-five-ways-mobile-v2 .tg-morph-stage { min-height: 330px !important; }
    .tresneria-player-intro__screen--approved #tg-expanding-capacity-mobile .tg-constellation-stage { min-height: 350px !important; }
    .tresneria-player-intro__screen--approved #tg-monthly-podium-mobile .tg-month-stage { min-height: 320px !important; }

    .tresneria-player-intro__screen--approved #tg-one-line-five-ways-mobile-v2 .tg-morph-canvas { height: 235px !important; }
    .tresneria-player-intro__screen--approved #tg-expanding-capacity-mobile .tg-constellation-canvas { height: 250px !important; }
    .tresneria-player-intro__screen--approved #tg-monthly-podium-mobile .tg-month-canvas { height: 220px !important; }

    .tresneria-player-intro__screen--approved #tg-one-line-five-ways-mobile-v2 .tg-shape-copy,
    .tresneria-player-intro__screen--approved #tg-monthly-podium-mobile .tg-stage-copy {
        bottom: 31px !important;
    }

    .tresneria-player-intro__screen--approved #tg-expanding-capacity-mobile .tg-level-copy {
        top: 93px !important;
    }

    .tresneria-player-intro__screen--approved #tg-one-line-five-ways-mobile-v2 .tg-word-trail,
    .tresneria-player-intro__screen--approved #tg-expanding-capacity-mobile .tg-level-trail,
    .tresneria-player-intro__screen--approved #tg-monthly-podium-mobile .tg-month-labels {
        bottom: 8px !important;
    }

}

.tresneria-player-intro__screen--approved .tg-intro-topline,
.tresneria-player-intro__screen--approved .tg-intro-actions,
.tresneria-player-intro__screen--approved .tg-topline,
.tresneria-player-intro__screen--approved .tg-actions,
.tresneria-player-intro__screen--approved .tg-next-peek,
.tresneria-player-intro__screen--approved .tg-next,
.tresneria-player-intro__screen--approved .tg-ready {
    display: none !important;
}

.tresneria-player-intro__screen--approved .card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 22px;
    box-sizing: border-box;
    color: var(--card-foreground);
    padding: 16px;
}

.tresneria-player-intro__screen--approved h2,
.tresneria-player-intro__screen--approved strong,
.tresneria-player-intro__screen--approved .viz-badge,
.tresneria-player-intro__screen--approved .tg-person-label,
.tresneria-player-intro__screen--approved .tg-choice-label {
    font-family: var(--tg-framework-font-display, var(--tg-account-font-display));
}

.tresneria-player-intro__screen--approved h2 {
    color: var(--tg-intro-blue);
    font-size: clamp(1.9rem, 4vw, 2.7rem);
    line-height: 1.06;
}

.tresneria-player-intro__screen--approved .viz-badge {
    background: var(--tg-intro-blue-soft);
    border-radius: 999px;
    color: var(--tg-intro-blue);
    display: inline-flex;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 6px 11px;
}

.tresneria-player-intro__screen--approved .text-muted {
    color: var(--muted-foreground);
}

.tresneria-player-intro__screen--approved .text-small {
    font-size: 0.72rem;
}

.tresneria-player-intro__screen--approved .sr-only {
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.tresneria-player-intro__screen--approved i[data-lucide] {
    align-items: center;
    display: inline-flex;
    font-family: var(--tg-framework-font-body, var(--tg-account-font-body));
    font-style: normal;
    justify-content: center;
}

.tresneria-player-intro__screen--approved i[data-lucide]::before { content: "•"; }
.tresneria-player-intro__screen--approved i[data-lucide="user-round"]::before { content: "●"; }
.tresneria-player-intro__screen--approved i[data-lucide="package-check"]::before { content: "▣"; }
.tresneria-player-intro__screen--approved i[data-lucide="check"]::before { content: "✓"; }
.tresneria-player-intro__screen--approved i[data-lucide="shopping-bag"]::before { content: "▤"; }
.tresneria-player-intro__screen--approved i[data-lucide="notebook-pen"]::before { content: "✎"; }
.tresneria-player-intro__screen--approved i[data-lucide="heart"]::before { content: "♥"; }
.tresneria-player-intro__screen--approved i[data-lucide="message-circle"]::before { content: "●"; }
.tresneria-player-intro__screen--approved i[data-lucide="user-round-plus"]::before { content: "+"; }
.tresneria-player-intro__screen--approved i[data-lucide="wallet-cards"]::before { content: "₹"; }

.tresneria-player-intro__screen--approved .tg-prototype-icon {
    fill: none;
    height: 1em;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.9;
    width: 1em;
}

@media (max-width: 760px) {
    .tresneria-player-intro__screen--approved.is-active {
        padding: 48px 12px 18px;
    }

    .tresneria-player-intro__screen--approved > [id] {
        width: 100%;
    }

    .tresneria-player-intro__screen--approved h2 {
        font-size: clamp(1.7rem, 7.5vw, 2.15rem);
    }

    .tresneria-player-intro__screen--approved .card {
        border-radius: 20px;
        padding: 12px;
    }

    /*
     * The approved prototypes were designed as full-page stories. Inside the
     * bottom-sheet, keep their exact animation language but use the compact
     * stage geometry so the active conclusion stays above the persistent
     * controls without asking the customer to scroll.
     */
    .tresneria-player-intro__screen--approved #tg-community-intro .tg-intro-stage {
        min-height: 310px !important;
    }

    .tresneria-player-intro__screen--approved #tg-one-line-five-ways-mobile-v2 .tg-morph-stage {
        min-height: 330px !important;
    }

    .tresneria-player-intro__screen--approved #tg-expanding-capacity-mobile .tg-constellation-stage {
        min-height: 350px !important;
    }

    .tresneria-player-intro__screen--approved #tg-monthly-podium-mobile .tg-month-stage {
        min-height: 320px !important;
    }

    .tresneria-player-intro__screen--approved #tg-one-line-five-ways-mobile-v2 .tg-morph-canvas {
        height: 235px !important;
    }

    .tresneria-player-intro__screen--approved #tg-expanding-capacity-mobile .tg-constellation-canvas {
        height: 250px !important;
    }

    .tresneria-player-intro__screen--approved #tg-monthly-podium-mobile .tg-month-canvas {
        height: 220px !important;
    }

    .tresneria-player-intro__screen--approved #tg-one-line-five-ways-mobile-v2 .tg-shape-copy,
    .tresneria-player-intro__screen--approved #tg-monthly-podium-mobile .tg-stage-copy {
        bottom: 31px !important;
    }

    .tresneria-player-intro__screen--approved #tg-expanding-capacity-mobile .tg-level-copy {
        top: 76px !important;
    }

    .tresneria-player-intro__screen--approved #tg-one-line-five-ways-mobile-v2 .tg-word-trail,
    .tresneria-player-intro__screen--approved #tg-expanding-capacity-mobile .tg-level-trail,
    .tresneria-player-intro__screen--approved #tg-monthly-podium-mobile .tg-month-labels {
        bottom: 8px !important;
    }

    /* Keep the compact level story legible without competing with the vessel. */
    .tresneria-player-intro__screen--approved #tg-expanding-capacity-mobile .tg-level-copy > span {
        font-size: 0.72rem;
        line-height: 1.2;
    }

    .tresneria-player-intro__screen--approved #tg-expanding-capacity-mobile .tg-level-copy > strong {
        font-size: 0.9rem;
        line-height: 1.15;
    }

    .tresneria-player-intro__screen--approved #tg-expanding-capacity-mobile .tg-level-copy > small {
        font-size: 0.72rem;
        line-height: 1.25;
    }

    .tresneria-player-intro__screen--approved #tg-expanding-capacity-mobile .tg-benefit-message > strong {
        font-size: 0.82rem;
        line-height: 1.25;
    }

    .tresneria-player-intro__screen--approved #tg-expanding-capacity-mobile .tg-benefit-message > span {
        font-size: 0.75rem;
        line-height: 1.35;
    }

    .tresneria-player-intro__screen--approved #tg-expanding-capacity-mobile .tg-level-trail {
        font-size: 0.72rem;
        line-height: 1.2;
    }

    /* The monthly cycle needs quieter copy so the returning line stays primary. */
    .tresneria-player-intro__screen--approved #tg-monthly-podium-mobile .tg-stage-copy > strong {
        font-size: 0.82rem;
        line-height: 1.25;
        text-wrap: balance;
    }

    .tresneria-player-intro__screen--approved #tg-monthly-podium-mobile .tg-stage-copy > span {
        font-size: 0.75rem;
        line-height: 1.35;
        text-wrap: balance;
    }

    .tresneria-player-intro__screen--approved #tg-monthly-podium-mobile .tg-month-labels {
        font-size: 0.72rem;
        line-height: 1.2;
    }
}