/* =====================================================================
   Redesign — Figma "INDEPENDENCE TRAIL — 2026", PRODUCT FLOW (2026-10-13).
   Values are taken 1:1 from the Figma frames (390 × 844 artboard).
   Night = Figma FROZEN masters; day keeps the light tokens of root_style.
   ===================================================================== */

:root {
    --r-accent: #7e6b39;          /* gold lines / inactive gold text on light */
    --r-accent-soft: rgba(126, 107, 57, 0.62);
    --r-pill-line: #7e6b39;
    --r-gold: #d8c691;            /* active fills */
    --r-on-gold: #0e0e0d;
}

.theme-night {
    --r-accent: #d8c691;
    --r-accent-soft: rgba(216, 198, 145, 0.62);
}

/* ---------- header controls (utility screens) ---------- */
.util_map,
.nav_back {
    position: absolute;
    top: 12px;
    width: 48px;
    height: 48px;
    color: var(--r-accent);
    z-index: 3;
}

.util_map {
    inset-inline-end: 10px;
}

.util_map svg {
    display: block;
}

.nav_back {
    inset-inline-start: 10px;
}

.nav_back_circle {
    position: absolute;
    top: 6px;
    left: 6px;
}

.nav_back_glyph {
    position: absolute;
    top: 16px;
    left: 16px;
}

[dir=ltr] .nav_back_glyph {
    transform: scaleX(-1);
}

/* ---------- preferences / settings (547:2, 1610:1945) ---------- */
.prefs2 > * {
    position: absolute;
    margin: 0;
}

.pp_title {
    inset-inline-start: 24px;
    width: 342px;
    top: 94px;
    height: 58px;
    font-family: var(--font-title);
    font-weight: 400;
    font-size: 34px;
    line-height: normal;
    color: var(--ink);
    text-align: start;
}

.prefs2_set .pp_title {
    top: 88px;
}

.pp_rule {
    left: 24px;
    width: 342px;
    height: 1px;
    background: var(--hairline);
}

.pp_rule_head { top: 154px; }
.pp_rule_1 { top: 280px; }
.prefs2_onb .pp_rule_2 { top: 477px; }
.prefs2_onb .pp_rule_3 { top: 598px; }
.prefs2_set .pp_rule_2 { top: 394px; }
.prefs2_set .pp_rule_3 { top: 595px; }

.pp_label {
    inset-inline-start: 24px;
    width: 224px;
    height: 34px;
    margin-top: 1px;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 21px;
    line-height: normal;
    color: var(--ink);
    text-align: start;
}

.pp_label_icon { top: 202px; }
.pp_label_narr { top: 298px; display: flex; align-items: center; }
.prefs2_onb .pp_label_display { top: 494px; }
.prefs2_set .pp_label_sound { top: 316px; }
.prefs2_set .pp_label_display { top: 430px; }
.pp_label_lang { top: 614px; }

/* personal icon: 50px art, 58px hit (Figma x 24 / 88 / 153 from the left) */
.pp_avatars {
    top: 180px;
    inset-inline-end: 20px;
    width: 191px;
    height: 58px;
}

.pp_avatar {
    position: absolute;
    top: 0;
    width: 58px;
    height: 58px;
}

.pp_avatar:nth-child(1) { inset-inline-end: 0; }
.pp_avatar:nth-child(2) { inset-inline-end: 64px; }
.pp_avatar:nth-child(3) { inset-inline-end: 129px; }

.pp_avatar img {
    position: absolute;
    top: 4px;
    left: 4px;
    display: block;
}

.pp_avatar .pp_avatar_on,
.pp_avatar.active .pp_avatar_off {
    display: none;
}

.pp_avatar.active .pp_avatar_on {
    display: block;
}

/* narrators (onboarding): 50px portraits, names, selected dot */
.pp_narrators {
    top: 315px;
    inset-inline-end: 21px;
    width: 245px;
    height: 96px;
}

.pp_narrator {
    position: absolute;
    top: 0;
    width: 58px;
    height: 96px;
}

.pp_narrator:nth-child(1) { inset-inline-end: 187px; }  /* שלמה ארצי — Figma x 212 */
.pp_narrator:nth-child(2) { inset-inline-end: 92px; }   /* רבקה מיכאלי — x 117 */
.pp_narrator:nth-child(3) { inset-inline-end: 0; }      /* טל מוסרי — x 25 */

.pp_narrator_pic {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--portrait-bg, #1f1f1c);
    box-shadow: 0 0 0 1px rgba(216, 198, 145, 0.45);
}

.pp_narrator.active .pp_narrator_pic {
    box-shadow: 0 0 0 3px var(--r-gold);
}

.pp_narrator_pic img {
    display: block;
    width: 50px;
    height: 50px;
    object-fit: cover;
}

.pp_narrator_name {
    position: absolute;
    top: 63px;
    left: -19px;
    width: 96px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: normal;
    color: var(--r-accent-soft);
    white-space: nowrap;
}

.pp_narrator.active .pp_narrator_name {
    color: var(--ink);
}

.pp_narrator_dot {
    position: absolute;
    top: 96px;
    left: 26px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--r-gold);
    display: none;
}

.pp_narrator.active .pp_narrator_dot {
    display: block;
}

