@font-face {
  font-family: "PloniMaccabiMLv2AAA-Regular";
  src: url("./fonts/PloniMaccabiMLv2AAA-Regular.eot");
  src: url("./fonts/PloniMaccabiMLv2AAA-Regular.eot?#iefix")
      format("embedded-opentype"),
    url("./fonts/PloniMaccabiMLv2AAA-Regular.woff2") format("woff2"),
    url("./fonts/PloniMaccabiMLv2AAA-Regular.woff") format("woff"),
    url("./fonts/PloniMaccabiMLv2AAA-Regular.ttf") format("truetype"),
    url("./fonts/PloniMaccabiMLv2AAA-Regular.svg#./fonts/PloniMaccabiMLv2AAA-Regular")
      format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PloniMaccabiMLv2AAA-Bold";
  src: url("./fonts/PloniMaccabiMLv2AAA-Bold.eot");
  src: url("./fonts/PloniMaccabiMLv2AAA-Bold.eot?#iefix")
      format("embedded-opentype"),
    url("./fonts/PloniMaccabiMLv2AAA-Bold.woff2") format("woff2"),
    url("./fonts/PloniMaccabiMLv2AAA-Bold.woff") format("woff"),
    url("./fonts/PloniMaccabiMLv2AAA-Bold.ttf") format("truetype"),
    url("./fonts/PloniMaccabiMLv2AAA-Bold.svg#./fonts/PloniMaccabiMLv2AAA-Bold")
      format("svg");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PloniMaccabiMLv2AAA-DemiBold";
  src: url("./fonts/PloniMaccabiMLv2AAA-DemiBold.eot");
  src: url("./fonts/PloniMaccabiMLv2AAA-DemiBold.eot?#iefix")
      format("embedded-opentype"),
    url("./fonts/PloniMaccabiMLv2AAA-DemiBold.woff2") format("woff2"),
    url("./fonts/PloniMaccabiMLv2AAA-DemiBold.woff") format("woff"),
    url("./fonts/PloniMaccabiMLv2AAA-DemiBold.ttf") format("truetype"),
    url("./fonts/PloniMaccabiMLv2AAA-DemiBold.svg#./fonts/PloniMaccabiMLv2AAA-DemiBold")
      format("svg");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

.hide {
  display: none !important;
}

/* Remove blue background on WebKit autofilll */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  transition: background-color 5000s ease-in-out 0s;
  background-color: transparent !important;
}

@font-face {
  font-family: "PloniMLv2AAA-Regular";
  src: url("./fonts/PloniMLv2AAA-Regular.eot");
  src: url("./fonts/PloniMLv2AAA-Regular.eot?#iefix")
      format("embedded-opentype"),
    url("./fonts/PloniMLv2AAA-Regular.woff2") format("woff2"),
    url("./fonts/PloniMLv2AAA-Regular.woff") format("woff"),
    url("./fonts/PloniMLv2AAA-Regular.ttf") format("truetype"),
    url("./fonts/PloniMLv2AAA-Regular.svg#./fonts/PloniMLv2AAA-Regular")
      format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

html {
  scroll-behavior: smooth;
}

:root {
  --color1: #ffffff;
  --color2: #000000;
  --color3: #1e3c95;
  --color4: #dfb6c0;
  --color5: #fff3fb;
  --color6: #00b5ce;
  --color7: #f6faff;
  --color8: #f4f9ff;
  --color9: #be6090;
  --color10: #e5e5e5;
  --color11: #000000cf;
  --color12: #e7e7e7;
  --color13: #d25189; /* Pink from Figma */
  --primary-light-grey: #f7f7f7; /* PRIMARY/LIGHT GREY */
  --primary-pink-2: #dfb6c0; /* PRIMARY/MAIN PINK 2 */
}

* {
  margin: 0;
  padding: 0;
  font-family: "PloniMaccabiMLv2AAA-Regular", sans-serif;
  direction: rtl;
  /* -webkit-tap-highlight-color: transparent; */
  outline: none;
  scroll-behavior: smooth;
  text-decoration: none;
  box-sizing: border-box;
  direction: rtl;
  letter-spacing: 0%;
}

/* =====================================================================
   MACCABI LONGEVITY — page styles
   Brand font: Ploni (Maccabi). Design font "Ploni DL 1.1 AAA" → local Ploni.
   ===================================================================== */

:root {
  --lng-blue: #234093;     /* main brand blue */
  --lng-navy: #002d70;
  --lng-magenta: #d25189;  /* home subtitle */
  --lng-ink: #1a1a1a;
  --lng-soft: #5f5f5f;
  --lng-page: #ededed;
  --lng-white: #ffffff;
}

body {
  background-color: var(--lng-page);
  color: var(--lng-ink);
  min-height: 100vh;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

.section-inner {
  max-width: 1664px;
  margin: 0 auto;
  padding: 0 128px;
}

.section-title {
  font-family: "PloniMaccabiMLv2AAA-Bold", sans-serif;
  font-weight: bold;
  font-size: 40px;
  line-height: 1.1;
  color: var(--deep, var(--lng-blue));
  text-align: right;
}

/* ===================== HEADER ===================== */
.site-header {
  position: static;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 157px;
  background: var(--lng-page);
  padding: 0 40px;
}
.site-logo { display: flex; align-items: center; }
.site-logo img { height: 96px; width: auto; }
.site-logo-tight { display: none; }   /* tightly-cropped logo, used on mobile for right-alignment */

.back-btn,
.header-join {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.back-btn {
  right: 40px;
  color: var(--lng-blue);
  font-family: "PloniMaccabiMLv2AAA-Bold", sans-serif;
  font-size: 18px;
}
.back-btn svg { width: 20px; height: 20px; }
.back-btn span { font-family: "PloniMaccabiMLv2AAA-Bold", sans-serif; font-weight: bold; }
.header-join {
  left: 40px;
  background: var(--lng-blue);
  color: #fff;
  font-family: "PloniMaccabiMLv2AAA-Bold", sans-serif;
  font-size: 18px;
  padding: 12px 26px;
  border-radius: 100px;
}

/* header variants by view */
body.view-home .back-btn,
body.view-home .header-join { display: none; }

/* world view: no white bar — logo + back sit on the world's tint */
body.view-world .site-header {
  position: static;
  flex-direction: column;
  align-items: flex-start; /* RTL start = right */
  justify-content: flex-start;
  height: auto;
  background: var(--tint);
  box-shadow: none;
  padding: 32px 40px 0;
  gap: 64px;
}
body.view-world .header-join { display: none; }
body.view-world .site-logo { order: 1; }
/* inner pages: use the tightly-cropped logo so it sits flush to the top-right */
body.view-world .site-logo-full { display: none; }
body.view-world .site-logo-tight { display: block; }
body.view-world .site-logo img { height: 56px; }
body.view-world .back-btn {
  order: 2;
  position: static;
  transform: none;
  right: auto;
  color: var(--deep);
}
body.view-world .world-hero { padding-top: 20px; }
body.view-world .main-footer { display: none; }

/* ===================== VIEW SWITCHING ===================== */
.view { display: block; }
.view[hidden] { display: none; }

/* ===================== HOME VIEW ===================== */
.view-home { padding-bottom: 40px; }

.home-hero {
  max-width: 1200px;
  margin: 0 auto;
  padding: 56px 20px 8px;
  text-align: center;
}
.home-title {
  font-family: "PloniMaccabiMLv2AAA-Bold", sans-serif;
  font-weight: bold;
  color: var(--lng-blue);
  font-size: 92px;
  line-height: 1;
  margin-bottom: 22px;
  direction: rtl;
}
.home-title span { font-size: inherit; font-family: "PloniMaccabiMLv2AAA-Bold", sans-serif; font-weight: bold; }
.home-subtitle {
  font-family: "PloniMaccabiMLv2AAA-Bold", sans-serif;
  font-weight: bold;
  color: var(--lng-magenta);
  font-size: 28px;
  margin-bottom: 18px;
}
.home-lead {
  font-family: "PloniMaccabiMLv2AAA-Regular", sans-serif;
  color: var(--lng-soft);
  font-size: 22px;
  line-height: 1.45;
  max-width: 1100px;
  margin: 0 auto;
}
.home-lead + .home-lead { margin-top: 0; }

.worlds-heading {
  text-align: center;
  font-family: "PloniMaccabiMLv2AAA-Bold", sans-serif;
  font-weight: bold;
  color: var(--lng-blue);
  font-size: 40px;
  margin: 44px 0 12px;
}
.worlds-heading span { font-weight: bold; font-family: "PloniMaccabiMLv2AAA-Bold", sans-serif; }

/* circular worlds chooser */
.worlds-circle {
  position: relative;
  width: 1100px;
  height: 900px;
  margin: 0 auto;
}
.worlds-ring {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border: 1.5px solid #d4d8de;
  border-radius: 50%;
}
.worlds-ring-1 { width: 300px; height: 300px; }
.worlds-ring-2 { width: 450px; height: 450px; }
.worlds-ring-3 { width: 600px; height: 600px; }
.worlds-center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-family: "PloniMaccabiMLv2AAA-Bold", sans-serif;
  font-weight: bold;
  color: var(--lng-blue);
  font-size: 32px;
  line-height: 1.15;
}

.world-card {
  position: absolute;
  width: 300px;
  height: 260px;
  border-radius: 8px;
  background: var(--bg);
  color: var(--deep);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 20px 20px 24px;
  box-shadow: 4px 7px 9.9px -2px rgba(35,64,147,.25);
  transition: transform .25s ease, box-shadow .25s ease;
  text-align: center;
}
.world-card.is-solid { color: #fff; }
.world-card:hover { transform: translateY(-6px) rotate(0deg) scale(1.03); box-shadow: 4px 12px 18px -2px rgba(35,64,147,.32); }
.world-card-icon svg { width: 108px; height: 108px; }
.world-card-name {
  font-family: "PloniMaccabiMLv2AAA-Bold", sans-serif;
  font-weight: bold;
  font-size: 40px;
}
.world-card.pos-top       { top: 0;    left: 50%; transform: translateX(-50%) rotate(-3deg); }
.world-card.pos-right     { top: 32%;  right: 0;   transform: rotate(3deg); }
.world-card.pos-btm-right { bottom: 0; right: 6%;  transform: rotate(-3deg); }
.world-card.pos-btm-left  { bottom: 0; left: 6%;   transform: rotate(3deg); }
.world-card.pos-left      { top: 32%;  left: 0;    transform: rotate(-3deg); }

/* ===================== WORLD VIEW ===================== */
.world-hero { background: var(--tint); padding: 64px 0; position: relative; overflow: hidden; }
.world-hero-mark {
  position: absolute;
  right: 0;
  bottom: 0;
  display: block;
  height: 124px;
  width: auto;
  pointer-events: none;
  z-index: 0;
}
.world-hero-mark-mobile { display: none; }
.world-hero-inner {
  max-width: 1664px;
  margin: 0 auto;
  padding: 0 128px;
  display: flex;
  flex-direction: row-reverse;
  gap: 80px;
  align-items: flex-start;
  position: relative;
  z-index: 1;
}
.world-hero-video {
  position: relative;
  flex: 0 0 405px;
  max-width: 405px;
  aspect-ratio: 9 / 16;
  border-radius: 16px;
  overflow: hidden;
  background: #d7dbe0;
}
.world-hero-video .hero-video { width: 100%; height: 100%; object-fit: cover; }
.world-hero-video[data-hero-video] { cursor: pointer; background: #000; }
.hero-video-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-video-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.world-hero-video.is-playing .hero-video-poster,
.world-hero-video.is-playing .hero-video-play { display: none; }
.hero-video-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 76px; height: 76px;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  color: var(--deep);
  display: flex; align-items: center; justify-content: center;
}
.hero-video-play svg { width: 30px; height: 30px; margin-right: -3px; }
.world-hero-text { flex: 1; text-align: right; padding-top: 10vw; }

/* No video yet: hide the placeholder frame; right-align the text and drop the world icon below it */
.world-hero-video.is-placeholder { display: none; }
.world-hero-inner:has(.world-hero-video.is-placeholder) { display: block; }   /* no flex row without a video */
.world-hero-inner:has(.world-hero-video.is-placeholder) .world-hero-text {
  max-width: 1100px;      /* RTL block → sits at the right; keeps lines readable */
  padding-top: 0;
}
.world-hero:has(.world-hero-video.is-placeholder) .world-hero-mark {
  position: static;
  height: 168px;
  /* right below the text; line runs all the way to the page edge */
  margin: 12px 0 0 auto;
}
.world-title {
  font-family: "PloniMaccabiMLv2AAA-Bold", sans-serif;
  font-weight: bold;
  color: var(--deep);
  font-size: 80px;
  line-height: 1;
  margin-bottom: 24px;
}
.world-hero-p {
  font-family: "PloniMaccabiMLv2AAA-Regular", sans-serif;
  color: var(--lng-ink);
  font-size: 26px;
  line-height: 1.4;
}

/* services */
.world-services { background: var(--lng-white); padding: 64px 0; }
.services-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: flex-start;
  margin-top: 40px;
}
.service-card {
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 0 20px rgba(0,0,0,.10);
  width: calc((100% - 48px) / 3);
  min-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.service-card-img {
  position: relative;
  height: 240px;
  border-radius: 8px;
  overflow: hidden;
}
.service-card-img img { width: 100%; height: 100%; object-fit: cover; }
.service-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  text-align: right;
}
.service-card-txt { display: flex; flex-direction: column; gap: 16px; }
.service-card-title {
  font-family: "PloniMaccabiMLv2AAA-Bold", sans-serif;
  font-weight: bold;
  color: var(--lng-ink);
  font-size: 28px;
  line-height: 1.05;
}
.service-card-desc {
  font-family: "PloniMaccabiMLv2AAA-Regular", sans-serif;
  color: var(--lng-soft);
  font-size: 22px;
  line-height: 1.2;
}
.service-card-ctas {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.pill-cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--deep);
  color: #fff;
  border-radius: 100px;
  padding: 14px 30px;
  font-family: "PloniMaccabiMLv2AAA-Bold", sans-serif;
  font-weight: bold;
  font-size: 22px;
}
.pill-cta .pill-arrow { width: 18px; height: 18px; }

/* articles */
.world-articles { background: var(--lng-white); padding: 64px 0; }
.articles-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
}
.carousel-nav { display: flex; gap: 12px; }
.cnav-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--deep);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.cnav-btn svg { width: 22px; height: 22px; }
.cnav-btn:disabled { background: #858585; color: #fff; cursor: default; }

.articles-row { display: flex; gap: 24px; }
.articles-row.is-carousel {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
  /* vertical room so the cards' shadow isn't clipped into a grey strip */
  padding: 22px 2px;
  margin: -22px -2px;
}
.articles-row.is-carousel::-webkit-scrollbar { display: none; }
.article-card {
  flex: 0 0 300px;
  max-width: 300px;
  height: 285px;            /* fixed so every card matches across all worlds */
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0,0,0,.08);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
a.article-card { transition: box-shadow .2s, transform .2s; }
a.article-card:hover { box-shadow: 0 0 26px rgba(0,0,0,.16); transform: translateY(-2px); }
.articles-row.is-carousel .article-card {
  flex: 0 0 300px;
  scroll-snap-align: start;
}
/* non-carousel rows: keep cards at the uniform size, aligned to the start (no stretch) */
.articles-row:not(.is-carousel) { flex-wrap: wrap; }
.article-card-img { flex: 0 0 180px; height: 180px; background: #d7dbe0; }
.article-card-img img { width: 100%; height: 100%; object-fit: cover; }
.article-card-title {
  flex: 1;                  /* fills the rest so the card height stays uniform */
  min-height: 0;
  font-family: "PloniMaccabiMLv2AAA-Bold", sans-serif;
  font-weight: bold;
  color: var(--lng-ink);
  font-size: 24px;
  line-height: 1.1;
  padding: 20px;
  text-align: right;
  overflow: hidden;
}

/* video article cards: clickable button look + play badge over the thumbnail */
button.article-card { transition: box-shadow .2s, transform .2s; cursor: pointer; text-align: right; }
button.article-card:hover { box-shadow: 0 0 26px rgba(0,0,0,.16); transform: translateY(-2px); }
.article-card--video .article-card-img { position: relative; }
.article-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 60px; height: 60px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  color: var(--deep, #5125b6);
  box-shadow: 0 4px 16px rgba(0,0,0,.28);
  transition: transform .2s;
}
.article-play svg { width: 28px; height: 28px; margin-right: -3px; }
.article-card--video:hover .article-play { transform: scale(1.08); }

/* ---- video lightbox (portrait, for YouTube Shorts) ---- */
.video-modal {
  position: fixed; inset: 0; z-index: 210;
  background: rgba(20,16,40,.7);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.video-modal[hidden] { display: none; }
.video-modal-box {
  position: relative;
  width: min(420px, 90vw, calc(86vh * 9 / 16));
  aspect-ratio: 9 / 16;
}
.video-modal-frame {
  width: 100%; height: 100%;
  border-radius: 20px;
  overflow: hidden;
  background: #000;
}
.video-modal-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.video-modal-close {
  position: absolute;
  top: -48px; left: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  font-size: 28px; line-height: 1;
  color: #fff;
  background: rgba(255,255,255,.18);
}
.video-modal-close:hover { background: rgba(255,255,255,.3); }

/* games placeholder */
.world-games { background: var(--lng-white); padding: 64px 0; }
.games-sub {
  margin: 12px 0 0;
  color: var(--lng-soft);
  font-size: 20px;
  line-height: 1.4;
}
.games-row {
  margin-top: 32px;
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.game-card {
  flex: 1 1 0;
  min-width: 280px;
  background: #fff;
  border: 2px solid color-mix(in srgb, var(--deep) 18%, #fff);
  border-radius: 20px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: right;
  box-shadow: 0 0 24px rgba(0,0,0,.06);
}
.game-card-icon {
  display: inline-flex;
  width: 64px; height: 64px;
  border-radius: 16px;
  align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--deep) 12%, #fff);
  color: var(--deep);
  margin-bottom: 18px;
}
.game-card-icon svg { width: 34px; height: 34px; }
.game-card-title {
  font-family: "PloniMaccabiMLv2AAA-Bold", sans-serif;
  font-weight: bold;
  font-size: 28px;
  color: var(--deep);
  margin-bottom: 10px;
}
.game-card-desc { color: var(--lng-ink); font-size: 18px; line-height: 1.5; margin-bottom: 22px; flex: 1; }
.game-card-cta {
  align-self: stretch;
  background: var(--deep);
  color: #fff;
  font-family: "PloniMaccabiMLv2AAA-Bold", sans-serif;
  font-weight: bold;
  font-size: 19px;
  padding: 14px 24px;
  border-radius: 100px;
  transition: filter .2s, transform .2s;
}
.game-card-cta:hover { filter: brightness(1.1); transform: translateY(-2px); }

/* ---- game modal ---- */
.game-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(20,16,40,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.game-modal[hidden] { display: none; }
.game-modal-box {
  position: relative;
  background: #fff;
  border-radius: 24px;
  width: min(560px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  padding: 40px 32px 32px;
  text-align: center;
}
.game-modal-close {
  position: absolute;
  top: 14px; left: 16px;
  width: 40px; height: 40px;
  border-radius: 50%;
  font-size: 30px; line-height: 1;
  color: var(--deep, #5125b6);
  background: color-mix(in srgb, var(--deep, #5125b6) 10%, #fff);
}
.game-modal-title {
  font-family: "PloniMaccabiMLv2AAA-Bold", sans-serif;
  font-weight: bold;
  font-size: 30px;
  color: var(--deep, #5125b6);
  margin-bottom: 8px;
}
.game-status {
  display: flex; justify-content: center; gap: 28px;
  margin: 6px 0 20px; color: var(--lng-soft); font-size: 18px;
}
.game-status b { color: var(--deep, #5125b6); font-family: "PloniMaccabiMLv2AAA-Bold", sans-serif; }

/* memory game */
.memory-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 0 auto;
  max-width: 380px;
}
.memory-cell {
  aspect-ratio: 1;
  border-radius: 14px;
  font-size: 32px;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  display: flex; align-items: center; justify-content: center;
  background: var(--deep, #5125b6);
  transition: transform .18s, background .18s;
  user-select: none;
}
.memory-cell.flipped { background: color-mix(in srgb, var(--deep, #5125b6) 12%, #fff); }
.memory-cell.matched { background: #d6efe0; cursor: default; }
.memory-cell:not(.flipped):not(.matched):hover { transform: scale(1.04); }

/* stroop game */
.stroop-word {
  font-family: "PloniMaccabiMLv2AAA-Bold", sans-serif;
  font-weight: bold;
  font-size: 72px;
  line-height: 1;
  margin: 10px 0 28px;
}
.stroop-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 380px; margin: 0 auto; }
.stroop-swatch {
  padding: 16px 8px;
  border-radius: 14px;
  color: #fff;
  font-family: "PloniMaccabiMLv2AAA-Bold", sans-serif;
  font-weight: bold;
  font-size: 18px;
  transition: transform .12s, box-shadow .12s;
}
.stroop-swatch:hover { transform: translateY(-2px); }
.stroop-feedback { min-height: 26px; margin-top: 18px; font-size: 20px; font-weight: bold; }
.stroop-feedback.ok { color: #2f855a; }
.stroop-feedback.bad { color: #e3342f; }

/* number-sequence game */
.seq-hint { color: var(--lng-soft); font-size: 18px; margin: 4px 0 14px; }
.seq-display {
  height: 120px;
  display: flex; align-items: center; justify-content: center;
  font-family: "PloniMaccabiMLv2AAA-Bold", sans-serif; font-weight: bold;
  font-size: 84px; line-height: 1; color: var(--deep, #5125b6);
}
.seq-display.flash { animation: seq-flash .42s ease; }
@keyframes seq-flash { from { transform: scale(.6); opacity: .15; } to { transform: scale(1); opacity: 1; } }
.seq-input {
  min-height: 46px; margin-bottom: 16px; direction: ltr;
  font-family: "PloniMaccabiMLv2AAA-Bold", sans-serif; font-weight: bold;
  font-size: 34px; letter-spacing: 10px; color: var(--lng-ink);
}
.seq-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 280px; margin: 0 auto; }
.seq-key {
  padding: 16px 0; border-radius: 12px;
  font-family: "PloniMaccabiMLv2AAA-Bold", sans-serif; font-weight: bold; font-size: 26px;
  background: color-mix(in srgb, var(--deep, #5125b6) 10%, #fff);
  color: var(--deep, #5125b6);
  transition: background .15s, transform .1s;
}
.seq-key:hover { background: color-mix(in srgb, var(--deep, #5125b6) 20%, #fff); }
.seq-key:active { transform: scale(.94); }
.seq-feedback { min-height: 24px; margin-top: 14px; font-size: 19px; font-weight: bold; }
.seq-feedback.ok { color: #2f855a; }
.seq-feedback.bad { color: #e3342f; }

/* shared result / restart */
.game-result { font-size: 22px; line-height: 1.5; margin: 8px 0 20px; color: var(--lng-ink); }
.game-restart {
  background: var(--deep, #5125b6);
  color: #fff;
  font-family: "PloniMaccabiMLv2AAA-Bold", sans-serif;
  font-weight: bold;
  font-size: 18px;
  padding: 13px 30px;
  border-radius: 100px;
  margin-top: 8px;
}

/* more worlds */
.world-more { background: var(--lng-white); padding: 64px 0; }
.more-worlds-row {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 40px;
}
.more-world-card {
  width: 300px;
  height: 240px;
  border-radius: 16px;
  background: var(--bg);
  color: var(--deep);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-bottom: 28px;
  overflow: hidden;
  transition: transform .2s ease;
}
.more-world-card.is-solid { color: #eaebff; }
.more-world-card:hover { transform: translateY(-5px); }
.more-world-icon { display: flex; align-items: center; justify-content: center; width: 100%; }
.more-world-icon svg { width: 92px; height: 92px; display: block; }
.more-world-icon img { width: 78%; height: auto; max-height: 150px; display: block; }
.more-world-name {
  font-family: "PloniMaccabiMLv2AAA-Bold", sans-serif;
  font-weight: bold;
  font-size: 36px;
}

/* ===================== FOOTER ===================== */
.main-footer {
  background: var(--lng-blue);
  padding: 56px 20px;
}
.footer-container {
  display: flex;
  gap: 28px;
  justify-content: center;
  align-items: center;
}
.footer-link {
  color: #fff;
  font-family: "PloniMaccabiMLv2AAA-Bold", sans-serif;
  font-weight: bold;
  font-size: 18px;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ===================== MOBILE STICKY CTA ===================== */
.mobile-sticky-cta { display: none; }
.sticky-cta-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--lng-blue);
  color: #fff;
  border-radius: 100px;
  padding: 16px;
  font-family: "PloniMaccabiMLv2AAA-Bold", sans-serif;
  font-weight: bold;
  font-size: 18px;
}
.sticky-cta-btn svg { width: 16px; height: 16px; }

/* Desktop side CTA — vertical tab pinned to the left edge, vertically centered */
.side-cta {
  position: fixed;
  left: 0;
  top: 50%;
  z-index: 95;
  background: var(--lng-blue);
  color: #fff;
  border-radius: 0 14px 14px 0;
  box-shadow: 3px 3px 16px rgba(0,0,0,.22);
  cursor: pointer;
  transform: translateY(-50%);
  transition: transform .25s ease, background .2s ease;
  /* a few attention peeks on load, then settle (stays clickable) */
  animation: side-cta-peek 1.5s ease-in-out 1.2s 3 both;
}
.side-cta:hover { background: var(--lng-navy); transform: translateY(-50%) translateX(6px); }
@media (prefers-reduced-motion: reduce) { .side-cta { animation: none; } }
.side-cta span {
  display: block;
  writing-mode: vertical-rl;
  padding: 26px 14px;
  font-family: "PloniMaccabiMLv2AAA-Bold", sans-serif;
  font-weight: bold;
  font-size: 19px;
  letter-spacing: 0;
  white-space: nowrap;
}
.side-cta:hover { background: var(--lng-navy); }
@keyframes side-cta-peek {
  0%, 100% { transform: translateY(-50%) translateX(0); }
  50%      { transform: translateY(-50%) translateX(7px); }
}

/* ===================== REVEAL ANIMATION ===================== */
.reveal {
  opacity: 1;
  transform: none;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ===================== RESPONSIVE / LAPTOP ===================== */
@media (min-width: 769px) and (max-width: 1919px) {
  .section-inner,
  .world-hero-inner { padding: 0 64px; }

  .section-title { font-size: 34px; }

  .world-hero { padding: 48px 0; }
  .world-hero-inner { gap: 48px; align-items: flex-start; }
  .world-hero-mark { height: 100px; }
  .world-hero-video { flex: 0 0 340px; max-width: 340px; }
  .world-title { font-size: 60px; margin-bottom: 18px; }
  .world-hero-p { font-size: 21px; }

  .more-worlds-row { flex-wrap: nowrap; gap: 16px; }
  .more-world-card { width: auto; flex: 1 1 0; min-width: 0; max-width: 300px; }
  .more-world-name { font-size: 26px; }

  .service-card-title { font-size: 24px; }
  .service-card-desc { font-size: 19px; }
  .pill-cta { font-size: 19px; padding: 12px 24px; }

  .article-card-title { font-size: 21px; }
  .more-world-name { font-size: 30px; }
  .games-text { font-size: 26px; }
}

/* mid-size screens: shrink the (1000px) worlds circle so it never overflows */
@media (min-width: 769px) and (max-width: 1120px) {
  .worlds-circle { zoom: 0.74; }
}

/* ===================== RESPONSIVE / MOBILE ===================== */
@media (max-width: 768px) {
  .section-inner { padding: 0 20px; }
  .section-title { font-size: 30px; }

  .site-header { height: 96px; padding: 0 16px; }
  /* home: logo a touch bigger and aligned to the page's right edge (RTL start) */
  body.view-home .site-header { justify-content: flex-start; }
  .site-logo-full { display: none; }      /* hide padded logo on mobile */
  .site-logo-tight { display: block; }     /* show tight logo so it sits flush right */
  .site-logo img { height: 56px; }
  .back-btn { right: 16px; font-size: 16px; }
  .header-join { display: none !important; }

  .home-hero { padding: 32px 16px 4px; text-align: right; }
  .home-title { font-size: 48px; }
  .home-title span { font-size: inherit; }
  .home-subtitle { font-size: 22px; }
  .home-lead { font-size: 18px; line-height: 1.4; }
  .worlds-heading { font-size: 28px; margin: 32px 0 8px; padding: 0 16px 0 0; text-align: right; }

  /* worlds chooser stays a scaled circle (like desktop) */
  .worlds-circle {
    position: relative;
    width: 95%;
    max-width: 400px;
    height: 400px;
    margin: 0 auto;
    display: block;
    padding: 0;
  }
  .worlds-ring { display: block; }
  .worlds-ring-1 { width: 150px; height: 150px; }
  .worlds-ring-2 { width: 235px; height: 235px; }
  .worlds-ring-3 { width: 320px; height: 320px; }
  .worlds-center {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    margin: 0;
  }
  .world-card {
    position: absolute;
    width: 128px;
    height: 128px;
    border-radius: 16px;
    gap: 10px;
    padding: 10px;
  }
  .world-card.pos-top       { top: 0;    left: 50%; transform: translateX(-50%) rotate(-4deg); }
  .world-card.pos-right     { top: 32%;  right: 0;   transform: rotate(5deg); }
  .world-card.pos-btm-right { bottom: 0; right: 12%; transform: rotate(-5deg); }
  .world-card.pos-btm-left  { bottom: 0; left: 12%;  transform: rotate(5deg); }
  .world-card.pos-left      { top: 32%;  left: 0;    transform: rotate(-5deg); }
  .world-card-icon svg { width: 60px; height: 60px; }
  .world-card-name { font-size: 19px; }

  /* compact world header: logo just above title, back tight under the logo */
  body.view-world .site-header { padding: 8px 20px 0; gap: 10px; }
  body.view-world .world-hero { padding-top: 8px; }

  .world-hero { padding: 24px 0 28px; }
  .world-hero-inner { flex-direction: column-reverse; gap: 24px; padding: 0 20px; align-items: stretch; }
  .world-hero-video { flex-basis: auto; width: 100%; max-width: 300px; margin: 0 auto; aspect-ratio: 9 / 16; }
  .world-title { font-size: 52px; margin-bottom: 16px; }
  .world-hero-p { font-size: 18px; }
  /* mobile hero icon: top-left, line reaching the screen edge */
  .world-hero-mark { display: none; }
  .world-hero-mark-mobile {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: auto;
    bottom: auto;
    width: 130px;
    height: auto;
    pointer-events: none;
    z-index: 0;
  }
  .world-hero-text { padding-top: 44px; }
  /* no video: drop the title/text below the top-left icon so they don't overlap */
  .world-hero-inner:has(.world-hero-video.is-placeholder) .world-hero-text { padding-top: 110px; }
  .world-services, .world-articles, .world-games, .world-more { padding: 40px 0; }
  .services-row { gap: 16px; margin-top: 24px; }
  .service-card { width: 100%; min-width: 0; }
  .service-card-img { height: 160px; }
  .service-card-title { font-size: 25px; }
  .service-card-desc { font-size: 18px; }
  /* keep CTA labels on a single line on every mobile width */
  .pill-cta {
    align-self: stretch;
    justify-content: center;
    white-space: nowrap;
    font-size: clamp(13px, 4vw, 18px);
    padding: 13px 14px;
  }
  .game-card-cta, .sticky-cta-btn { white-space: nowrap; }

  .articles-head { margin-bottom: 20px; }
  /* all article sections: horizontal swipe (drag), no arrows — consistent on mobile */
  .articles-row,
  .articles-row:not(.is-carousel) { overflow-x: auto; flex-wrap: nowrap; scroll-snap-type: x mandatory; -ms-overflow-style:none; scrollbar-width:none; }
  .articles-row::-webkit-scrollbar { display: none; }
  .article-card { flex: 0 0 300px; scroll-snap-align: start; }
  .carousel-nav { display: none; }
  .article-card-title { font-size: 20px; }

  .games-text { font-size: 24px; }

  .more-worlds-row {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 16px;
    margin-top: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding-bottom: 10vw;
  }
  .more-worlds-row::-webkit-scrollbar { display: none; }
  .more-world-card { flex: 0 0 200px; width: 200px; height: 200px; scroll-snap-align: start; }
  .more-world-name { font-size: 26px; }

  .main-footer { padding: 28px 16px; }

  /* desktop side tab is replaced by the bottom sticky CTA on mobile */
  .side-cta { display: none; }

  /* sticky CTA visible on every mobile view (Figma shows it on the home frame too) */
  .mobile-sticky-cta {
    display: block;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 60;
    background: #fff;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
    box-shadow: 0 -2px 14px rgba(0,0,0,.12);
  }
  .sticky-cta-btn { min-height: 55px; padding: 14px; }
  /* keep the last content clear of the fixed 95px bar */
  .main-footer { padding-bottom: calc(28px + 95px); }
}