/* sound / mute switch */
.pp_sound_label {
    inset-inline-start: 24px;
    top: 426px;
    width: 224px;
    height: 34px;
    display: flex;
    align-items: center;
    font-family: var(--font-ui);
    font-weight: 500;
    font-size: 14px;
    line-height: normal;
    color: var(--ink);
}

.pp_toggle {
    inset-inline-end: 24px;
    top: 430px;
    width: 52px;
    height: 28px;
    border-radius: 14px;
    background: var(--rail, rgba(243, 240, 232, 0.18));
}

.prefs2_set .pp_toggle {
    top: 317px;
}

.pp_toggle::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--r-accent-soft);
    transition: left .18s ease;
}

.pp_toggle.on::after {
    left: 26px;
    background: var(--r-gold);
}

/* segmented pills: day / night, language */
.pp_pill {
    inset-inline-end: 24px;
    width: 142px;
    height: 36px;
    display: flex;
    border: 1px solid var(--r-pill-line);
    border-radius: 20px;
}

.prefs2_onb .pp_pill_display { top: 537px; }
.prefs2_onb .pp_pill_lang { top: 657px; }
.prefs2_set .pp_pill { height: 40px; }
.prefs2_set .pp_pill_display { top: 424px; }
.prefs2_set .pp_pill_lang { top: 655px; }

.pp_seg {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: -1px;
    font-family: var(--font-ui);
    font-weight: 500;
    font-size: 14px;
    line-height: normal;
    color: var(--r-accent);
}

.pp_seg:first-child {
    border-start-start-radius: 20px;
    border-end-start-radius: 20px;
}

.pp_seg:last-child {
    border-start-end-radius: 20px;
    border-end-end-radius: 20px;
}

.pp_seg.active {
    background: var(--r-gold);
    color: var(--r-on-gold);
}

.pp_icon {
    flex: none;
    display: block;
}

.pp_moon {
    width: 14px;
    height: 14px;
}

/* settings footer: "המשך ←" alone at the end edge (Figma 1610:1967 sits 5px higher than the onboarding CTA) */
.cta_footer.end_only .cta_back {
    display: none;
}

.cta_footer.short.end_only .cta_btn {
    top: 30px;
}

/* ---------- about / terms of use (1610:1926) ---------- */
.util2 > :is(.pp_title, .pp_rule, .util2_body) {
    position: absolute;
    margin: 0;
}

.util2 .pp_title {
    top: 88px;
}

.util2_body {
    inset-inline-start: 24px;
    top: 218px;
    width: 318px;
    font-family: var(--font-body);
    font-size: 20px;
    line-height: normal;
    color: var(--ink);
    text-align: start;
}

.terms_of_use .util_consent {
    position: absolute;
    top: 330px;
    inset-inline-start: 24px;
    margin: 0;
}

/* ---------- opening + language (103:2) — one design for day and night ---------- */
.opening2 {
    padding: 0;
    height: 100dvh;
    min-height: 844px;
    background: #f3f0e8;
}

.opening2_bg {
    position: absolute;
    top: -16px;
    left: 0;
    width: 100%;
    height: calc(100% + 16px);
    object-fit: cover;
    object-position: center top;
    pointer-events: none;
}

.opening2_band {
    position: absolute;
    left: 0;
    top: 464px;
    width: 100%;
    height: 380px;
    background: linear-gradient(180deg, rgba(14, 14, 13, 0) 0%, rgba(14, 14, 13, 0.42) 40%, rgba(14, 14, 13, 0.42) 62%, rgba(14, 14, 13, 0) 100%);
    pointer-events: none;
}

.opening2_logo {
    position: absolute;
    left: 109px;
    top: 158px;
    width: 172px;
    height: 172px;
    margin: 0;
}

.opening2_logo img {
    display: block;
}

.opening2_tagline {
    position: absolute;
    left: 69px;
    top: 628px;
    width: 246px;
    height: 52px;
    padding-top: 10px;
    font-family: var(--font-body);
    font-size: 22px;
    line-height: normal;
    color: #f3f0e6;
    text-align: center;
}

.opening2_langs {
    position: absolute;
    left: 0;
    top: 740px;
    width: 100%;
    height: 44px;
}

.opening2_lang {
    position: absolute;
    top: 0;
    width: 100px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    line-height: normal;
    color: #f3f0e8;
}

.opening2_lang.en {
    left: 65px;
    font-size: 14px;
}

.opening2_lang.he {
    left: 235px;
    font-size: 16px;
}

.opening2_lang.active::after {
    content: '';
    position: absolute;
    left: 25px;
    top: 35px;
    width: 50px;
    height: 2px;
    background: #d8c691;
}

/* ---------- opening movie (1291:2) ---------- */
.opening_movie {
    padding: 0;
    height: 100dvh;
    min-height: 844px;
    background: #040404;
}

.om_frame {
    position: absolute;
    left: 0;
    top: 70px;
    width: 100%;
    height: 693px;
}

.om_video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #040404;
}

.om_continue {
    position: absolute;
    top: 12px;
    inset-inline-end: 18px;
    width: 48px;
    height: 48px;
    color: #d8c691;
}

.om_continue_circle {
    position: absolute;
    top: 6px;
    left: 6px;
}

.om_continue_glyph {
    position: absolute;
    top: 16px;
    left: 16px;
}

[dir=ltr] .om_continue_glyph {
    transform: scaleX(-1);
}

.om_cue {
    position: absolute;
    top: 800px;
    inset-inline-start: 29px;
    width: 289px;
    height: 2px;
    background: #d8c691;
}

.om_sound {
    position: absolute;
    top: 779px;
    inset-inline-end: 20px;
    width: 44px;
    height: 44px;
    color: #d8c691;
}

.om_sound svg {
    position: absolute;
    inset: 0;
}

.om_sound .om_sound_on,
.om_sound.on .om_sound_off {
    display: none;
}

.om_sound.on .om_sound_on {
    display: block;
}

/* ---------- terms (546:2): frame 24–352, editorial line at 364, consent under the frame edge ---------- */
.theme-night .terms_paper {
    margin-inline-end: 0;
}

.theme-night .terms_scroll {
    margin-inline-start: 14px;
    padding: 16px 14px 16px 16px;
    padding-inline: 14px 16px;
}

.terms_body {
    line-height: normal;
}

/* Figma keeps the editorial line visible even when the copy fits */
.theme-night .terms_indicator {
    opacity: 1 !important;
}

.terms_consent {
    gap: 10px;
    margin-inline-start: 14px;
}

.terms_consent_label {
    padding-top: 3px;
    line-height: normal;
}

/* ---------- map (91:6 day / 91:48 nearby / 91:94 selected / 107:8 night) ---------- */
.map_screen {
    --m-accent: #7e6b39;
    --m-btn: #edede4;
}

.map_screen.night {
    --m-accent: #d8c691;
    --m-btn: #141413;
}

.map_screen.night .map_nav::before {
    background: #171716;
}

.nav_sound2 {
    position: absolute;
    top: 14px;
    inset-inline-end: 12px;
    width: 44px;
    height: 44px;
    color: var(--m-accent);
}

.nav_sound2 svg {
    position: absolute;
    inset: 0;
}

.nav_sound2 .nav_sound_off,
.nav_sound2.muted .nav_sound_on {
    display: none;
}

.nav_sound2.muted .nav_sound_off {
    display: block;
}

.nav_menu2,
#navMenu.nav_menu2 {
    position: absolute;
    top: 12px;
    inset-inline-start: 10px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--m-accent);
}

.nav_menu2 svg {
    display: block;
}

.nav_menu2 .btn_fill {
    fill: var(--m-btn);
}

/* day | night pill — centred, 132 × 36 */
.nav_pill2 {
    position: absolute;
    top: 18px;
    left: 50%;
    width: 132px;
    height: 36px;
    margin-left: -67px;
    display: flex;
    border: 1px solid #7e6b39;
    border-radius: 20px;
}

.nav_seg {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: -1px;
    font-family: var(--font-ui);
    font-weight: 500;
    font-size: 14px;
    line-height: normal;
    color: var(--m-accent);
}

.nav_seg:first-child {
    border-start-start-radius: 20px;
    border-end-start-radius: 20px;
}

.nav_seg:last-child {
    border-start-end-radius: 20px;
    border-end-end-radius: 20px;
}

.nav_seg.active {
    background: #d8c691;
    color: #7e6b39;
}

.nav_seg_icon {
    flex: none;
    display: block;
}

.nav_moon {
    width: 12px;
    height: 12px;
}

/* station markers: 24 px, visited = filled */
.map_marker_dot {
    width: 24px;
    height: 24px;
    background: rgba(247, 243, 234, 0.85);
    box-shadow: inset 0 0 0 1.5px #b08a4a;
    font-family: 'Museo Sans', var(--font-ui);
    font-weight: 500;
    font-size: 10px;
    color: #6e604b;
}

.map_marker.visited .map_marker_dot {
    background: #7e6b39;
    box-shadow: none;
    color: #f7f3ea;
}

.map_screen.night .map_marker.visited .map_marker_dot {
    background: #d8c691;
    color: #0e0e0d;
}

/* user location: static outline + the personal icon chosen in preferences */
.user_halo {
    border: 1px solid #d8c691;
    opacity: 0.72;
    animation: none;
}

.user_icon {
    position: absolute;
    left: 5px;
    top: 5px;
    width: 22px;
    height: 22px;
}

/* bottom sheet */
.sheet_gradient {
    background: linear-gradient(to bottom, rgba(243, 240, 230, 0), #f3f0e6);
}

.sheet_label {
    top: 18px;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: normal;
    color: #59574f;
}

.sheet_label_gold {
    color: #b08a4a;
}

.sheet_title {
    top: 48px;
    font-size: 19px;
    line-height: normal;
    color: #171716;
}

.sheet_title_lg {
    font-size: 20px;
}

.sheet_distance {
    top: 90px;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: normal;
    color: #000;
}

.sheet_distance_left {
    color: #59574f;
}

/* selected (and night) */
.map_sheet[data-state=selected] .sheet_number,
.map_screen.night .sheet_number {
    top: 20px;
    inset-inline-start: var(--gutter);
    color: rgba(216, 198, 145, 0.9);
}

.sheet_title_light {
    top: 44px;
    inset-inline-end: var(--gutter);
    font-size: 18px;
    color: rgba(244, 236, 217, 0.96);
}

.sheet_distance_light {
    top: 82px;
    inset-inline-start: var(--gutter);
    color: rgba(199, 191, 176, 0.78);
}

.sheet_cta,
.map_screen.night .sheet_cta {
    top: 135px;
    inset-inline-start: auto;
    inset-inline-end: var(--gutter);
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: normal;
    color: rgba(216, 198, 145, 0.88);
    white-space: nowrap;
}

.sheet_cta .cta_arrow {
    margin: 0 2px 0 3px;
    order: 2;
}

.nav_moon path {
    fill: currentColor;
}

/* Figma keeps the selected station's marker as is (no focus ring) */
.map_marker.selected .map_marker_dot {
    visibility: visible;
}

.map_marker.selected .map_marker_focus {
    display: none;
}

/* ---------- station gateway / arrival (1017:1701 …) — anchored to the bottom so short phones keep the actions ---------- */
.arrival2 .arrival_scrim {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 140px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0));
    pointer-events: none;
}

.arrival2 .arrival_band {
    position: absolute;
    left: 0;
    top: calc(100% - 380px);
    width: 100%;
    height: 200px;
    background: linear-gradient(to bottom, rgba(14, 14, 13, 0) 0%, rgba(14, 14, 13, 0.42) 40%, rgba(14, 14, 13, 0.42) 62%, rgba(14, 14, 13, 0) 100%);
    pointer-events: none;
}

.arrival_map,
.arrival_menu {
    position: absolute;
    top: 12px;
    width: 48px;
    height: 48px;
    z-index: 2;
}

.arrival_map {
    inset-inline-end: 4px;
}

[dir=ltr] .arrival_map svg {
    transform: scaleX(-1);
}

.arrival_menu {
    inset-inline-start: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.arrival_map svg,
.arrival_menu svg {
    display: block;
}

.arrival2 .arrival_icon {
    top: calc(100% - 562px);
}

.arrival2 .arrival_number {
    top: calc(100% - 381px);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: normal;
}

.arrival2 .arrival_title {
    top: calc(100% - 356px);
    line-height: normal;
}

.gateway {
    position: absolute;
    top: calc(100% - 198px);
    left: 50%;
    width: 358px;
    height: 108px;
    margin-left: -179px;
    display: flex;
    gap: 10px;
    z-index: 2;
}

.gateway_action {
    position: relative;
    width: 82px;
    height: 108px;
}

.gateway_circle {
    position: absolute;
    top: 0;
    left: 5px;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(23, 23, 22, 0.5);
    box-shadow: inset 0 0 0 1px #d8c691;
    color: #f6f2e8;
}

.gateway_circle svg {
    position: absolute;
    top: 16px;
    left: 16px;
}

.gateway_label {
    position: absolute;
    top: 82px;
    left: 0;
    width: 82px;
    height: 26px;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: normal;
    color: #f6f3e8;
    text-align: center;
}

/* ---------- station activity header (Extensions 1102:2 …) ---------- */
.st_crumb {
    position: absolute;
    top: 24px;
    left: 76px;
    width: 238px;
    height: 24px;
    margin: 0;
    font-family: var(--font-title);
    font-size: 15px;
    line-height: 24px;
    color: var(--r-accent);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.st_rule {
    position: absolute;
    top: 61px;
    left: 24px;
    width: 342px;
    height: 1px;
    background: var(--r-accent);
}

.st_rule span {
    position: absolute;
    top: -4px;
    left: 167px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--r-accent);
}

/* ---------- extensions (1102:2 closed / 1102:25 open) ---------- */
.ext {
    padding: 0;
    min-height: 100dvh;
    height: auto;
    overflow: visible;
}

.ext_body {
    padding: 80px 24px 24px;
}

.ext_title {
    margin: 0;
    font-family: var(--font-title);
    font-weight: 400;
    font-size: 24px;
    line-height: 32px;
    color: var(--r-accent);
    text-align: center;
}

.ext_intro {
    margin: 14px 0 0;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 24px;
    color: var(--ink);
    text-align: start;
}

.ext_image {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 19px;
    object-fit: cover;
}

.ext_acc {
    margin-top: 43px;
    border-bottom: 1px solid var(--r-accent);
}

.ext_item {
    border-top: 1px solid var(--r-accent);
}

.ext_head {
    margin: 0;
    font: inherit;
}

.ext_toggle {
    position: relative;
    display: block;
    width: 100%;
    padding: 25px 0 24px;
    padding-inline-end: 34px;
    text-align: start;
}

.ext_item_title {
    display: block;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 22px;
    color: var(--r-accent);
}

.ext_sign {
    position: absolute;
    top: 24px;
    inset-inline-end: 0;
    width: 24px;
    height: 24px;
    font-family: var(--font-body);
    font-size: 20px;
    line-height: 24px;
    color: var(--r-accent);
    text-align: center;
}

.ext_sign::before {
    content: '+';
}

.ext_toggle[aria-expanded=true] .ext_sign::before {
    content: '\2013';
    font-family: var(--font-ui);
}

.ext_panel {
    position: relative;
    padding-bottom: 40px;
    padding-inline-start: 34px;
}

.ext_panel::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 40px;
    inset-inline-start: 8px;
    width: 2px;
    background: var(--r-accent);
}

.ext_text {
    margin: 0;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 24px;
    color: var(--ink);
    text-align: start;
}

/* ---------- next activity card (component 1500:186) ---------- */
.next_activity {
    position: relative;
    display: block;
    height: 72px;
    margin-top: 41px;
    border-top: 1px solid var(--r-accent-soft);
    border-top-color: color-mix(in srgb, var(--r-accent) 55%, transparent);
}

.na_icon {
    position: absolute;
    top: 15px;
    inset-inline-start: 16px;
    width: 40px;
    height: 40px;
    color: var(--r-accent);
}

.na_icon svg {
    display: block;
}

.na_eyebrow {
    position: absolute;
    top: 12px;
    inset-inline-start: 72px;
    width: 230px;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 14px;
    color: var(--r-accent);
    text-align: start;
}

.na_title {
    position: absolute;
    top: 30px;
    inset-inline-start: 72px;
    width: 230px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 19px;
    line-height: 24px;
    color: var(--ink);
    text-align: start;
}

.na_circle {
    position: absolute;
    top: 17px;
    inset-inline-end: 6px;
    color: var(--r-accent);
}

.na_glyph {
    position: absolute;
    top: 27px;
    inset-inline-end: 16px;
    color: var(--r-accent);
}

[dir=ltr] .na_glyph {
    transform: scaleX(-1);
}

.ext_item:last-child > .ext_head .ext_toggle {
    padding-bottom: 19px;
}

/* ---------- portrait player (1200:2 story, 1595:2988 end state, 1493:646 carousel) — bottom-anchored ---------- */
.p2 {
    padding: 0;
    height: 100dvh;
    min-height: 600px;
    background: #0e0e0d;
    color: #f3f0e8;
    overflow: hidden;
    --r-accent: #d8c691;
}

.p2_stage {
    position: absolute;
    left: 0;
    top: 70px;
    bottom: 81px;
    width: 100%;
    background: #040404;
}

.p2_carousel .p2_stage {
    top: 0;
    bottom: 0;
}

.p2_video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #040404;
}

.p2_scrim_top,
.p2_scrim_bottom {
    position: absolute;
    left: 0;
    width: 100%;
    pointer-events: none;
}

.p2_scrim_top {
    top: 0;
    height: 104px;
    background: linear-gradient(to bottom, rgba(14, 14, 13, 0.58), rgba(14, 14, 13, 0));
}

.p2_scrim_bottom {
    bottom: 0;
    height: 188px;
    background: linear-gradient(to bottom, rgba(14, 14, 13, 0), rgba(14, 14, 13, 0.7));
}

.p2 .st_rule {
    display: none;
}

.p2 .nav_back,
.p2 .st_crumb {
    z-index: 3;
}

.p2_play {
    position: absolute;
    top: calc(50% - 30px);
    left: calc(50% - 30px);
    width: 60px;
    height: 60px;
    color: #d8c691;
    z-index: 2;
}

.p2_play svg {
    display: block;
}

.p2.playing .p2_play {
    opacity: 0;
    pointer-events: none;
}

.p2_caption {
    position: absolute;
    left: 24px;
    width: 342px;
    bottom: 93px;
    margin: 0;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 22px;
    color: #f3f0e8;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
    pointer-events: none;
    z-index: 2;
}

.p2_carousel .p2_caption {
    bottom: 258px;
}

.p2_sound {
    position: absolute;
    bottom: 21px;
    inset-inline-end: 20px;
    width: 44px;
    height: 44px;
    color: #d8c691;
    z-index: 3;
}

.p2_sound svg {
    position: absolute;
    inset: 0;
}

.p2_sound .p2_sound_off,
.p2_sound.muted .p2_sound_on {
    display: none;
}

.p2_sound.muted .p2_sound_off {
    display: block;
}

.p2_progress {
    position: absolute;
    bottom: 42px;
    inset-inline-start: 29px;
    width: 289px;
    height: 2px;
    background: rgba(216, 198, 145, 0.28);
    z-index: 3;
}

.p2_progress span {
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    width: 0;
    height: 2px;
    background: #d8c691;
}

/* carousel: previous / next circles and the thumbnail strip */
.p2_nav {
    position: absolute;
    bottom: 202px;
    width: 48px;
    height: 48px;
    color: #fff;
    z-index: 3;
}

.p2_nav_prev {
    inset-inline-start: 18px;
}

.p2_nav_next {
    inset-inline-end: 18px;
}

.p2_nav svg {
    position: absolute;
    top: 6px;
    left: 4px;
}

.p2_nav_prev svg {
    left: 8px;
}

.p2_nav .p2_nav_glyph {
    top: 16px;
    left: 14px;
}

.p2_nav_prev .p2_nav_glyph {
    left: 18px;
}

[dir=ltr] .p2_nav .p2_nav_glyph {
    transform: scaleX(-1);
}

.p2_strip {
    position: absolute;
    bottom: 76px;
    left: 16px;
    width: 358px;
    height: 118px;
    overflow: hidden;
    background: rgba(14, 14, 13, 0.94);
    border-top: 1px solid rgba(216, 198, 145, 0.45);
    z-index: 3;
}

.p2_thumb {
    position: absolute;
    top: 11px;
    inset-inline-start: calc(-75px + 88px * var(--k));
    width: 76px;
    height: 90px;
}

.p2_thumb img {
    display: block;
    width: 76px;
    height: 50px;
    object-fit: cover;
    box-shadow: inset 0 0 0 1px rgba(216, 198, 145, 0.24);
    outline: 1px solid rgba(216, 198, 145, 0.24);
    outline-offset: -1px;
}

.p2_thumb.active img {
    outline: 1.5px solid #d8c691;
    outline-offset: -1.5px;
}

.p2_index {
    position: absolute;
    top: 58px;
    left: 0;
    width: 76px;
    height: 18px;
    font-family: var(--font-title);
    font-size: 14px;
    line-height: 18px;
    color: rgba(243, 240, 232, 0.66);
    text-align: center;
}

.p2_thumb.active .p2_index {
    color: #d8c691;
}

/* end state: "next activity" card on the dark player */
.p2_end {
    position: absolute;
    left: 24px;
    width: 342px;
    bottom: 88px;
    z-index: 4;
}

.p2_carousel .p2_end {
    bottom: 260px;
}

.p2_end .next_activity {
    margin: 0;
    background: rgba(14, 14, 13, 0.94);
    border-top-color: rgba(216, 198, 145, 0.7);
}

.p2_end .na_title {
    color: #f6f3e8;
}

/* ---------- global menu (1610:1839 / active 1419:133) — one dark design ---------- */
.gmenu {
    padding: 0;
    min-height: 100dvh;
    height: auto;
    background: #0e0e0d;
    color: #f3f0e8;
    position: relative;
}

.gm_line {
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    width: 224px;
    height: 2px;
    background: #7e6b39;
}

.gm_close {
    position: absolute;
    z-index: 2; /* the station list starts at the top of the screen (padding) and would cover it */
    top: 12px;
    inset-inline-end: 12px;
    width: 48px;
    height: 48px;
    font-family: var(--font-ui);
    font-size: 28px;
    line-height: 41px;
    color: #d8c691;
    text-align: center;
}

.gm_title {
    position: absolute;
    top: 42px;
    left: 24px;
    width: 342px;
    height: 58px;
    margin: 0;
    font-family: var(--font-title);
    font-weight: 400;
    font-size: 34px;
    line-height: 42px;
    color: #f3f0e8;
    text-align: start;
}

.gm_list {
    position: relative;
    margin: 0;
    padding: 108px 0 0;
    list-style: none;
}

.gm_row {
    position: relative;
    display: block;
    height: 48px;
    margin: 0 24px;
    border-bottom: 1px solid rgba(126, 107, 57, 0.55);
}

.gm_row.active::before {
    content: '';
    position: absolute;
    top: 2px;
    left: -6px;
    right: -11px;
    height: 44px;
    background: #d8c691;
}

[dir=ltr] .gm_row.active::before {
    left: -11px;
    right: -6px;
}

.gm_num,
.gm_label {
    position: absolute;
    top: 10px;
    height: 28px;
    font-family: var(--font-body);
    line-height: 28px;
    text-align: start;
}

.gm_num {
    inset-inline-start: 0;
    width: 44px;
    font-size: 14px;
    color: #d8c691;
}

.gm_label {
    inset-inline-start: 52px;
    width: 244px;
    font-size: 15px;
    color: #f3f0e8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gm_glyph {
    position: absolute;
    top: 18px;
    inset-inline-end: 10px;
    color: #d8c691;
}

[dir=ltr] .gm_glyph {
    transform: scaleX(-1);
}

.gm_row.active :is(.gm_num, .gm_label, .gm_glyph) {
    color: #0e0e0d;
}

.gm_divider {
    display: block;
    width: 342px;
    height: 1px;
    margin: 18px 24px 0;
    background: rgba(216, 198, 145, 0.45);
}

.gm_utils {
    display: flex;
    gap: 12px;
    margin: 21px 24px 0;
}

.gm_pill {
    width: 106px;
    height: 50px;
    border: 1px solid rgba(216, 198, 145, 0.9);
    border-radius: 25px;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 48px;
    color: #f3f0e8;
    text-align: center;
}

.gm_end {
    display: block;
    width: 342px;
    height: 52px;
    margin: 92px 24px 22px;
    border: 1px solid rgba(216, 198, 145, 0.9);
    border-radius: 26px;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 50px;
    color: #d8c691;
    text-align: center;
}

/* ---------- album (1610:2034), viewer (1610:2157), empty (1610:2217), toast (1651:1249) ---------- */
.album {
    position: relative;
    padding: 0 0 24px;
    min-height: 100dvh;
    height: auto;
    background: #0e0e0d;
    color: #f3f0e8;
    --r-accent: rgba(216, 198, 145, 0.8);
}

.al_rule {
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    width: 236px;
    height: 1px;
    background: rgba(216, 198, 145, 0.8);
}

.al_map {
    position: absolute;
    top: 12px;
    inset-inline-end: 10px;
    width: 48px;
    height: 48px;
    color: #d8c691;
}

.al_map svg {
    display: block;
}

.al_title {
    position: absolute;
    top: 72px;
    left: 24px;
    width: 342px;
    height: 62px;
    margin: 0;
    font-family: var(--font-title);
    font-weight: 400;
    font-size: 34px;
    line-height: 62px;
    color: #f3f0e8;
    text-align: center;
}

.al_label,
.al_count {
    position: absolute;
    top: 136px;
    height: 30px;
    margin: 0;
    font-family: var(--font-body);
    line-height: 30px;
}

.al_label {
    inset-inline-start: 24px;
    width: 342px;
    font-size: 16px;
    color: #d8c691;
    text-align: start;
}

.al_count {
    inset-inline-end: 24px;
    width: 72px;
    font-size: 14px;
    color: #a8a399;
    text-align: end;
    unicode-bidi: isolate;
}

.al_route {
    position: relative;
    width: 358px;
    height: 2000px;
    margin: 178px 16px 0;
    overflow: hidden;
}

.al_lines {
    position: absolute;
    top: 0;
    left: 0;
}

[dir=ltr] .al_lines {
    transform: scaleX(-1);
}

.al_cards {
    margin: 0;
    padding: 0;
    list-style: none;
}

.al_card {
    position: absolute;
    top: calc(22px + 194px * var(--i));
    width: 286px;
    height: 164px;
}

.al_card.odd {
    inset-inline-end: 16px;
}

.al_card.even {
    inset-inline-start: 16px;
}

.al_open {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background: #0e0e0d;
    box-shadow: inset 0 0 0 1px rgba(216, 198, 145, 0.65);
    overflow: hidden;
}

.al_photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.al_shade {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 52px;
    background: rgba(0, 0, 0, 0.62);
}

.al_num,
.al_name {
    position: absolute;
    top: 118px;
    height: 28px;
    font-family: var(--font-body);
    line-height: 28px;
    text-align: start;
}

.al_num {
    inset-inline-start: 16px;
    width: 34px;
    font-size: 14px;
    color: #d8c691;
}

.al_name {
    inset-inline-start: 56px;
    width: 212px;
    font-size: 16px;
    color: #f3f0e8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.al_mark {
    display: none;
}

.al_card.empty .al_open {
    box-shadow: inset 0 0 0 1px rgba(216, 198, 145, 0.25);
    cursor: default;
}

.al_card.empty :is(.al_photo, .al_shade) {
    display: none;
}

.al_card.empty .al_num {
    top: 24px;
    inset-inline-start: 24px;
    width: 52px;
    height: 54px;
    font-size: 34px;
    line-height: 54px;
    opacity: 0.42;
}

.al_card.empty .al_name {
    top: 94px;
    inset-inline-start: 24px;
    width: 242px;
    height: 34px;
    line-height: 34px;
    color: #a8a399;
}

.al_card.empty .al_mark {
    display: block;
    position: absolute;
    top: 82px;
    inset-inline-start: 20px;
    width: 246px;
    height: 1px;
    background: rgba(216, 198, 145, 0.2);
}

.al_point {
    position: absolute;
    top: 73px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #0e0e0d;
    box-shadow: inset 0 0 0 1px rgba(216, 198, 145, 0.85);
}

.al_card.odd .al_point {
    inset-inline-start: -27px;
}

.al_card.even .al_point {
    inset-inline-end: -27px;
}

.al_end {
    position: absolute;
    top: 1954px;
    left: 92px;
    width: 174px;
    height: 32px;
    margin: 0;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 32px;
    color: #d8c691;
    text-align: center;
}

.al_empty_route {
    position: absolute;
    top: 190px;
    left: 0;
}

[dir=ltr] .al_empty_route {
    transform: scaleX(-1);
}

.al_empty_title {
    position: absolute;
    top: 764px;
    left: 48px;
    width: 294px;
    height: 34px;
    margin: 0;
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 34px;
    color: #f3f0e8;
    text-align: center;
}

.album:has(.al_empty:not([hidden])) {
    min-height: max(100dvh, 820px);
}

/* photo viewer */
.al_viewer {
    position: fixed;
    inset: 0;
    z-index: 20;
    background: #0e0e0d;
    color: #f3f0e8;
}

body.al_viewing {
    overflow: hidden;
}

.al_viewer .st_crumb {
    color: #d8c691;
}

.alv_close {
    position: absolute;
    top: 12px;
    inset-inline-start: 10px;
    width: 48px;
    height: 48px;
    color: rgba(216, 198, 145, 0.8);
}

.alv_close svg,
.alv_circle svg:first-child {
    position: absolute;
    top: 6px;
    left: 6px;
}

.alv_close span,
.alv_circle > span {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 36px;
    height: 36px;
    font-family: var(--font-body);
    font-size: 20px;
    line-height: 36px;
    color: #d8c691;
    text-align: center;
}

.alv_photo {
    position: absolute;
    top: 86px;
    left: 24px;
    width: 342px;
    height: 650px;
    object-fit: cover;
    outline: 1px solid rgba(216, 198, 145, 0.55);
    outline-offset: -1px;
}

.alv_nav {
    position: absolute;
    top: 387px;
    width: 48px;
    height: 48px;
    color: rgba(216, 198, 145, 0.8);
}

.alv_nav::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 6px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(14, 14, 13, 0.55);
}

.alv_nav svg {
    position: absolute;
    top: 6px;
    left: 6px;
}

.alv_nav .alv_glyph {
    top: 16px;
    left: 16px;
    color: #d8c691;
}

.alv_prev {
    inset-inline-end: 30px;
}

.alv_next {
    inset-inline-start: 30px;
}

[dir=ltr] .alv_nav .alv_glyph {
    transform: scaleX(-1);
}

.alv_counter {
    position: absolute;
    top: 764px;
    left: 150px;
    width: 90px;
    height: 28px;
    margin: 0;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 28px;
    color: #a8a399;
    text-align: center;
    unicode-bidi: isolate;
}

.alv_act {
    position: absolute;
    top: 754px;
    width: 96px;
    height: 72px;
}

.alv_delete {
    inset-inline-end: 28px;
}

.alv_send {
    inset-inline-start: 28px;
}

.alv_circle {
    position: absolute;
    top: 0;
    left: 24px;
    width: 48px;
    height: 48px;
    color: rgba(216, 198, 145, 0.8);
}

.alv_send_icon {
    position: absolute;
    top: 13px;
    left: 13px;
    color: #d8c691;
}

.alv_label {
    position: absolute;
    top: 48px;
    left: 0;
    width: 96px;
    height: 24px;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 24px;
    color: #f3f0e8;
    text-align: center;
}

/* toast (album "נשלח", selfie "נשמר") */
.toast {
    position: fixed;
    left: 50%;
    bottom: 40px;
    width: 342px;
    height: 52px;
    margin: 0 0 0 -171px;
    background: #1c1a16;
    border: 1px solid #c6a85a;
    border-radius: 2px;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 50px;
    color: #f3f0e8;
    text-align: center;
    z-index: 30;
}

/* ---------- end route (1610:2130) ---------- */
.endroute {
    padding: 0;
    height: 100dvh;
    min-height: 560px;
    background: #0e0e0d;
    color: #f3f0e8;
    overflow: hidden;
}

.er_bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.5;
}

.er_line {
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    width: 224px;
    height: 2px;
    background: #d8c691;
}

.er_title {
    position: absolute;
    top: 158px;
    left: 24px;
    width: 342px;
    height: 84px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-title);
    font-weight: 400;
    font-size: 34px;
    line-height: 42px;
    color: #f3f0e8;
    text-align: center;
}

.er_body {
    position: absolute;
    top: 256px;
    left: 48px;
    width: 294px;
    margin: 0;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 27px;
    color: #fff;
    text-align: center;
}

.er_cancel,
.er_finish {
    position: absolute;
    left: 24px;
    width: 342px;
    height: 52px;
    border-radius: 26px;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 52px;
    text-align: center;
}

.er_cancel {
    bottom: 118px;
    box-shadow: inset 0 0 0 1px rgba(216, 198, 145, 0.9);
    color: #f3f0e8;
}

.er_finish {
    bottom: 46px;
    background: #d8c691;
    color: #0e0e0d;
}

/* ---------- selfie (1061:9 capture, 1048:2 approval, 1175:2 output, 1608:962 saved toast) ---------- */
.selfie {
    --r-accent: #d8c691;
}

.selfie .selfie_back2 {
    z-index: 3;
}

.selfie .selfie_crumb {
    left: 76px;
    right: auto;
    width: 238px;
    font-size: 15px;
    line-height: 24px;
    color: #d8c691;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.selfie:not([data-state=output]) .only-output,
.selfie[data-state=output] :is(.only-capture, .only-approval):not(.also-output) {
    display: none !important;
}

.selfie[data-state=output] .selfie_frame {
    box-shadow: inset 0 0 0 1px rgba(216, 198, 145, 0.35);
}

.selfie[data-state=output] .selfie_window {
    background: transparent;
    box-shadow: none;
}

.selfie[data-state=output] :is(#selfieTemplate, video) {
    display: none;
}

.selfie_status {
    position: absolute;
    top: 631px;
    left: 24px;
    width: 342px;
    height: 25px;
    margin: 0;
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 25px;
    color: #f3f0e8;
    text-align: center;
}

.selfie_out {
    position: absolute;
    top: 711px;
    left: 24px;
    width: 342px;
    height: 52px;
}

.selfie_download,
.selfie_continue {
    position: absolute;
    top: 0;
    width: 160px;
    height: 52px;
    border-radius: 26px;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 52px;
    text-align: center;
}

.selfie_download {
    inset-inline-start: 0;
    background: #d8c691;
    color: #0e0e0d;
}

.selfie_continue {
    inset-inline-end: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(14, 14, 13, 0.5);
    box-shadow: inset 0 0 0 1px #d8c691;
    color: #f3f0e8;
}

.selfie_continue_glyph {
    flex: none;
    color: #d8c691;
}

[dir=ltr] .selfie_continue_glyph {
    transform: scaleX(-1);
}

/* ---------- trivia per station (ST01_GAME_00–04: 742:2, 521:2–521:5) ---------- */
.trivia2 .t_title {
    top: 92px;
    height: 84px;
    color: #171716;
    color: var(--ink);
}

.trivia2 .t_title_intro {
    top: 88px;
    inset-inline-start: 76px;
    width: 287px;
    font-size: 30px;
    color: var(--r-accent);
}

.t_intro_icon {
    top: 89px;
    inset-inline-start: 24px;
    width: 40px;
    height: 40px;
    color: var(--r-accent);
}

.t_intro_icon svg {
    display: block;
}

.trivia2 .t_rule {
    top: 777px;
    height: 2px;
    background: var(--r-accent);
}

.trivia2 .t_cta {
    top: 744px;
    inset-inline-start: auto;
    inset-inline-end: 24px;
    width: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 18px;
    line-height: 32px;
    color: var(--ink);
}

.trivia2 .t_cta .cta_arrow {
    order: 2;
    margin: 0 2px 0 0;
}

.t_next {
    top: 640px;
    inset-inline-start: 24px;
    width: 342px;
}

.t_next .next_activity {
    margin: 0;
}