/* homepage.css – Landing page (first-time user) & Calendar page shared layout
   Fonts: MosesDisplay_1.0 (Bold + Regular), MosesText_Inter — @font-face in global.css
*/

.hidden { display: none !important; }

/* ─── Shared page background ─────────────────────────────────────────── */
/*
  Figma node 13:17082 — two SVG groups both define a 54px graph-paper grid
  (stroke-opacity: 0.5, black lines on #e2e3e4).
  Reproduced here in pure CSS so the pattern tiles seamlessly at any size.

  Responsive cell size:
    clamp(min, preferred, max)
    • preferred = 4.22vw  →  54px at 1280px viewport  (54 / 1280 × 100)
    • max       = 54px    →  never larger than Figma spec
    • min       = 20px    →  stays legible on tiny screens
*/
.page-home {
  position: relative; /* establishes containing block for the body-level .phone-mockup */
  min-height: 100vh;
  overflow-x: clip;
  overflow-y: auto;
  background-color: #e2e3e4;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.5) 1px, transparent 1px);
  background-size:
    clamp(20px, 4.22vw, 54px) clamp(20px, 4.22vw, 54px);
  background-position: top left;
  font-family: var(--font-body);
  --desktop-stage-height: var(--app-available-height);
  --home-scale: clamp(0.78, min(calc((100vw - 48px) / 1248), calc(var(--desktop-stage-height) / 720px)), 1.85);
  --landing-card-scale: clamp(0.72, min(calc((100vw - 220px) / 1032px), calc((var(--desktop-stage-height) - 28px) / 640px)), 1.38);
  --calendar-card-scale: clamp(0.68, min(calc((100vw - 320px) / 648px), calc((var(--desktop-stage-height) - 72px) / 594px)), 1.75);
  --landing-card-width: calc(524px * var(--landing-card-scale));
  --landing-card-frame-height: calc(243px * var(--landing-card-scale));
  --calendar-card-width: calc(648px * var(--calendar-card-scale));
  --calendar-card-height: calc(594px * var(--calendar-card-scale));
  --desktop-calendar-top-gap: clamp(24px, 4vh, 56px);
  --desktop-calendar-right-gap: clamp(20px, 4vw, 72px);
  --desktop-phone-scale: clamp(0.6, min(calc((100vw - var(--landing-card-width) - 108px) / 650px), calc((var(--desktop-stage-height) + 92px) / 929px)), 1.7);
  --phone-hinge-origin-x: 63%;
  --phone-hinge-origin-y: 88%;
  --desktop-top-gap: 112px;
  --desktop-bottom-gap: clamp(24px, 4vh, 72px);
  --desktop-right-gap: 108px;
  --desktop-landing-left-reserve: max(250px, calc(188px + (248px * var(--desktop-phone-scale))));
  --desktop-calendar-left-reserve: max(270px, calc(206px + (258px * var(--desktop-phone-scale))));
  --desktop-phone-left: clamp(-220px, calc(-170px + 4vw), -56px);
  --desktop-phone-top: clamp(32px, calc(72px - ((1280px - 100vw) * 0.08)), 92px);
  --select-hand-scale: clamp(0.92, min(calc(var(--desktop-stage-height) / 720px), calc((100vw - 48px) / 1280px)), 1.55);
  --cal-tile-size: calc(60px * var(--calendar-card-scale));
  --cal-grid-gap: calc(15px * var(--calendar-card-scale));
  --cal-grid-side-pad: calc(15px * var(--calendar-card-scale));
  --cal-scrollbar-top: calc(17.64px * var(--calendar-card-scale));
  --cal-scrollbar-left: calc(521px * var(--calendar-card-scale));
  --cal-scrollbar-width: calc(23px * var(--calendar-card-scale));
  --cal-scrollbar-height: calc(305px * var(--calendar-card-scale));
  --deco-scrollbar-track-width: calc(17px * var(--calendar-card-scale));
  --deco-scrollbar-track-left: calc((var(--cal-scrollbar-width) - var(--deco-scrollbar-track-width)) / 2);
  --deco-scrollbar-thumb-width: var(--cal-scrollbar-width);
  --deco-scrollbar-thumb-height: calc(107px * var(--calendar-card-scale));
}

.home-stage {
  position: relative;
  width: 100%;
  min-height: var(--desktop-stage-height);
  overflow: hidden;
  isolation: isolate;
}

/* ─── Homepage header balance overrides ──────────────────────────────── */
.page-home {
  --home-header-content-width: 1294px;
  --home-header-edge-pad: 22px;
}

@media (min-width: 768px) {
  .page-home .site-header-bar {
    position: relative;
    width: min(calc(100% - 32px), var(--home-header-content-width));
    height: 100%;
    margin: 0 auto;
  }

  .page-home .header-logos {
    inset: 0;
  }

  .page-home .header-haatar-logo {
    right: var(--home-header-edge-pad);
  }

  .page-home .header-ynet-group {
    right: calc(var(--home-header-edge-pad) + 97px);
  }
}

@media (min-width: 744px) and (max-width: 1024px) and (orientation: portrait) {
  .page-home {
    --home-header-content-width: clamp(820px, calc(100vw - 56px), 980px);
    --home-header-edge-pad: clamp(14px, 1.8vw, 20px);
  }
}

@media (min-width: 744px) and (max-width: 799px) and (orientation: portrait) {
  .page-home {
    --home-header-content-width: calc(100% - 28px);
    --home-header-edge-pad: 12px;
  }
}

@media (min-width: 800px) and (max-width: 834px) and (orientation: portrait) {
  .page-home {
    --home-header-content-width: calc(100% - 34px);
    --home-header-edge-pad: 14px;
  }
}

@media (min-width: 835px) and (max-width: 1024px) and (orientation: portrait) {
  .page-home {
    --home-header-content-width: calc(100% - 40px);
    --home-header-edge-pad: clamp(14px, 1.8vw, 18px);
  }
}

@media (min-width: 1137px) {
  .page-home {
    /* Cap at Figma's 1294px — same as game page; prevents bar growing beyond
       reference width and spreading social icons/logos apart on wide screens. */
    --desktop-phone-left: 8px;
    --home-header-content-width: 1294px;
    --home-header-edge-pad: 22px;
  }
}

@media (min-width: 1280px) {
  .page-home {
    /* Figma node 276:3412 in the 1280 desktop frame sits at x=-95, y=64 and
       renders at 674.1249×777. Interpolate toward the wide-screen desktop so
       the mockup stays clear of the header instead of scaling up from viewport
       height. */
    --landing-card-scale: 1;
    --desktop-phone-scale: clamp(0.83638, calc(0.83638 + ((100vw - 1280px) * 0.00024673)), 0.99429);
    --desktop-phone-left: clamp(-95px, calc(-95px + ((100vw - 1280px) * 0.0859375)), -40px);
    --desktop-phone-top: clamp(-4px, calc(-4px + ((100vw - 1280px) * 0.05625)), 32px);
    --calendar-card-scale: 1;
    --desktop-calendar-top-gap: 20px;
    --desktop-calendar-right-gap: 37px;
  }

  .page-home .site-header-bar {
    width: 100%;
    max-width: none;
  }

  .page-home .header-haatar-logo {
    right: var(--header-logo-haatar-right);
  }

  .page-home .header-ynet-group {
    right: var(--header-logo-ynet-right);
  }
}

@media (min-width: 744px) and (max-width: 1024px) and (orientation: portrait) {
  html:not([data-returning]) .page-home:has(#view-landing:not(.hidden)) .pm-clip {
    display: block !important;
    inset: 0;
    bottom: 0;
    overflow: clip;
  }

  html:not([data-returning]) .page-home:has(#view-landing:not(.hidden)) .phone-mockup {
    top: calc(31px + (328px * var(--responsive-mobile-scale)) + var(--tablet-landing-phone-gap) + var(--tablet-landing-phone-top-bleed)) !important;
    left: 50% !important;
    transform: translateX(-50%) scale(var(--tablet-landing-scale)) !important;
    animation: pm-hinge-swing 0.82s cubic-bezier(0.22, 1, 0.36, 1) 0.8s 1 forwards !important;
  }
}

@media (min-width: 960px) and (max-width: 1200px) and (max-height: 834px) and (orientation: landscape) {
  html:not([data-returning]) .page-home:has(#view-landing:not(.hidden)) .pm-clip {
    display: block !important;
  }

  html:not([data-returning]) .page-home:has(#view-landing:not(.hidden)) .landing-main {
    padding-left: clamp(300px, 32vw, 360px) !important;
  }
}

@media (min-width: 961px) and (max-width: 1200px) and (max-height: 834px) and (orientation: landscape) {
  html:not([data-returning]) .page-home:has(#view-landing:not(.hidden)) .phone-mockup {
    left: -128px !important;
    top: -250px !important;
    transform: none !important;
    scale: 0.68 !important;
    animation: pm-hinge-swing 0.82s cubic-bezier(0.22, 1, 0.36, 1) 0.8s 1 forwards !important;
  }

  html:not([data-returning]) .page-home:has(#view-landing:not(.hidden)) .select-hand-clip {
    display: none !important;
  }
}

@media (min-width: 960px) and (max-width: 1024px) and (max-height: 700px) and (orientation: landscape) {
  html:not([data-returning]) .page-home:has(#view-landing:not(.hidden)) .phone-mockup {
    left: -228px !important;
    top: -520px !important;
    transform: none !important;
    scale: 0.5 !important;
  }
}

@media (min-width: 1920px) {
  .page-home {
    --landing-card-scale: 1.2;
    --desktop-phone-scale: 1.10;
    --desktop-phone-left: 172px;
    --desktop-phone-top: 128px;
    --select-hand-scale: 1.2;
    /* Wide desktop should upscale the calendar card and all of its internal
       pixel-positioned elements instead of freezing at the 1280px size. */
    --calendar-card-scale: 1.25;
    --desktop-top-gap: 148px;
    --desktop-right-gap: 178px;
    --desktop-landing-left-reserve: max(380px, calc(250px + (280px * var(--desktop-phone-scale))));
    --desktop-calendar-top-gap: 56px;
    --desktop-calendar-right-gap: 178px;
    --home-header-content-width: 100%;
  }
}

/* ─── LANDING VIEW ────────────────────────────────────────────────────── */
.view-landing {
  display: flex;
  flex-direction: column;
  position: relative; /* needed for ::after overlay positioning */
  /* Figma root frame is exactly viewport-sized and clips children.
     overflow: hidden prevents the phone mockup's bg layer (916px tall)
     from creating a vertical scrollbar. */
  min-height: var(--desktop-stage-height);
  overflow: hidden;
}

/* ── Bottom-edge overlay — mimics the Figma frame boundary clipping the hand.
   Reproduces the exact same background (grid + #e2e3e4) as the page, placed
   at the very bottom so it covers the wrist/palm area of the phone mockup.
   z-index: 2 puts it above the phone (z:1) but the 150px height keeps it
   well below the landing card which sits in the upper portion of the view. ── */
.view-landing::after {
  display: none;
}

.landing-main {
  flex: 1;
  display: flex;
  /*
   * Figma (1280×841): header=88px, card top=180px → card is 92px below header.
   * Header in the actual site is 68px, so the landing content starts 112px
   * below landing-main to place the card at the Figma desktop Y position.
   * RTL: justify-content flex-start = physical RIGHT side = away from phone.
   */
  align-items: flex-start;
  justify-content: flex-start;
  position: relative;
  /*
   * overflow: hidden — clips the phone mockup at the body edge
   * and prevents the 916px tall bg layer from creating a scrollbar.
   */
  overflow: hidden;
  /*
   * Figma (1280-canvas): card top = 180px from page top, header = 68px
   *   → padding-top = 180 − 68 = 112px
   * Figma card right edge at 1172px = 108px from right edge.
   *   → padding-right = 108px (RTL flex-start → content hugs physical right)
   */
  padding-top: var(--desktop-top-gap);
  padding-right: var(--desktop-right-gap);
  padding-bottom: var(--desktop-bottom-gap);
  padding-left: var(--desktop-landing-left-reserve);
  min-height: var(--desktop-stage-height);
}

/* ─── Phone mockup — Figma node 276:3412 "phone_mockup_newspaper"
   Exact canvas size: 674.12 × 777 px
   Positioned absolutely on the physical-left side of the landing layout.
   overflow: visible so the large halftone background can bleed outward.
──────────────────────────────────────────────────────────────────────── */
/* ── Phone mockup clip ────────────────────────────────────────────────
   Covers full page-home area EXCEPT the bottom 68px (white bar).
   overflow:hidden clips the phone canvas at the grid/white-bar boundary
   without relying on cross-context z-index stacking.
   Same pattern as .select-hand-clip.
   Mobile: no white bar → bottom: 0 (see media query below).
────────────────────────────────────────────────────────────────────── */
.pm-clip {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.phone-mockup {
  position: absolute;
  /*
   * Figma node 276:3412 in the 1280 desktop frame is placed at x=-95, y=64.
   * The live site uses the 806×929 source canvas, so we match the Figma size by
   * scaling to 674.1249×777 at 1280px and interpolate that placement on wide desktop.
   */
  left: var(--desktop-phone-left);
  top: var(--desktop-phone-top);
  bottom: auto;
  /* Natural Figma canvas — all child layer px values are relative to this */
  width: 806px;
  height: 929px;
  /*
   * Responsive scaling: scale the ENTIRE 4-layer composition as one unit.
   *
   *   Height : (viewport - 64px) / 929px  (64px = amount phone bleeds into header)
   *   Width  : leave 695px for the widest card
   *            → (100vw − 695px) / 806px
   *
   * Clamp: [0.40 … 1.00]
   */
  transform-origin: var(--phone-hinge-origin-x) var(--phone-hinge-origin-y);
  transform: scale(var(--desktop-phone-scale));
  /*
   * Hinge swing animation — Figma: all inner layers are at -13.91deg (tilted start).
  * CSS `rotate` composes independently with scale(), sharing a wrist-side pivot.
   * 0deg      = current tilted state (start)
   * 13.91deg  = upright/settled end-state that counteracts the inner -13.91deg tilt
   * The swing overshoots slightly, rebounds, then settles once.
   */
  rotate: 0deg;
  animation: pm-hinge-swing 0.82s cubic-bezier(0.22, 1, 0.36, 1) 0.8s 1 forwards;
  pointer-events: none;
  user-select: none;
  overflow: hidden;
  will-change: rotate;
  /* z-index managed by .pm-clip parent */
}

@keyframes pm-hinge-swing {
  0%   { rotate: 0deg; }
  62%  { rotate: 15.2deg; }
  82%  { rotate: 12.9deg; }
  100% { rotate: 13.91deg; }
}

/* ── Layer 1: halftone hand+phone background ──────────────────────────
   Figma node 373:2221 (I373:2221;276:3403): wrapper left=-200 top=-84,
   1005.751×1095.563px. Inner: rotate(166.09deg) scaleY(-1).
   Image: 806×929px, object-cover.
───────────────────────────────────────────────────────────────────────*/
.pm-bg-wrapper {
  position: absolute;
  left: -200px;
  top: -84px;
  width: 1005.751px;
  height: 1095.563px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pm-bg-inner {
  flex: none;
  transform: rotate(166.09deg) scaleY(-1);
}
.pm-bg-img {
  display: block;
  width: 806px;
  height: 929px;
  object-fit: cover;
}

/* ── Layer 2: newspaper front-page shown on phone screen ──────────────
   Figma node 373:2221 (I373:2221;276:3404): wrapper 326.092×404.221px
     center at (50%−84.62px, 50%−104.49px) + translate(-50%,-50%)
   Pre-computed top-left in 806×929 canvas:
     left = 806/2 − 84.62 − 326.092/2 = 403 − 84.62 − 163.046 = 155.334px
     top  = 929/2 − 104.49 − 404.221/2 = 464.5 − 104.49 − 202.11 = 157.9px
   Inner: rotate(-13.91deg)   Image: 248×355px
───────────────────────────────────────────────────────────────────────*/
.pm-newspaper-wrapper {
  position: absolute;
  left: 155.334px;
  top: 157.9px;
  width: 326.092px;
  height: 404.221px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pm-newspaper-inner {
  flex: none;
  transform: rotate(-13.91deg);
}
.pm-newspaper-img {
  display: block;
  width: 248px;
  height: 355px;
  object-fit: cover;
}

/* ── Layer 3: phone top notch / speaker bar ───────────────────────────
   Figma node 373:2221 (I373:2221;276:3405): wrapper left=129.06 top=75.67,
   281.315×142.581px. Inner: rotate(-13.91deg)
   Bar: 270×80px, border-radius: 35px 35px 0 0
───────────────────────────────────────────────────────────────────────*/
.pm-notch-wrapper {
  position: absolute;
  left: 129.06px;
  top: 75.67px;
  width: 281.315px;
  height: 142.581px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pm-notch-inner {
  flex: none;
  transform: rotate(-13.91deg);
}
.pm-notch {
  width: 270px;
  height: 80px;
  background: #000;
  border-radius: 35px 35px 0 0;
}

/* ── Layer 4: phone bottom chin rectangle ─────────────────────────────
   Figma node 373:2221 (I373:2221;276:3406): wrapper left=237.79 top=501.76,
   271.075×160.088px. Inner: rotate(-13.91deg) scaleY(-1)   SVG: 254×102px
───────────────────────────────────────────────────────────────────────*/
.pm-chin-wrapper {
  position: absolute;
  left: 237.79px;
  top: 501.76px;
  width: 271.075px;
  height: 160.088px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pm-chin-inner {
  flex: none;
  transform: rotate(-13.91deg) scaleY(-1);
}
.pm-chin-img {
  display: block;
  width: 254px;
  height: 102px;
}

/* ─── Landing card ────────────────────────────────────────────────────── */
.landing-card {
  position: relative;
  top: 0;
  width: var(--landing-card-width);
  max-width: none;
  z-index: 3; /* above the ::after bottom overlay (z:2) */
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Frame 9: exact 524×243 px container, children are absolutely positioned */
.card-info-frame {
  position: relative;
  width: 100%;
  height: var(--landing-card-frame-height);
}

/* ── Border outer frame ──
   Figma: left=−5px, top=0, 524×243px
   scaleY(−1) rotate(180deg) ≡ scaleX(−1) = horizontal mirror */
.card-frame-outer {
  position: absolute;
  top: 0;
  left: calc(-5px * var(--landing-card-scale));
  width: 100%;
  height: 100%;
  object-fit: fill;
  transform: scaleX(-1);
  pointer-events: none;
}

/* ── Border inner frame ──
   Figma: left=28.81px, top=25.7px, 456.387×183.418px, same flip */
.card-frame-inner {
  position: absolute;
  top: calc(25.7px * var(--landing-card-scale));
  left: calc(28.81px * var(--landing-card-scale));
  width: calc(456.387px * var(--landing-card-scale));
  height: calc(183.418px * var(--landing-card-scale));
  object-fit: fill;
  transform: scaleX(-1);
  pointer-events: none;
}

/* ── עליינו logo ──
   Figma: left=211px (≈ centred in 524px), top=30px, 97×42px */
.card-logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(30px * var(--landing-card-scale));
  width: calc(97px * var(--landing-card-scale));
  height: calc(42px * var(--landing-card-scale));
  display: block;
}

/* ── Title row ──
   Figma: left=39px, top=98px, flex gap=15px, items-center, justify-center
   RTL flex: h1 first → physical right; ynet logo second → physical left */
.card-title-row {
  position: absolute;
  left: calc(39px * var(--landing-card-scale));
  right: calc(39px * var(--landing-card-scale));
  top: calc(98px * var(--landing-card-scale));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(15px * var(--landing-card-scale));
  flex-wrap: nowrap;
  width: auto;
  margin-inline: auto;
}

.card-title {
  font-family: 'MosesText_Inter', 'Rubik', Arial, sans-serif;
  font-size: calc(35px * var(--landing-card-scale));
  font-weight: 700;
  color: #273999;
  line-height: calc(35px * var(--landing-card-scale));
  text-align: right;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Ynet logo – single 70×30 px SVG */
.card-ynet-logo {
  display: block;
  flex-shrink: 0;
  width: calc(70px * var(--landing-card-scale));
  height: calc(30px * var(--landing-card-scale));
}

/* ── Description ──
   Figma: MosesDisplay_1.0 Regular, 20px, line-height normal, color #000001
   Position: centered at left=259.5px (50% of 524px), top=141px, width=435px */
.card-description {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(141px * var(--landing-card-scale));
  width: calc(435px * var(--landing-card-scale));
  font-family: 'MosesText_Inter', var(--font-body);
  font-weight: 400;
  font-size: calc(20px * var(--landing-card-scale));
  line-height: normal;
  color: #000001;
  text-align: center;
  white-space: normal;
}

/* ── CTA button row – sits below the 243px frame ── */
.card-cta {
  display: flex;
  justify-content: center;
  padding-top: calc(20px * var(--landing-card-scale));
  width: 100%;
}

/* ─── Start-game button ─────────────────────────────────────────────────
   Figma node 774:3182 — Layer_1, 150×50px
   3 layers: outer frame SVG (bleed), inner frame SVG (offset), text (inset %)
   Text 774:3189: MosesText_Inter Bold 18/18.65, inset 24% 9.33% 38% 10%
   ──────────────────────────────────────────────────────────────────────── */
.btn-start-game {
  position: relative;
  display: block;
  width: calc(150px * var(--landing-card-scale));
  height: calc(50px * var(--landing-card-scale));
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: opacity 150ms, transform 100ms;
}
.btn-start-game:hover  { opacity: 0.88; transform: translateY(-1px); }
.btn-start-game:active { transform: translateY(0); }

/* Shared base for both SVG layer images */
.btn-layer {
  position: absolute;
  display: block;
}

/* Outer frame: inset(-0.58% 0.12% 0.58% -0.12%) = slight bleed on top+bottom+left */
.btn-frame-outer {
  top: -0.58%;
  right: 0.12%;
  bottom: 0.58%;
  left: -0.12%;
  width: calc(100% + 0.12% + 0.12%);
  height: calc(100% + 0.58% + 0.58%);
}

/* Inner frame: inset(0 0 12.12% 4.68%) = sits inside, short on bottom, offset left */
.btn-frame-inner {
  top: 0;
  right: 0;
  bottom: 12.12%;
  left: 4.68%;
  width: calc(100% - 4.68%);
  height: calc(100% - 12.12%);
}

/* Text label: Figma 774:3189 inset(24% 9.33% 38% 10%), MosesText_Inter Bold 18/18.65 */
.btn-start-game-text {
  position: absolute;
  top: 24%;
  right: 9.33%;
  bottom: 38%;
  left: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'MosesText_Inter', 'Rubik', Arial, sans-serif;
  font-size: calc(18px * var(--landing-card-scale));
  font-weight: 700;
  font-style: normal;   /* Figma: not-italic */
  color: #000000;
  line-height: calc(18.65px * var(--landing-card-scale));
  white-space: nowrap;
  word-wrap: break-word;
  unicode-bidi: plaintext; /* Figma: dir="auto" — resolves bidi direction from content */
}

/* =======================================================================
   CALENDAR — Calendar card, game tile grid, decorative scrollbar
   (merged from calendar.css)
   Used by:
     • site/homepage.html  → #view-calendar (returning user view)
     • site/calendar.html  → standalone calendar page
   ======================================================================= */

/* ─── Error / feedback message ──────────────────────────────────── */
.error-message {
  padding: 12px 24px;
  background: #fdd;
  color: #700;
  text-align: center;
  font-family: var(--font-body);
  font-size: 16px;
  border-radius: 4px;
}

/* ─── Calendar view container ────────────────────────────────────── */
/*
  Replaces the bare stub in homepage.css.
  Mirrors the .view-landing height/overflow approach.
*/
.view-calendar {
  /* Cap at 720px on tall desktops, same as view-landing */
  position: relative; /* needed for ::after overlay positioning */
  min-height: var(--app-available-height);
  overflow: hidden;
}

/* Lock the page to the available viewport when calendar view is active.
   This prevents page-level vertical/horizontal scroll; only inner calendar
   containers (e.g. .cal-game-board) may scroll. */
.page-home:has(#view-calendar:not(.hidden)) {
  overflow: hidden;
}

.page-home:has(#view-calendar:not(.hidden)) .home-stage {
  height: var(--app-available-height);
  min-height: var(--app-available-height);
  overflow: hidden;
}

.page-home:has(#view-calendar:not(.hidden)) .view-calendar {
  height: 100%;
  min-height: 0;
  overflow-x: clip;
  overflow-y: hidden;
}

.page-home:has(#view-calendar:not(.hidden)) .cal-layout {
  height: 100%;
  min-height: 100%;
  overflow-x: clip;
  overflow-y: hidden;
}

/* ── Bottom-edge overlay — mirrors .view-landing::after.
   Paints the grid pattern over the phone's wrist/palm at the bottom-left,
   giving the "cut off at the bottom" effect from Figma.
   z-index: 2 sits above the phone (z-index: 1) but below the cal-card (z-index: 2
   scoped inside cal-layout, which has its own stacking context). ── */
.view-calendar::after {
  display: none;
}

/* ─── Calendar layout ─────────────────────────────────────────────
   Mirrors landing-main flex layout:
     • phone mockup is absolutely positioned on the physical-left
     • cal-card sits in the flex container at the physical-right (RTL start)

   Figma: cal-card top = 88px from page top, header ≈ 68px → 20px from main top.
   Right margin: 1280 − (595 + 648) ≈ 37px.
──────────────────────────────────────────────────────────────────── */
.cal-layout {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;   /* RTL → physical right side */
  position: relative;
  overflow: visible; /* phone is at body level; overflow:hidden here was clipping the phone */
  padding-top: var(--desktop-calendar-top-gap);
  padding-right: var(--desktop-calendar-right-gap);
  padding-bottom: var(--desktop-bottom-gap);
  padding-left: 0;
  min-height: var(--desktop-stage-height);
}

/* ─── Calendar card ───────────────────────────────────────────────
   Figma node 373:2162 — 648 × 594 px.
   All children are absolutely positioned within this box.
──────────────────────────────────────────────────────────────────── */
.cal-card {
  position: relative;
  width: var(--calendar-card-width);
  max-width: none;
  height: var(--calendar-card-height);
  z-index: 3; /* above .view-calendar::after overlay (z-index: 2) */
  overflow: visible;
}

/* ── Rectangle 24 background ──
   Figma node 373:2164 — full 648×594 background image, placed at 0,0.
   Figma transform: -scale-y-100 + rotate-180 = scaleX(-1).
   max-width/max-height: none overrides the global img { max-width: 100% }. */
.cal-card-frame-outer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: fill;
  transform: scaleX(-1);
  pointer-events: none;
  z-index: 0;
}

/* ── Inner border frame (inset from outer) */
.cal-card-frame-inner {
  position: absolute;
  top: calc(20px * var(--calendar-card-scale));
  left: calc(24px * var(--calendar-card-scale));
  width: calc(100% - (48px * var(--calendar-card-scale)));
  height: calc(100% - (40px * var(--calendar-card-scale)));
  max-width: none;
  max-height: none;
  object-fit: fill;
  transform: scaleX(-1);
  pointer-events: none;
  z-index: 0;
}

@media (min-width: 768px) {
  .cal-card-frame-inner {
    display: none;
  }
}

@media (min-width: 744px) and (max-width: 1024px) and (orientation: portrait) {
  .page-home {
    --responsive-mobile-scale: clamp(1.04, min(calc((100vw - 48px) / 350px), calc((100vh - 220px) / 860px)), 1.5);
    background-size: 39px 39px;
    overflow-x: clip;
    overflow-y: auto;
  }

  .home-stage {
    min-height: var(--app-available-height);
    overflow: visible;
  }

  .view-landing,
  .view-calendar {
    min-height: var(--app-available-height);
    overflow-x: clip;
    overflow-y: auto;
  }

  .view-landing::after,
  .view-calendar::after,
  .select-hand-clip {
    display: none;
  }

  .landing-main {
    position: relative;
    display: block;
    padding: 0 0 48px;
    min-height: calc(930px * var(--responsive-mobile-scale));
    overflow: visible;
  }

  .landing-card {
    position: absolute;
    top: 31px;
    left: 50%;
    width: 350px;
    height: 328px;
    margin: 0;
    transform: translateX(-50%) scale(var(--responsive-mobile-scale));
    transform-origin: top center;
    z-index: 2;
  }

  .card-info-frame {
    width: 350px;
    height: 323px;
    transform: none;
    margin-bottom: 0;
  }

  .card-frame-outer {
    content: url('../assets/images/card-border-outer-landing-mobile.png?v=1791285426');
    left: 0;
    top: 0;
    width: 350px;
    height: 323px;
    max-width: none;
    max-height: none;
    object-fit: fill;
    transform: scaleY(-1);
    pointer-events: none;
  }

  .card-frame-inner {
    content: url('../assets/images/card-border-inner-landing-mobile.svg?v=1791285426');
    left: 22.58px;
    top: 45.03px;
    width: 304.839px;
    height: 243.803px;
    max-width: none;
    max-height: none;
    object-fit: fill;
    transform: scaleY(-1);
    pointer-events: none;
  }

  .card-logo {
    top: 28px;
    left: 50%;
    width: 80px;
    height: 35px;
    transform: translateX(-50%);
  }

  .card-title-row {
    position: absolute;
    top: 87px;
    left: 20px;
    right: 20px;
    width: auto;
    gap: 10px;
  }

  .card-title {
    font-size: 24px;
    line-height: 30px;
    font-weight: 660;
    white-space: nowrap;
  }

  .card-ynet-logo {
    width: 48px;
    height: 20px;
  }

  .card-description {
    position: absolute;
    top: 141px;
    left: 20px;
    width: 313px;
    transform: none;
    font-family: 'MosesText_Inter', var(--font-body);
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
    text-align: center;
  }

  .card-cta {
    position: absolute;
    top: 250px;
    left: 50%;
    padding: 0;
    transform: translateX(-50%);
  }

  .btn-start-game {
    width: 150px;
    height: 50px;
  }

  .btn-start-game-text {
    top: 24%;
    right: 9.33%;
    bottom: 38%;
    left: 10%;
    font-size: 0;
  }

  .btn-start-game-text::after {
    content: 'התחילו לשחק!';
    font-size: 18px;
    line-height: 18.65px;
    font-family: 'MosesText_Inter', var(--font-body);
    font-weight: 700;
    color: #000;
  }

  .pm-clip {
    inset: 0;
    bottom: auto;
    overflow: visible;
  }

  .phone-mockup {
    position: absolute;
    top: 337px;
    left: 50%;
    bottom: auto;
    width: 464.293px;
    height: 535.146px;
    transform: translateX(-51.25%) scale(var(--responsive-mobile-scale));
    transform-origin: top center;
    overflow: visible;
    z-index: 1;
  }

  .pm-bg-wrapper {
    left: -115.21px;
    top: -48.39px;
    width: 579.359px;
    height: 631.094px;
  }

  .pm-bg-img {
    width: 464.293px;
    height: 535.146px;
  }

  .pm-newspaper-wrapper {
    left: 89.474px;
    top: 90.958px;
    width: 187.844px;
    height: 232.85px;
  }

  .pm-newspaper-img {
    width: 142.859px;
    height: 204.496px;
  }

  .pm-notch-wrapper {
    left: 74.34px;
    top: 43.59px;
    width: 162.05px;
    height: 82.133px;
  }

  .pm-notch {
    width: 155.532px;
    height: 46.084px;
    border-radius: 20.162px 20.162px 0 0;
  }

  .pm-chin-wrapper {
    left: 136.98px;
    top: 289.04px;
    width: 156.152px;
    height: 92.218px;
  }

  .pm-chin-img {
    width: 146.316px;
    height: 58.757px;
  }

  .cal-layout {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 33px 0 calc(72px + (140px * (var(--responsive-mobile-scale) - 1)));
    min-height: unset;
    overflow: visible;
  }

  .cal-card {
    position: relative;
    width: 350px;
    max-width: calc(100vw - 20px);
    height: 599px;
    margin: 0 auto;
    transform: scale(var(--responsive-mobile-scale));
    transform-origin: top center;
    overflow: visible;
  }

  .view-calendar .cal-card {
    margin-bottom: calc(599px * (var(--responsive-mobile-scale) - 1));
  }

  .cal-card-frame-outer {
    content: url('../assets/images/card-border-outer-mobile.png?v=1791285426');
    left: 0;
    top: 0;
    width: 350px;
    height: 599px;
    max-width: none;
    max-height: none;
    object-fit: fill;
    transform: scaleY(-1);
  }

  .cal-card-frame-inner {
    content: url('../assets/images/card-border-inner-mobile.svg?v=1791285426');
    left: 22.58px;
    top: 85.33px;
    width: 304.839px;
    height: 461.942px;
    max-width: none;
    max-height: none;
    object-fit: fill;
    transform: scaleY(-1);
    display: block;
  }

  .cal-card-logo {
    top: 30px;
    left: 50%;
    width: 80px;
    height: 35px;
    transform: translateX(-50%);
  }

  .cal-title-row {
    left: 18px;
    right: 18px;
    top: 85px;
    gap: 10px;
    justify-content: center;
  }

  .cal-title {
    font-size: 24px;
    font-weight: 660;
    line-height: 30px;
    white-space: nowrap;
  }

  .cal-ynet-logo {
    width: 48px;
    height: 20px;
  }

  .cal-description {
    top: 135px;
    left: 50%;
    width: 313px;
    height: auto;
    transform: translateX(-50%);
    font-family: 'MosesText_Inter', var(--font-body);
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
  }

  .cal-legend {
    position: absolute;
    left: 50%;
    top: 220px;
    width: 249px;
    height: 57px;
    display: flex;
    flex-direction: row;
    gap: 0;
    align-items: flex-start;
    justify-content: space-between;
    transform: translateX(-50%);
  }

  .cal-legend-item {
    position: relative;
    left: auto;
    top: auto;
    width: 42px;
    height: 57px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .cal-legend-item--completed,
  .cal-legend-item--new,
  .cal-legend-item--locked {
    left: auto;
  }

  .cal-legend-icon {
    position: relative;
    top: auto;
    left: auto;
    width: 21px;
    height: 21px;
  }

  .cal-legend-label {
    background: white;
    position: relative;
    top: auto;
    left: auto;
    margin-top: 4px;
    transform: none;
    white-space: pre-wrap;
  }

  .cal-grid-section {
    position: absolute;
    left: 59px;
    top: 293px;
    width: 287px;
    height: 301px;
    margin: 0;
    overflow: visible;
  }

  .cal-grid-border {
    display: none;
  }

  .cal-game-board {
    position: absolute;
    top: 8px;
    left: 7px;
    width: 209px;
    height: 285px;
    grid-template-columns: repeat(3, 54px);
    column-gap: 20px;
    row-gap: 15px;
    padding: 0;
    max-height: none;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .cal-tile {
    width: 54px;
    height: 54px;
    min-width: 54px;
    padding-bottom: 0;
    overflow: hidden;
  }

  .cal-tile--completed {
    border-width: 2.7px;
    gap: 8.1px;
    padding: 1.8px 19.8px;
    overflow: visible;
  }

  .cal-tile-num,
  .cal-tile--completed .cal-tile-num {
    font-size: 36px;
    line-height: 36px;
  }

  .cal-tile-check {
    width: 18.9px;
    height: 18.9px;
    right: 0;
    bottom: 0;
    left: auto;
    top: auto;
    border-width: 2.7px;
  }

  .cal-tile-check-icon {
    position: absolute;
    left: auto;
    top: auto;
    right: 3.6px;
    bottom: 5.4px;
    width: 11.7px;
    height: 8.1px;
    display: block;
    pointer-events: none;
  }

  .cal-tile-corner--tl { top: 6px; left: 7px; right: auto; bottom: auto; }
  .cal-tile-corner--tr { top: 6px; right: 6px; left: auto; bottom: auto; }
  .cal-tile-corner--bl { bottom: 6px; left: 7px; right: auto; top: auto; }
  .cal-tile-corner--br { bottom: 6px; right: 6px; left: auto; top: auto; }

  .cal-cta {
    right: calc(4px * var(--calendar-card-scale));
    bottom: calc(6px * var(--calendar-card-scale));
    left: auto;
    top: auto;
    left: auto;
    display: flex;
    justify-content: center;
    margin-top: 16px;
    transform: none;
  }

  .page-home:has(#view-calendar:not(.hidden)) .pm-clip {
    display: none;
  }

  .page-home:has(#view-calendar:not(.hidden)) .cal-layout {
    justify-content: center;
    padding-top: clamp(28px, 3.8vh, 44px);
    padding-bottom: 56px;
  }
}

@media (min-width: 744px) and (max-width: 799px) and (orientation: portrait) {
  .page-home {
    --responsive-mobile-scale: clamp(1.08, min(calc((100vw - 22px) / 350px), calc((100vh - 176px) / 860px)), 1.28);
  }

  .landing-main {
    min-height: calc(890px * var(--responsive-mobile-scale));
  }

  .page-home:has(#view-calendar:not(.hidden)) .cal-layout {
    padding-top: 22px;
    padding-bottom: 44px;
  }
}

@media (min-width: 800px) and (max-width: 834px) and (orientation: portrait) {
  .page-home {
    --responsive-mobile-scale: clamp(1.12, min(calc((100vw - 28px) / 350px), calc((100vh - 190px) / 860px)), 1.34);
  }

  .page-home:has(#view-calendar:not(.hidden)) .cal-layout {
    padding-top: 24px;
    padding-bottom: 46px;
  }

  #view-calendar:not(.hidden) .cal-grid-section {
    position: absolute;
    left: 59px;
    top: 293px;
    width: 287px;
    height: 301px;
    margin: 0;
    overflow: visible;
  }

  #view-calendar:not(.hidden) .cal-legend {
    position: absolute;
    left: 50%;
    top: 220px;
    width: 249px;
    height: 57px;
    display: flex;
    flex-direction: row;
    gap: 0;
    align-items: flex-start;
    justify-content: space-between;
    transform: translateX(-50%);
  }

  #view-calendar:not(.hidden) .cal-legend-item {
    position: relative;
    left: auto;
    top: auto;
    width: 54px;
    height: 57px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
  }

  #view-calendar:not(.hidden) .cal-legend-item--completed,
  #view-calendar:not(.hidden) .cal-legend-item--new,
  #view-calendar:not(.hidden) .cal-legend-item--locked {
    left: auto;
  }

  #view-calendar:not(.hidden) .cal-legend-icon {
    position: relative;
    top: auto;
    left: auto;
    width: 21px;
    height: 21px;
  }

  #view-calendar:not(.hidden) .cal-legend-label {
    background: white;
    position: relative;
    top: auto;
    left: auto;
    margin-top: 0;
    width: 54px;
    transform: none;
    text-align: center;
    line-height: 14px;
    white-space: pre-wrap;
  }

  #view-calendar:not(.hidden) .cal-game-board {
    position: absolute;
    top: 8px;
    left: 7px;
    width: 209px;
    height: 285px;
    grid-template-columns: repeat(3, 54px);
    column-gap: 20px;
    row-gap: 15px;
    padding: 0;
    max-height: none;
    overflow-y: auto;
    overflow-x: hidden;
  }

  #view-calendar:not(.hidden) .cal-scrollbar {
    left: auto;
    right: 0;
  }

  #view-calendar:not(.hidden) .cal-tile {
    width: 54px;
    height: 54px;
    min-width: 54px;
    padding-bottom: 0;
    overflow: hidden;
  }

  #view-calendar:not(.hidden) .cal-tile--completed {
    border-width: 2.7px;
    gap: 8.1px;
    padding: 1.8px 19.8px;
    overflow: visible;
  }

  #view-calendar:not(.hidden) .cal-tile-num,
  #view-calendar:not(.hidden) .cal-tile--completed .cal-tile-num {
    font-size: 36px;
    line-height: 36px;
  }
}

@media (min-width: 835px) and (max-width: 1024px) and (orientation: portrait) {
  .page-home {
    --responsive-mobile-scale: clamp(1.16, min(calc((100vw - 34px) / 350px), calc((100vh - 212px) / 860px)), 1.46);
  }

  .page-home:has(#view-calendar:not(.hidden)) .cal-layout {
    padding-top: clamp(24px, 3vh, 36px);
    padding-bottom: 52px;
  }
}

@media (min-width: 800px) and (max-width: 834px) and (min-height: 1112px) and (max-height: 1340px) and (orientation: portrait) {
  #view-calendar:not(.hidden) .cal-title-row {
    left: calc(84px * var(--calendar-card-scale));
    right: calc(84px * var(--calendar-card-scale));
    gap: calc(12px * var(--calendar-card-scale));
  }

  #view-calendar:not(.hidden) .cal-title {
    font-size: calc(32px * var(--calendar-card-scale));
    line-height: calc(32px * var(--calendar-card-scale));
  }

  #view-calendar:not(.hidden) .cal-ynet-logo {
    width: calc(62px * var(--calendar-card-scale));
    height: calc(26px * var(--calendar-card-scale));
  }

  #view-calendar:not(.hidden) .cal-description {
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - (168px * var(--calendar-card-scale)));
    height: auto;
    font-size: calc(18px * var(--calendar-card-scale));
    line-height: calc(24px * var(--calendar-card-scale));
  }

  #view-calendar:not(.hidden) .cal-legend {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: calc(249px * var(--calendar-card-scale));
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }

  #view-calendar:not(.hidden) .cal-legend-item {
    position: relative;
    top: auto;
    left: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: calc(4px * var(--calendar-card-scale));
    width: calc(54px * var(--calendar-card-scale));
    height: calc(57px * var(--calendar-card-scale));
  }

  #view-calendar:not(.hidden) .cal-legend-item--completed,
  #view-calendar:not(.hidden) .cal-legend-item--new,
  #view-calendar:not(.hidden) .cal-legend-item--locked {
    left: auto;
  }

  #view-calendar:not(.hidden) .cal-legend-icon {
    position: relative;
    top: auto;
    left: auto;
  }

  #view-calendar:not(.hidden) .cal-legend-label {
    background: white;
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    margin-top: 0;
    width: calc(54px * var(--calendar-card-scale));
    text-align: center;
    line-height: calc(14px * var(--calendar-card-scale));
  }

  #view-calendar:not(.hidden) .cal-grid-section {
    position: absolute;
    left: 59px;
    top: 293px;
    width: 287px;
    height: 301px;
    margin: 0;
    overflow: visible;
  }

  #view-calendar:not(.hidden) .cal-game-board {
    position: absolute;
    top: 8px;
    left: 7px;
    width: 209px;
    height: 285px;
    grid-template-columns: repeat(3, 54px);
    column-gap: 20px;
    row-gap: 15px;
    padding: 0;
    max-height: none;
    overflow-y: auto;
    overflow-x: hidden;
  }

  #view-calendar:not(.hidden) .cal-scrollbar {
    left: auto;
    right: 0;
  }

  #view-calendar:not(.hidden) .cal-tile {
    width: 54px;
    height: 54px;
    min-width: 54px;
    padding-bottom: 0;
    overflow: hidden;
  }

  #view-calendar:not(.hidden) .cal-tile-num,
  #view-calendar:not(.hidden) .cal-tile--completed .cal-tile-num {
    font-size: 36px;
    line-height: 36px;
  }

  #view-calendar:not(.hidden) .cal-tile--completed {
    border-width: 2.7px;
    gap: 8.1px;
    padding: 1.8px 19.8px;
    overflow: visible;
  }

  #view-calendar:not(.hidden) .cal-tile-check {
    width: 18.9px;
    height: 18.9px;
    right: 0;
    bottom: 0;
    left: auto;
    top: auto;
  }

  #view-calendar:not(.hidden) .cal-tile-check-badge {
    left: 0;
    top: 0;
    width: 18.9px;
    height: 18.9px;
    border-width: 2.7px;
  }

  #view-calendar:not(.hidden) .cal-tile-check-icon {
    left: auto;
    top: auto;
    right: 3.6px;
    bottom: 5.4px;
    width: 11.7px;
    height: 8.1px;
  }
}

@media (min-width: 800px) /*and (max-width: 834px) and 
       (min-height: 1180px)and (max-height: 1340px)*/ and (orientation: portrait)
       {
  .page-home {
    --responsive-mobile-scale: clamp(1.24, min(calc((100vw - 18px) / 350px), calc((100vh - 170px) / 860px)), 1.36);
  }

  .page-home:has(#view-calendar:not(.hidden)) .cal-layout {
    padding-top: 22px;
    padding-bottom: 60px;
  }

  #view-calendar:not(.hidden) .cal-title-row {
    top: 82px;
    left: 16px;
    right: 16px;
    gap: 11px;
  }

  #view-calendar:not(.hidden) .cal-title {
    font-size: 25px;
    line-height: 30px;
  }

  #view-calendar:not(.hidden) .cal-ynet-logo {
    width: 50px;
    height: 21px;
  }

  #view-calendar:not(.hidden) .cal-description {
    top: 130px;
    left: 50%;
    transform: translateX(-50%);
    width: 286px;
    height: auto;
    font-size: 18px;
    line-height: 26px;
  }

  #view-calendar:not(.hidden) .cal-legend {
    top: 224px;
    width: 260px;
  }

  #view-calendar:not(.hidden) .cal-legend-item {
    width: 58px;
    height: 62px;
    gap: 4px;
  }

  #view-calendar:not(.hidden) .cal-legend-icon {
    width: 22px;
    height: 22px;
  }

  #view-calendar:not(.hidden) .cal-legend-label {
    background: white;
    width: 58px;
    font-size: 12px;
    line-height: 15px;
  }
}

@media (width: 820px) and (height: 1180px) and (orientation: portrait) {
  #view-calendar:not(.hidden) .cal-grid-section {
    top: 297px;
  }
}

@media (min-width: 744px) and (max-width: 1024px) and (orientation: portrait) {
  html:not([data-returning]) .page-home {
    --tablet-landing-scale: clamp(1.04, min(calc((100vw - 92px) / 464.293px), calc((100vh - 436px) / 535.146px)), 1.16);
    --tablet-landing-phone-gap: calc(22px * var(--tablet-landing-scale));
    --tablet-landing-phone-top-bleed: calc(100px * var(--tablet-landing-scale));
  }

  html:not([data-returning]) .page-home .landing-main {
    min-height: var(--app-available-height);
    padding-bottom: 0;
  }

  html:not([data-returning]) .page-home .pm-clip {
    inset: 0;
    bottom: 0;
    overflow: clip;
  }

  html:not([data-returning]) .page-home .phone-mockup {
    top: calc(31px + (328px * var(--responsive-mobile-scale)) + var(--tablet-landing-phone-gap) + var(--tablet-landing-phone-top-bleed));
    left: 50%;
    width: 464.293px;
    height: 535.146px;
    transform: translateX(-50%) scale(var(--tablet-landing-scale));
    transform-origin: var(--phone-hinge-origin-x) var(--phone-hinge-origin-y);
    overflow: visible;
  }

  html:not([data-returning]) .page-home .pm-bg-wrapper {
    left: -115.21px;
    top: -48.39px;
    width: 579.359px;
    height: 631.094px;
  }

  html:not([data-returning]) .page-home .pm-bg-img {
    width: 464.293px;
    height: 535.146px;
  }

  html:not([data-returning]) .page-home .pm-newspaper-wrapper {
    left: 89.474px;
    top: 90.958px;
    width: 187.844px;
    height: 232.85px;
  }

  html:not([data-returning]) .page-home .pm-newspaper-img {
    width: 142.859px;
    height: 204.496px;
  }

  html:not([data-returning]) .page-home .pm-notch-wrapper {
    left: 74.34px;
    top: 43.59px;
    width: 162.05px;
    height: 82.133px;
  }

  html:not([data-returning]) .page-home .pm-notch {
    width: 155.532px;
    height: 46.084px;
    border-radius: 20.162px 20.162px 0 0;
  }

  html:not([data-returning]) .page-home .pm-chin-wrapper {
    left: 136.98px;
    top: 289.04px;
    width: 156.152px;
    height: 92.218px;
  }

  html:not([data-returning]) .page-home .pm-chin-img {
    width: 146.316px;
    height: 58.757px;
  }
}

/* Homepage landing tablet portrait matrix: keep the shared tablet portrait
   layout intact, but recenter the phone mockup only in the approved portrait
   matrix entries so the visible hand+phone composition sits evenly under the
   landing card without changing non-matrix portrait breakpoints. */
/*@media (width: 744px) and (height: 1133px) and (orientation: portrait) {
  html:not([data-returning]) .page-home:has(#view-landing:not(.hidden)) .phone-mockup,
  body.page-home:not(.is-returning-user):has(#view-landing:not(.hidden)) .phone-mockup {
    left: calc(50% - 51.83px) !important;
  }
}*/

/*@media (width: 800px) and (height: 1200px) and (orientation: portrait),
       (width: 800px) and (height: 1280px) and (orientation: portrait),
       (width: 800px) and (height: 1340px) and (orientation: portrait),
       (width: 820px) and (height: 1180px) and (orientation: portrait),
       (width: 834px) and (height: 1194px) and (orientation: portrait) {
  html:not([data-returning]) .page-home:has(#view-landing:not(.hidden)) .phone-mockup,
  body.page-home:not(.is-returning-user):has(#view-landing:not(.hidden)) .phone-mockup {
    left: calc(50% + 63.15px) !important;
  }
}*/

@media (width: 744px) and (height: 1133px) and (orientation: portrait) {
  #view-calendar:not(.hidden) .cal-tile-check {
    left: auto;
    top: auto;
    right: 0;
    bottom: 0;
  }

  #view-calendar:not(.hidden) .cal-tile-check-badge {
    left: 0;
    top: 0;
  }

  #view-calendar:not(.hidden) .cal-tile-check-icon {
    left: auto;
    top: auto;
    right: 3.6px;
    bottom: 5.4px;
    width: 11.7px;
    height: 8.1px;
  }
}

@media (width: 1024px) and (height: 1366px) and (orientation: portrait) {
  #view-calendar:not(.hidden) .cal-scrollbar {
    left: auto;
    right: 23px;
    top: 8px;
    width: 23px;
    height: 285px;
  }

  #view-calendar:not(.hidden) .cal-title-row {
    left: 34px;
    right: 34px;
    gap: 8px;
  }

  #view-calendar:not(.hidden) .cal-title {
    font-size: 26px;
    line-height: 28px;
  }

  #view-calendar:not(.hidden) .cal-ynet-logo {
    width: 54px;
    height: 23px;
  }

  #view-calendar:not(.hidden) .cal-description {
    left: 50%;
    transform: translateX(-50%);
    width: 330px;
    height: auto;
    font-size: 16px;
    line-height: 22px;
  }

  #view-calendar:not(.hidden) .cal-grid-section {
    position: absolute;
    left: 59px;
    top: 293px;
    width: 287px;
    height: 301px;
    margin: 0;
    overflow: visible;
  }

  #view-calendar:not(.hidden) .cal-grid-border {
    display: none;
  }

  #view-calendar:not(.hidden) .cal-game-board {
    position: absolute;
    top: 8px;
    left: 7px;
    width: 209px;
    height: 285px;
    grid-template-columns: repeat(3, 54px);
    column-gap: 20px;
    row-gap: 15px;
    padding: 0;
    max-height: none;
    overflow-y: auto;
    overflow-x: hidden;
  }

  #view-calendar:not(.hidden) .cal-tile {
    width: 54px;
    height: 54px;
    min-width: 54px;
    padding-bottom: 0;
    overflow: hidden;
  }

  #view-calendar:not(.hidden) .cal-tile--completed {
    border-width: 2.7px;
    gap: 8.1px;
    padding: 1.8px 19.8px;
    overflow: visible;
  }

  #view-calendar:not(.hidden) .cal-tile-num,
  #view-calendar:not(.hidden) .cal-tile--completed .cal-tile-num {
    font-size: 36px;
    line-height: 36px;
  }

  #view-calendar:not(.hidden) .cal-tile-check {
    left: auto;
    top: auto;
    right: 0;
    bottom: 0;
  }

  #view-calendar:not(.hidden) .cal-tile-check-badge {
    left: 0;
    top: 0;
  }

  #view-calendar:not(.hidden) .cal-tile-check-icon {
    left: auto;
    top: auto;
    right: 3.6px;
    bottom: 5.4px;
    width: 11.7px;
    height: 8.1px;
  }
}

@media (min-width: 960px) and (max-width: 1279px) and (max-height: 1024px) and (orientation: landscape) {
  .page-home {
    --home-header-content-width: min(calc(100% - 32px), 1180px);
    --home-header-edge-pad: clamp(12px, 1.4vw, 18px);
    --landing-card-scale: clamp(0.8, min(calc((100vw - 220px) / 1032px), calc((var(--desktop-stage-height) - 40px) / 640px)), 0.98);
    --calendar-card-scale: clamp(0.74, min(calc((100vw - 280px) / 648px), calc((var(--desktop-stage-height) - 64px) / 594px)), 1);
    --desktop-phone-scale: clamp(0.68, min(calc((100vw - var(--landing-card-width) - 84px) / 650px), calc((var(--desktop-stage-height) + 56px) / 929px)), 0.92);
    --desktop-top-gap: clamp(56px, 8vh, 86px);
    --desktop-right-gap: clamp(24px, 3.2vw, 56px);
    --desktop-calendar-top-gap: clamp(16px, 3vh, 28px);
    --desktop-calendar-right-gap: clamp(18px, 3vw, 48px);
    --desktop-landing-left-reserve: max(250px, calc(170px + (235px * var(--desktop-phone-scale))));
    --desktop-calendar-left-reserve: max(260px, calc(190px + (245px * var(--desktop-phone-scale))));
    --desktop-phone-left: clamp(-92px, calc(-82px + 2.8vw), 18px);
    --desktop-phone-top: clamp(8px, 3vh, 42px);
    --select-hand-scale: clamp(0.82, min(calc(var(--desktop-stage-height) / 720px), calc((100vw - 48px) / 1280px)), 1.08);
  }

  .page-home:has(#view-calendar:not(.hidden)) {
    --desktop-phone-scale: clamp(0.52, min(calc((100vw - var(--calendar-card-width) - 124px) / 650px), calc((var(--desktop-stage-height) - 44px) / 929px)), 0.68);
    --desktop-phone-left: clamp(-292px, calc(-276px + 5vw), -104px);
    --desktop-calendar-left-reserve: max(360px, calc(238px + (310px * var(--desktop-phone-scale))));
    --desktop-calendar-right-gap: clamp(12px, 1.6vw, 22px);
  }

  .home-stage,
  .view-landing,
  .view-calendar,
  .landing-main,
  .cal-layout {
    min-height: var(--app-available-height);
  }

  .page-home .site-header-bar {
    width: min(calc(100% - 32px), var(--home-header-content-width));
  }

  .landing-main {
    padding-top: var(--desktop-top-gap);
    padding-right: var(--desktop-right-gap);
    padding-bottom: clamp(20px, 3vh, 40px);
    padding-left: var(--desktop-landing-left-reserve);
  }

  .cal-layout {
    padding-top: var(--desktop-calendar-top-gap);
    padding-right: var(--desktop-calendar-right-gap);
    padding-bottom: clamp(20px, 3vh, 40px);
  }

  .phone-mockup {
    left: var(--desktop-phone-left);
    top: var(--desktop-phone-top);
  }

  .select-hand-clip {
    transform: scale(var(--select-hand-scale));
    transform-origin: bottom left;
  }
}

@media (min-width: 767px) and (max-width: 1112px) and (min-height: 430px) and (max-height: 834px) and (orientation: landscape) {
  .page-home {
    --home-header-content-width: calc(100% - 24px);
    --home-header-edge-pad: 12px;
    --landing-card-scale: clamp(0.72, min(calc((100vw - 164px) / 1032px), calc((var(--desktop-stage-height) - 42px) / 640px)), 0.84);
    --calendar-card-scale: clamp(0.62, min(calc((100vw - 180px) / 648px), calc((var(--desktop-stage-height) - 28px) / 594px)), 0.78);
    --desktop-phone-scale: clamp(0.58, min(calc((100vw - 612px) / 520px), calc((var(--desktop-stage-height) + 16px) / 929px)), 0.68);
    --desktop-phone-left: clamp(-236px, calc(-258px + 7vw), -112px);
    --desktop-phone-top: clamp(4px, 2.2vh, 24px);
    --desktop-calendar-right-gap: clamp(12px, 1.6vw, 20px);
  }

  html:not([data-returning]) .page-home:has(#view-landing:not(.hidden)) {
    --landing-card-scale: clamp(0.72, min(calc((100vw - 156px) / 1032px), calc((var(--desktop-stage-height) - 36px) / 640px)), 0.84);
    --desktop-phone-scale: clamp(0.6, min(calc((100vw - 604px) / 500px), calc((var(--desktop-stage-height) + 12px) / 929px)), 0.68);
    --desktop-phone-left: clamp(-228px, calc(-250px + 6vw), -104px);
    --desktop-phone-top: calc(var(--header-height) + var(--desktop-top-gap) - (296px * var(--desktop-phone-scale)));
    --desktop-landing-left-reserve: clamp(292px, 31vw, 356px);
    --desktop-right-gap: clamp(16px, 2vw, 24px);
    --desktop-top-gap: clamp(58px, 9vh, 84px);
  }

  html:not([data-returning]) .page-home:has(#view-landing:not(.hidden)) .pm-clip {
    display: block !important;
  }

  html:not([data-returning]) .page-home:has(#view-landing:not(.hidden)) .landing-main {
    padding-top: var(--desktop-top-gap);
    padding-right: var(--desktop-right-gap);
    padding-bottom: clamp(20px, 3vh, 36px);
    padding-left: var(--desktop-landing-left-reserve) !important;
  }

  html:not([data-returning]) .page-home:has(#view-landing:not(.hidden)) .phone-mockup {
    left: var(--desktop-phone-left) !important;
    top:-300PX !important;
    transform: scale(var(--desktop-phone-scale)) !important;
    scale: none !important;
    animation: pm-hinge-swing 0.82s cubic-bezier(0.22, 1, 0.36, 1) 0.8s 1 forwards !important;
  }

  html:not([data-returning]) .page-home:has(#view-landing:not(.hidden)) .select-hand-clip {
    display: block !important;
    /* bottom: clamp(72px, 14vh, 108px); */
    transform: scale(clamp(0.84, calc(var(--desktop-stage-height) / 760px), 0.98));
    transform-origin: bottom left;
  }

  .page-home:has(#view-calendar:not(.hidden)) .pm-clip {
    display: none;
  }

  .page-home:has(#view-calendar:not(.hidden)) .cal-layout {
    justify-content: center;
    padding-right: 16px;
    padding-left: 16px;
  }
}

@media (min-width: 1113px) and (max-width: 1279px) and (max-height: 1024px) and (orientation: landscape) {
  .page-home {
    --home-header-content-width: min(calc(100% - 28px), 1220px);
    --landing-card-scale: clamp(0.82, min(calc((100vw - 220px) / 1032px), calc((var(--desktop-stage-height) - 32px) / 640px)), 0.98);
    --calendar-card-scale: clamp(0.72, min(calc((100vw - 252px) / 648px), calc((var(--desktop-stage-height) - 52px) / 594px)), 0.96);
  }
}

@media (min-width: 767px) and (max-width: 1112px) and (min-height: 430px)and (max-height: 834px) and (orientation: landscape) {
  .page-home:has(#view-calendar:not(.hidden)) .pm-clip {
    display: none;
  }

  .page-home:has(#view-calendar:not(.hidden)) .cal-layout {
    justify-content: center;
    padding-right: clamp(16px, 2.4vw, 28px);
    padding-left: clamp(16px, 2.4vw, 28px);
  }
}

@media (min-width: 960px) and (max-width: 1279px) and (max-height: 1024px) and (orientation: landscape) {
  html:not([data-returning]) .page-home {
    --landing-card-scale: clamp(0.76, min(calc((100vw - 180px) / 1032px), calc((var(--desktop-stage-height) - 48px) / 640px)), 0.9);
    --desktop-phone-scale: clamp(0.56, min(calc((100vw - var(--landing-card-width) - 72px) / 650px), calc((var(--desktop-stage-height) + 8px) / 929px)), 0.74);
    --desktop-phone-left: clamp(-224px, calc(-238px + 6vw), -92px);
    --desktop-landing-left-reserve: max(330px, calc(220px + (300px * var(--desktop-phone-scale))));
  }

  html[data-returning] .page-home,
  body.page-home.is-returning-user {
    --calendar-card-scale: clamp(0.72, min(calc((100vw - 232px) / 648px), calc((var(--desktop-stage-height) - 60px) / 594px)), 0.9);
    --desktop-phone-scale: clamp(0.52, min(calc((100vw - var(--calendar-card-width) - 82px) / 650px), calc((var(--desktop-stage-height) - 12px) / 929px)), 0.72);
    --desktop-phone-left: clamp(-212px, calc(-224px + 5vw), -76px);
    --desktop-calendar-left-reserve: max(340px, calc(226px + (318px * var(--desktop-phone-scale))));
    --desktop-calendar-right-gap: clamp(16px, 2vw, 30px);
  }
}

@media (min-width: 1180px) and (max-width: 1279px) and (max-height: 900px) and (orientation: landscape) {
  html[data-returning] .page-home,
  body.page-home.is-returning-user,
  .page-home:has(#view-calendar:not(.hidden)) {
    --calendar-card-scale: clamp(0.7, min(calc((100vw - 248px) / 648px), calc((var(--desktop-stage-height) - 72px) / 594px)), 0.86);
    --desktop-phone-scale: clamp(0.46, min(calc((100vw - var(--calendar-card-width) - 120px) / 650px), calc((var(--desktop-stage-height) - 64px) / 929px)), 0.62);
    --desktop-phone-left: clamp(-111px, calc(88.9vw - 1160px), 49px);
    --desktop-phone-top: clamp(18px, 4vh, 40px);
    --desktop-calendar-left-reserve: max(392px, calc(264px + (344px * var(--desktop-phone-scale))));
    --desktop-calendar-right-gap: clamp(12px, 1.6vw, 24px);
  }

  /* Short landscape (e.g. 1221×745) scales the 929px mockup from the wrist hinge,
     which otherwise drops the phone into the bottom-left and clips it. Match the
     nearby 760–900 band so it sits just under the header. */
  html[data-returning] .page-home .phone-mockup,
  body.page-home.is-returning-user .phone-mockup,
  .page-home:has(#view-calendar:not(.hidden)) .phone-mockup {
    left: var(--desktop-phone-left);
    top: -37.5%;
  }
}

@media (min-width: 767px) and (max-width: 1112px) and (min-height: 430px) and (max-height: 834px) and (orientation: landscape) {
  html[data-returning] .page-home .pm-clip,
  body.page-home.is-returning-user .pm-clip {
    display: none;
  }

  html[data-returning] .page-home .cal-layout,
  body.page-home.is-returning-user .cal-layout {
    justify-content: center;
    padding-right: clamp(16px, 2.4vw, 28px);
    padding-left: clamp(16px, 2.4vw, 28px);
  }
}

@media (min-width: 960px) and (max-width: 1200px) and (max-height: 834px) and (orientation: landscape) {
  .page-home {
    --landing-card-scale: clamp(0.72, min(calc((100vw - 96px) / 1032px), calc((var(--desktop-stage-height) - 48px) / 640px)), 0.84);
    --calendar-card-scale: clamp(0.68, min(calc((100vw - 80px) / 648px), calc((var(--desktop-stage-height) - 54px) / 594px)), 0.8);
    --desktop-landing-left-reserve: clamp(16px, 2vw, 28px);
    --desktop-calendar-left-reserve: clamp(16px, 2vw, 28px);
    --desktop-right-gap: clamp(16px, 2vw, 24px);
    --desktop-calendar-right-gap: clamp(16px, 2vw, 24px);
  }

  .page-home .pm-clip {
    display: none;
  }

  .landing-main {
    padding-left: clamp(16px, 2vw, 28px);
  }

  .cal-layout {
    justify-content: center;
    padding-left: clamp(16px, 2vw, 28px);
  }
}

@media (min-width: 960px) and (max-width: 1200px) and (max-height: 834px) and (orientation: landscape) {
  .page-home:has(#view-landing:not(.hidden)) {
    --landing-card-scale: clamp(0.74, min(calc((100vw - 168px) / 1032px), calc((var(--desktop-stage-height) - 48px) / 640px)), 0.86);
    --desktop-landing-left-reserve: clamp(300px, 32vw, 360px);
    --desktop-phone-left: clamp(-190px, calc(-250px + 10vw), -88px);
    --desktop-phone-top: clamp(4px, 2vh, 22px);
  }

  .page-home:has(#view-landing:not(.hidden)) .pm-clip {
    display: block;
  }

  .page-home:has(#view-landing:not(.hidden)) .landing-main {
    padding-left: var(--desktop-landing-left-reserve);
  }

  .page-home:has(#view-landing:not(.hidden)) .phone-mockup {
    left: var(--desktop-phone-left);
    top: var(--desktop-phone-top);
    transform: scale(clamp(0.46, min(calc((100vw - 640px) / 460), calc((var(--desktop-stage-height) - 16px) / 929px)), 0.58));
  }

  .page-home:has(#view-landing:not(.hidden)) .select-hand-clip {
    display: none;
  }
}

@media (min-width: 960px) and (max-width: 1200px) and (max-height: 834px) and (orientation: landscape) {
  .page-home:has(#view-landing:not(.hidden)) .pm-clip {
    display: block !important;
  }

  .page-home:has(#view-landing:not(.hidden)) .landing-main {
    padding-left: clamp(300px, 32vw, 360px);
  }

  .page-home:has(#view-landing:not(.hidden)) .phone-mockup {
    left: clamp(-148px, calc(-220px + 8vw), -72px) !important;
    top: clamp(8px, 2vh, 20px) !important;
    transform: scale(clamp(0.46, min(calc((100vw - 640px) / 460), calc((var(--desktop-stage-height) - 16px) / 929px)), 0.54)) !important;
  }
}

@media (min-width: 900px) and (max-width: 1024px) and (max-height: 680px) and (orientation: landscape) {
  .page-home:has(#view-landing:not(.hidden)) .pm-clip {
    display: block !important;
  }

  .page-home:has(#view-landing:not(.hidden)) .landing-main {
    padding-left: 320px;
  }

  .page-home:has(#view-landing:not(.hidden)) .phone-mockup {
    left: -228px !important;
    top: 0 !important;
    transform: scale(0.5) !important;
  }
}

@media (min-width: 900px) and (max-width: 1024px) and (max-height: 680px) {
  .page-home:has(#view-landing:not(.hidden)) {
    --landing-card-scale: clamp(0.72, min(calc((100vw - 164px) / 1032px), calc((var(--desktop-stage-height) - 34px) / 640px)), 0.8);
    --desktop-landing-left-reserve: clamp(334px, 37vw, 392px);
    --desktop-phone-scale: 0.44;
    --desktop-phone-left: clamp(-452px, calc(-504px + 10vw), -368px);
    --desktop-phone-top: clamp(0px, 1.5vh, 10px);
    --desktop-top-gap: clamp(40px, 6vh, 52px);
    --desktop-right-gap: clamp(14px, 1.8vw, 22px);
  }

  .page-home:has(#view-landing:not(.hidden)) .landing-main {
    padding-top: var(--desktop-top-gap);
    padding-right: var(--desktop-right-gap);
    padding-bottom: clamp(12px, 2.4vh, 20px);
    padding-left: var(--desktop-landing-left-reserve);
  }

  .page-home:has(#view-landing:not(.hidden)) .phone-mockup {
    transform: scale(0.44);
    left: var(--desktop-phone-left);
    top: var(--desktop-phone-top);
  }
}

@media (min-width: 600px) and (max-width: 620px) and (min-height: 950px) and (max-height: 970px) and (orientation: portrait) {
  .phone-mockup {
    left: 64% !important;
  }
}

/* Homepage landing tablet matrix: only the approved short/wide tablet landscape
   entries that were still pinned to a 0.54 cap should step up to 0.62. Keep
   this exact to the matrix so desktop and phone bands keep their current math. */
@media (width: 744px) and (height: 1133px) and (orientation: portrait) {
    html:not([data-returning]) .page-home .phone-mockup {
    left:48%;
    }}

@media (width: 1133px) and (height: 744px) and (orientation: landscape) {
  html:not([data-returning]) .page-home:has(#view-landing:not(.hidden)) .phone-mockup,
  body.page-home:not(.is-returning-user):has(#view-landing:not(.hidden)) .phone-mockup {
    left: -192px !important;
    transform: scale(0.62) !important;
    scale: none !important;
  }
}

@media (width: 1180px) and (height: 820px) and (orientation: landscape),
       (width: 1194px) and (height: 834px) and (orientation: landscape),
       (width: 1200px) and (height: 800px) and (orientation: landscape) {
  html:not([data-returning]) .page-home:has(#view-landing:not(.hidden)) .phone-mockup,
  body.page-home:not(.is-returning-user):has(#view-landing:not(.hidden)) .phone-mockup {
    transform: scale(0.62) !important;
    scale: none !important;
  }
}

@media (min-width: 1280px) and (max-width: 1919px) and (orientation: landscape) and (hover: hover) and (pointer: fine) {
  .page-home {
    --home-header-content-width: 1294px;
    --home-header-edge-pad: 22px;
    --landing-card-scale: 1;
    --calendar-card-scale: 1;
    --desktop-phone-scale: clamp(0.83638, calc(0.83638 + ((100vw - 1280px) * 0.00024673)), 0.99429);
    --desktop-landing-left-reserve: max(250px, calc(188px + (248px * var(--desktop-phone-scale))));
    --desktop-calendar-left-reserve: max(270px, calc(206px + (258px * var(--desktop-phone-scale))));
    --desktop-phone-left: clamp(-95px, calc(-95px + ((100vw - 1280px) * 0.0859375)), -40px);
    --desktop-phone-top: clamp(-4px, calc(-4px + ((100vw - 1280px) * 0.05625)), 32px);
    --select-hand-scale: clamp(0.92, min(calc(var(--desktop-stage-height) / 720px), calc((100vw - 48px) / 1280px)), 1.55);
    --desktop-top-gap: 112px;
    --desktop-right-gap: 108px;
    --desktop-calendar-top-gap: 20px;
    --desktop-calendar-right-gap: 37px;
  }

  html:not([data-returning]) .page-home,
  body.page-home:not(.is-returning-user) {
    --landing-card-scale: 1;
    --desktop-phone-scale: clamp(0.83638, calc(0.83638 + ((100vw - 1280px) * 0.00024673)), 0.99429);
    --desktop-landing-left-reserve: max(250px, calc(188px + (248px * var(--desktop-phone-scale))));
    --desktop-phone-left: clamp(-95px, calc(-95px + ((100vw - 1280px) * 0.0859375)), -40px);
  }

  html[data-returning] .page-home,
  body.page-home.is-returning-user,
  .page-home:has(#view-calendar:not(.hidden)) {
    --calendar-card-scale: 1;
    --desktop-phone-scale: clamp(0.83638, calc(0.83638 + ((100vw - 1280px) * 0.00024673)), 0.99429);
    --desktop-calendar-left-reserve: max(270px, calc(206px + (258px * var(--desktop-phone-scale))));
    --desktop-phone-left: clamp(-95px, calc(-95px + ((100vw - 1280px) * 0.0859375)), -40px);
    --desktop-calendar-right-gap: 37px;
  }

  .page-home .site-header-bar {
    width: 100%;
    max-width: none;
  }

  .page-home .header-haatar-logo {
    right: var(--header-logo-haatar-right);
  }

  .page-home .header-ynet-group {
    right: var(--header-logo-ynet-right);
  }

  .landing-main {
    padding-top: var(--desktop-top-gap);
    padding-right: var(--desktop-right-gap);
    padding-bottom: var(--desktop-bottom-gap);
    padding-left: var(--desktop-landing-left-reserve);
  }

  .cal-layout {
    padding-top: var(--desktop-calendar-top-gap);
    padding-right: var(--desktop-calendar-right-gap);
  }

  .phone-mockup {
    left: var(--desktop-phone-left);
    top: var(--desktop-phone-top);
  }

  .select-hand-clip {
    transform: scale(var(--select-hand-scale));
    transform-origin: bottom left;
  }
}

@media (min-width: 1201px) and (max-width: 1360px) and (orientation: landscape) {
  /* Scale toward Figma (~0.84 on 806×929). Pin the visual top at 8% of the
     stage so short viewports clip the wrist, not the phone. */
  html[data-returning] .page-home,
  body.page-home.is-returning-user,
  .page-home:has(#view-calendar:not(.hidden)) {
    --calendar-card-scale: 0.88;
    --desktop-calendar-top-gap: 16px;
    --desktop-calendar-right-gap: 24px;
    --desktop-phone-scale: clamp(0.72, calc((var(--desktop-stage-height) - 12px) / 680px), 0.92);
    --desktop-phone-left: clamp(-96px, -7vw, -64px);
    --desktop-phone-top: calc(-4% - (818px * (1 - var(--desktop-phone-scale))));
  }
}

/* 1280×720 (and the rest of this short landscape band): the 1280 Figma
   placement scales from the wrist, so the hand sits on the bottom edge and
   is clipped. Scale around the phone body and sit it beside the card. */
@media (min-width: 1201px) and (max-width: 1360px) and (max-height: 759px) and (orientation: landscape) {
  .page-home:has(#view-landing:not(.hidden)) {
    --landing-card-scale: 0.86;
    --desktop-top-gap: 56px;
    --desktop-right-gap: 48px;
    --desktop-landing-left-reserve: 560px;
  }

  .page-home:has(#view-landing:not(.hidden)) .landing-main {
    padding-top: 56px !important;
    padding-right: 48px !important;
    padding-bottom: 24px !important;
    padding-left: 560px !important;
  }

  .page-home:has(#view-landing:not(.hidden)) .pm-clip .phone-mockup,
  .page-home:has(#view-landing:not(.hidden)) .phone-mockup {
    left: var(--desktop-phone-left) !important;
    top: calc(-4% - (818px * (1 - 0.88))) !important;
    transform: scale(0.88) !important;
    transform-origin: var(--phone-hinge-origin-x) var(--phone-hinge-origin-y) !important;
    scale: none !important;
    animation: pm-hinge-swing 0.82s cubic-bezier(0.22, 1, 0.36, 1) 0.8s 1 forwards !important;
  }
}

@media (min-width: 1180px) and (max-width: 1360px) and (min-height: 760px) and (max-height: 900px) and (orientation: landscape) {
  html:not([data-returning]) .page-home,
  body.page-home:not(.is-returning-user) {
    --home-header-content-width: min(calc(100% - 28px), 100%);
    --home-header-edge-pad: clamp(12px, 1.3vw, 18px);
    --landing-card-scale: clamp(0.84, min(calc((100vw - 220px) / 1032px), calc((var(--desktop-stage-height) - 54px) / 640px)), 0.94);
    --desktop-phone-scale: clamp(0.56, min(calc((100vw - 700px) / 700px), calc((var(--desktop-stage-height) - 12px) / 929px)), 0.64);
    --desktop-phone-left: clamp(-286px, calc(-352px + 8vw), -226px);
    --desktop-phone-top: clamp(10px, 2.8vh, 26px);
    --desktop-landing-left-reserve: clamp(368px, 34vw, 448px);
    --desktop-top-gap: clamp(58px, 9vh, 84px);
    --desktop-right-gap: clamp(20px, 2.6vw, 42px);
    --select-hand-scale: clamp(0.78, calc((var(--desktop-stage-height) - 40px) / 720px), 0.92);
  }

  html[data-returning] .page-home,
  body.page-home.is-returning-user,
  .page-home:has(#view-calendar:not(.hidden)) {
    --home-header-content-width: min(calc(100% - 28px), 100%);
    --home-header-edge-pad: clamp(12px, 1.3vw, 18px);
    --calendar-card-scale: clamp(0.72, min(calc((100vw - 150px) / 648px), calc((var(--desktop-stage-height) - 82px) / 594px)), 0.84);
    --desktop-phone-scale: clamp(0.52, min(calc((100vw - var(--calendar-card-width) - 100px) / 650px), calc((var(--desktop-stage-height) - 60px) / 929px)), 0.68);
    --desktop-phone-left: clamp(-111px, calc(88.9vw - 1160px), 49px);
    --desktop-phone-top: clamp(18px, 4vh, 40px);
    --desktop-calendar-right-gap: clamp(16px, 1.8vw, 28px);
    --desktop-calendar-top-gap: clamp(16px, 3vh, 26px);
  }

  /* Restore phone mockup for calendar state — for the 1180-1200 sub-range this
     overrides the global pm-clip hide from the 960-1200 max-height:834 block. */
  .page-home:has(#view-calendar:not(.hidden)) .pm-clip {
    display: block !important;
  }

  .page-home .site-header-bar {
    width: min(calc(100% - 28px), var(--home-header-content-width));
  }

  html:not([data-returning]) .page-home .landing-main,
  body.page-home:not(.is-returning-user) .landing-main {
    padding-top: var(--desktop-top-gap);
    padding-right: var(--desktop-right-gap);
    padding-bottom: clamp(18px, 3vh, 32px);
    padding-left: var(--desktop-landing-left-reserve);
  }

  html[data-returning] .page-home .cal-layout,
  body.page-home.is-returning-user .cal-layout,
  .page-home:has(#view-calendar:not(.hidden)) .cal-layout {
    padding-top: var(--desktop-calendar-top-gap);
    padding-right: var(--desktop-calendar-right-gap);
    padding-bottom: clamp(18px, 3vh, 32px);
    justify-content: flex-start;
  }

  .page-home .phone-mockup {
    left: var(--desktop-phone-left);
    top: -37.5% /*var(--desktop-phone-top)*/;
  }

  html:not([data-returning]) .page-home .select-hand-clip,
  body.page-home:not(.is-returning-user) .select-hand-clip {
    transform: scale(var(--select-hand-scale));
    transform-origin: bottom left;
  }
}

/* Desktop landing refinement for the 1000-1280 × 700-890 landscape band.
   Keep this isolated to the first-visit landing view so the tablet/calendar
   contracts that were tuned separately keep their current behavior. */
@media (min-width: 1000px) and (max-width: 1279px) and (min-height: 680px) and (max-height: 890px) and (orientation: landscape) and (hover: hover) and (pointer: fine) {
  html:not([data-returning]) .page-home:has(#view-landing:not(.hidden)),
  body.page-home:not(.is-returning-user):has(#view-landing:not(.hidden)) {
    --home-header-content-width: min(calc(100% - 20px), 1294px);
    --home-header-edge-pad: clamp(14px, calc(1.2vw + 2px), 22px);
    --landing-card-scale: clamp(0.88, min(calc((100vw - 92px) / 1032px), calc((var(--desktop-stage-height) - 22px) / 640px)), 1);
    --desktop-phone-scale: clamp(0.86, min(calc((100vw - var(--landing-card-width) - 20px) / 650px), calc((var(--desktop-stage-height) + 62px) / 929px)), 0.92);
    --desktop-landing-left-reserve: clamp(356px, calc(256px + 14vw), 424px);
    --desktop-phone-left: clamp(-188px, calc(-520px + 33vw), -95px);
    --desktop-phone-top: calc(var(--header-height) + var(--desktop-top-gap) - (296px * var(--desktop-phone-scale)));
    --desktop-top-gap: clamp(84px, calc(84px + ((100vw - 1000px) * 0.1)), 112px);
    --desktop-right-gap: clamp(32px, calc(32px + ((100vw - 1000px) * 0.27142857)), 108px);
    --select-hand-scale: clamp(0.82, min(calc(var(--desktop-stage-height) / 720px), calc((100vw - 80px) / 1280px)), 1);
  }

  .page-home:has(#view-landing:not(.hidden)) .site-header-bar {
    width: min(calc(100% - 20px), var(--home-header-content-width));
    max-width: none;
  }

  html:not([data-returning]) .page-home:has(#view-landing:not(.hidden)) .landing-main,
  body.page-home:not(.is-returning-user):has(#view-landing:not(.hidden)) .landing-main {
    padding-top: var(--desktop-top-gap);
    padding-right: var(--desktop-right-gap);
    padding-bottom: clamp(18px, 3vh, 32px);
    padding-left: var(--desktop-landing-left-reserve) !important;
  }

  html:not([data-returning]) .page-home:has(#view-landing:not(.hidden)) .phone-mockup,
  body.page-home:not(.is-returning-user):has(#view-landing:not(.hidden)) .phone-mockup {
    left: var(--desktop-phone-left) !important;
    top: var(--desktop-phone-top) !important;
    transform: scale(var(--desktop-phone-scale)) !important;
    scale: none !important;
  }

  html:not([data-returning]) .page-home:has(#view-landing:not(.hidden)) .select-hand-clip,
  body.page-home:not(.is-returning-user):has(#view-landing:not(.hidden)) .select-hand-clip {
    transform: none;
    transform-origin: bottom left;
  }
}

/* Low-height refinement for the 1201-1279 desktop landing band.
   Without this override, the broader 1000-1279 x 680-890 rule keeps the
   phone mockup too large, which makes the hand sit visibly too low. */
@media (min-width: 1201px) and (max-width: 1279px) and (max-height: 759px) and (orientation: landscape) and (hover: hover) and (pointer: fine) {
  html:not([data-returning]) .page-home:has(#view-landing:not(.hidden)),
  body.page-home:not(.is-returning-user):has(#view-landing:not(.hidden)) {
    --desktop-phone-scale: clamp(0.58, min(calc((100vw - var(--landing-card-width) - 44px) / 650px), calc((var(--desktop-stage-height) + 4px) / 929px)), 0.68);
    --desktop-landing-left-reserve: clamp(320px, calc(228px + 11vw), 388px);
    --desktop-phone-left: clamp(-164px, calc(-252px + 9vw), -84px);
    --desktop-phone-top: clamp(8px, 2vh, 20px);
    --desktop-top-gap: clamp(64px, 8vh, 82px);
    --desktop-right-gap: clamp(20px, 2.4vw, 42px);
  }
}

/* DevTools/emulation can report coarse or non-hover input even on desktop.
   Mirror the low-height landing override without the input-device gates so the
   1201-1279 x <=759 band keeps the same composition while debugging. */
@media (min-width: 1201px) and (max-width: 1279px) and (max-height: 759px) and (orientation: landscape) {
  html:not([data-returning]) .page-home:has(#view-landing:not(.hidden)),
  body.page-home:not(.is-returning-user):has(#view-landing:not(.hidden)) {
    --desktop-phone-scale: clamp(0.58, min(calc((100vw - var(--landing-card-width) - 44px) / 650px), calc((var(--desktop-stage-height) + 4px) / 929px)), 0.68);
    --desktop-landing-left-reserve: clamp(320px, calc(228px + 11vw), 388px);
    --desktop-phone-left: clamp(-164px, calc(-252px + 9vw), -84px);
    --desktop-phone-top: clamp(8px, 2vh, 20px);
    --desktop-top-gap: clamp(64px, 8vh, 82px);
    --desktop-right-gap: clamp(20px, 2.4vw, 42px);
  }
}

/* Taller 1201-1360 landscape: same side-by-side composition, a bit larger. */
@media (min-width: 1201px) and (max-width: 1360px) and (min-height: 760px) and (orientation: landscape) {
  .page-home:has(#view-landing:not(.hidden)) {
    --landing-card-scale: 0.92;
    --desktop-top-gap: 72px;
    --desktop-right-gap: 64px;
    --desktop-landing-left-reserve: 580px;
  }

  .page-home:has(#view-landing:not(.hidden)) .landing-main {
    padding-top: 72px !important;
    padding-right: 64px !important;
    padding-left: 580px !important;
  }

  .page-home:has(#view-landing:not(.hidden)) .pm-clip .phone-mockup,
  .page-home:has(#view-landing:not(.hidden)) .phone-mockup {
    left: var(--desktop-phone-left) !important;
    top: calc(-4% - (818px * (1 - 0.88))) !important;
    transform: scale(0.88) !important;
    transform-origin: var(--phone-hinge-origin-x) var(--phone-hinge-origin-y) !important;
    scale: none !important;
    animation: pm-hinge-swing 0.82s cubic-bezier(0.22, 1, 0.36, 1) 0.8s 1 forwards !important;
  }
}

@media (min-width: 1361px) and (max-width: 1440px) and (min-height: 960px) and (max-height: 1100px) {
  html:not([data-returning]) .page-home,
  body.page-home:not(.is-returning-user) {
    --home-header-content-width: min(calc(100% - 32px), 100%);
    --home-header-edge-pad: clamp(14px, 1.4vw, 20px);
    --landing-card-scale: clamp(0.9, min(calc((100vw - 240px) / 1032px), calc((var(--desktop-stage-height) - 72px) / 640px)), 0.96);
    --desktop-phone-scale: clamp(0.58, min(calc((100vw - 740px) / 760px), calc((var(--desktop-stage-height) - 84px) / 929px)), 0.66);
    --desktop-phone-left: clamp(-304px, calc(-360px + 8vw), -228px);
    --desktop-phone-top: clamp(16px, 3.2vh, 34px);
    --desktop-landing-left-reserve: clamp(356px, 33vw, 430px);
    --desktop-top-gap: clamp(74px, 10vh, 104px);
    --desktop-right-gap: clamp(24px, 2.8vw, 44px);
    --select-hand-scale: clamp(0.82, calc((var(--desktop-stage-height) - 68px) / 720px), 0.98);
  }

  html[data-returning] .page-home,
  body.page-home.is-returning-user,
  .page-home:has(#view-calendar:not(.hidden)) {
    --home-header-content-width: min(calc(100% - 32px), 100%);
    --home-header-edge-pad: clamp(14px, 1.4vw, 20px);
    --calendar-card-scale: clamp(0.82, min(calc((100vw - 170px) / 648px), calc((var(--desktop-stage-height) - 104px) / 594px)), 0.9);
    --desktop-phone-scale: clamp(0.50, min(calc((100vw - var(--calendar-card-width) - 140px) / 650px), calc((var(--desktop-stage-height) - 80px) / 929px)), 0.64);
    --desktop-phone-left: clamp(-20px, calc(108vw - 1494px), 62px);
    --desktop-phone-top: clamp(36px, 5vh, 64px);
    --desktop-calendar-top-gap: clamp(18px, 3vh, 30px);
    --desktop-calendar-right-gap: clamp(18px, 2vw, 32px);
  }

  .page-home .site-header-bar {
    width: min(calc(100% - 32px), var(--home-header-content-width));
  }

  html:not([data-returning]) .page-home .landing-main,
  body.page-home:not(.is-returning-user) .landing-main {
    padding-top: var(--desktop-top-gap);
    padding-right: var(--desktop-right-gap);
    padding-bottom: clamp(24px, 3.5vh, 40px);
    padding-left: var(--desktop-landing-left-reserve);
  }

  html[data-returning] .page-home .cal-layout,
  body.page-home.is-returning-user .cal-layout,
  .page-home:has(#view-calendar:not(.hidden)) .cal-layout {
    padding-top: var(--desktop-calendar-top-gap);
    padding-right: var(--desktop-calendar-right-gap);
    padding-bottom: clamp(24px, 3.5vh, 40px);
    justify-content: flex-start;
  }

  .page-home .phone-mockup {
    left: var(--desktop-phone-left);
    top: -27.5% /*var(--desktop-phone-top)*/;
  }

  html:not([data-returning]) .page-home .select-hand-clip,
  body.page-home:not(.is-returning-user) .select-hand-clip {
    transform: scale(var(--select-hand-scale));
    transform-origin: bottom left;
  }
}

/* Tablet calendar matrix parity: the approved tablet calendar treatment keeps
   the calendar card centered and suppresses the desktop phone mockup lane.
   Only the remaining wide-tablet landscape entries need this explicit reset. */
@media (width: 1180px) and (height: 820px),
       (width: 1194px) and (height: 834px),
       (width: 1200px) and (height: 800px),
       (width: 1280px) and (height: 800px),
       (width: 1340px) and (height: 800px),
       (width: 1366px) and (height: 1024px) {
  html[data-returning] .page-home .pm-clip,
  body.page-home.is-returning-user .pm-clip,
  .page-home:has(#view-calendar:not(.hidden)) .pm-clip {
    display: none !important;
  }

  html[data-returning] .page-home .cal-layout,
  body.page-home.is-returning-user .cal-layout,
  .page-home:has(#view-calendar:not(.hidden)) .cal-layout {
    justify-content: center;
    padding-left: clamp(16px, 2.2vw, 28px);
    padding-right: clamp(16px, 2.2vw, 28px);
  }
}

/* ── עליינו logo: centred, top=28px ── */
.cal-card-logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(28px * var(--calendar-card-scale));
  width: calc(97px * var(--calendar-card-scale));
  height: calc(42px * var(--calendar-card-scale));
  display: block;
}

/* ── Title row — Figma top=96px, centred between left=104 & right=104 ── */
.cal-title-row {
  position: absolute;
  left: calc(104px * var(--calendar-card-scale));
  right: calc(104px * var(--calendar-card-scale));
  top: calc(96px * var(--calendar-card-scale));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(15px * var(--calendar-card-scale));
  flex-wrap: nowrap;
}

.cal-title {
  font-family: 'MosesText_Inter', 'Rubik', Arial, sans-serif;
  font-size: calc(35px * var(--calendar-card-scale));
  font-weight: 700;
  color: #273999;
  line-height: calc(35px * var(--calendar-card-scale));
  text-align: right;
  white-space: nowrap;
  flex-shrink: 0;
}

.cal-ynet-logo {
  display: block;
  flex-shrink: 0;
  width: calc(70px * var(--calendar-card-scale));
  height: calc(30px * var(--calendar-card-scale));
}

/* ── Description — Figma 373:2166: left=107, top=139, 435×60 ── */
.cal-description {
  position: absolute;
  left: calc(75px * var(--calendar-card-scale));
  transform: none;
  top: calc(139px * var(--calendar-card-scale));
  width: calc(500px * var(--calendar-card-scale));
  height: calc(60px * var(--calendar-card-scale));
  font-family: 'MosesText_Inter', var(--font-body);
  font-weight: 400;
  font-size: calc(20px * var(--calendar-card-scale));
  line-height: normal;
  color: #000001;
  text-align: center;
  white-space: normal;
}

/* ─── Legend (מקרא) ────────────────────────────────────────────────────
   Figma node 774:3190 — 249×57px at left=175px, top=207px.
   Three state indicators: נעול / חדש / הושלם
──────────────────────────────────────────────────────────────────── */
.cal-legend {
  position: absolute;
  left: calc(175px * var(--calendar-card-scale));
  top: calc(207px * var(--calendar-card-scale));
  width: calc(249px * var(--calendar-card-scale));
  height: calc(57px * var(--calendar-card-scale));
}

/* Each legend column: 42px wide, indicator icon top + label below */
.cal-legend-item {
  position: absolute;
  width: calc(42px * var(--calendar-card-scale));
  height: calc(57px * var(--calendar-card-scale));
  top: 0;
}
.cal-legend-item--completed { left: calc(207px * var(--calendar-card-scale)); }
.cal-legend-item--new       { left: calc(104px * var(--calendar-card-scale)); }
.cal-legend-item--locked    { left: 0; }

/* 21×21px indicator square, centred in the 42px column (10px side margin) */
.cal-legend-icon {
  position: absolute;
  top: 0;
  left: calc(10px * var(--calendar-card-scale));
  width: calc(21px * var(--calendar-card-scale));
  height: calc(21px * var(--calendar-card-scale));
}
.cal-legend-icon--completed {
  background: #4d69ff;
}
.cal-legend-icon--new {
  background: #ffffff;
  border: 2px solid #4d69ff;
  box-sizing: border-box;
}
.cal-legend-icon--locked {
  background: #c5c5c5;
  /* position: absolute inherited from .cal-legend-icon is the containing
     block for the dot children — do NOT override to relative here */
}

/* Corner dots inside the locked legend icon (Figma: 2×2px, 1px from edge) */
.cal-legend-dot {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #000;
}
.cal-legend-dot--tl { top:    1px; left:  1px; }
.cal-legend-dot--tr { top:    1px; right: 1px; }
.cal-legend-dot--bl { bottom: 1px; left:  1px; }
.cal-legend-dot--br { bottom: 1px; right: 1px; }

/* Label text below icon */
.cal-legend-label {
  background: white;  /* override any inherited background from the icon */
  position: absolute;
  top: calc(25px * var(--calendar-card-scale));
  left: 50%;
  transform: translateX(-50%);
  width: calc(42px * var(--calendar-card-scale));
  font-family: 'MosesText_Inter', 'Inter', Arial, sans-serif;
  font-size: calc(12px * var(--calendar-card-scale));
  font-weight: 700;
  line-height: calc(16px * var(--calendar-card-scale));
  color: #000001;
  text-align: center;
  white-space: pre-wrap;
  margin: 0;
}

/* ─── Calendar grid section ──────────────────────────────────────────
   Figma node 460:2687 "Component 4" — wrapper is 564×314 at x=44, y=260.
   The wrapper itself stays visible so the 324px border, 337px board area,
   and 322px decorative scrollbar can extend below it exactly like the 1280px
   desktop frame in Figma.
──────────────────────────────────────────────────────────────────── */
.cal-grid-section {
  position: absolute;
  left: calc(44px * var(--calendar-card-scale));
  top: calc(260px * var(--calendar-card-scale));
  width: calc(564px * var(--calendar-card-scale));
  height: calc(314px * var(--calendar-card-scale));
  overflow: visible;
}

/* Decorative border frame for the grid block — same image as card frame */
.cal-grid-border {
  position: absolute;
  top: calc(18px * var(--calendar-card-scale));
  left: 0;
  width: 100%;
  height: calc(300px * var(--calendar-card-scale));
  max-width: none;
  max-height: none;
  object-fit: fill;
  transform: scaleX(-1);
  pointer-events: none;
  z-index: 1;
}

/* ── Game board: 6-column CSS Grid, 60×60px tiles, 15px gaps ──
   Figma: inline-grid, left=20px, top=4.64px within section,
          px-[15px], py-[13px], gap-x/y=[15px], overflow-clip.
   We use overflow-y: auto for scrollable rows; native scrollbar hidden.
──────────────────────────────────────────────────────────────────── */
.cal-game-board {
  position: absolute;
  top: calc(4.64px * var(--calendar-card-scale));
  left: calc(20px * var(--calendar-card-scale));          /* Figma: grid board left=20px within section */
  width: calc(465px * var(--calendar-card-scale));        /* exact: 2×15px padding + 6×60px tiles + 5×15px gaps = 465px
                          right edge = 485px; scrollbar at 521px → 36px gap (matches Figma) */
  height: calc(309.36px * var(--calendar-card-scale));
  padding: calc(13px * var(--calendar-card-scale)) var(--cal-grid-side-pad);

  display: grid;
  grid-template-columns: repeat(6, var(--cal-tile-size));
  gap: var(--cal-grid-gap);
  align-content: start;

  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  /* Hide native scrollbar — replaced by decorative .cal-scrollbar */
  scrollbar-width: none;
  direction: rtl;
  z-index: 2;
}
.cal-game-board::-webkit-scrollbar { display: none; }

/* Calendar checkmark icon — desktop uses the native pixel SVG, mobile overrides size */
.cal-tile-check-icon {
  position: absolute;
  right: calc(4px * var(--calendar-card-scale));
  bottom: calc(6px * var(--calendar-card-scale));
  left: auto;
  top: auto;
  width: calc(13px * var(--calendar-card-scale));
  height: calc(9px * var(--calendar-card-scale));
  display: block;
  pointer-events: none;
  z-index: 2;
}

/* ─── Game tiles ───────────────────────────────────────────────────── */
.cal-tile {
  position: relative;
  width: var(--cal-tile-size);
  height: var(--cal-tile-size);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 0;
  background: none;
  background-color: transparent;
  flex-shrink: 0;
  color: inherit;
  font: inherit;
  /* iOS Safari paints native button chrome unless appearance is reset. */
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}

/* ── Locked — grey, no game scheduled that day ── */
.cal-tile--locked {
  background: #c5c5c5;
  background-color: #c5c5c5;
  cursor: default;
  box-shadow: inset -1px -2px 5px rgba(0, 0, 0, 0.25);
}

/* Figma: 4 × 3×3px black corner dots on locked tiles */
.cal-tile-corner {
  position: absolute;
  width: 3px;
  height: 3px;
  background: #000001;
  pointer-events: none;
}
.cal-tile-corner--tl { top: 3px;    left:  3px; }
.cal-tile-corner--tr { top: 3px;    right: 3px; }
.cal-tile-corner--bl { bottom: 3px; left:  3px; }
.cal-tile-corner--br { bottom: 3px; right: 3px; }

/* ── Completed — solid deep-blue, already played, opens results ── */
.cal-tile--completed {
  background: #4d69ff;
  background-color: #4d69ff;
  /* Pixel fallback first: Safari drops the scaled shorthand when
     --calendar-card-scale uses length/length division. */
  border: 3px solid #000;
  border-width: calc(3px * var(--calendar-card-scale));
  cursor: pointer;
  /* Figma: flex column, gap 9px, centred, px=22px py=2px */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: calc(9px * var(--calendar-card-scale));
  padding: calc(2px * var(--calendar-card-scale)) calc(22px * var(--calendar-card-scale));
  overflow: hidden;
}

/* Completed tile number: full 40px — same visibility as available tile */
.cal-tile--completed .cal-tile-num {
  height: auto;
  overflow: visible;
  font-size: calc(40px * var(--calendar-card-scale));
  line-height: calc(40px * var(--calendar-card-scale));
  margin-top: 0;
  padding-bottom: 0;
  flex-shrink: 0;
}

/* Checkmark anchor — exact Figma wrapper for the completed-state badge */
.cal-tile-check {
  position: absolute;
  right: 0;
  bottom: 0;
  left: auto;
  top: auto;
  width: calc(21px * var(--calendar-card-scale));
  height: calc(21px * var(--calendar-card-scale));
  overflow: visible;
  pointer-events: none;
  z-index: 1;
}

/* Figma node 761:4190 — 21×21px white square with 3px black border */
.cal-tile-check-badge {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(21px * var(--calendar-card-scale));
  height: calc(21px * var(--calendar-card-scale));
  background: #fff;
  border: calc(3px * var(--calendar-card-scale)) solid #000;
  box-sizing: border-box;
  pointer-events: none;
}

/* Disable the fallback CSS tick; the DOM already includes the Figma-style SVG icon. */
.cal-tile-check::after {
  display: none;
}

/* ── Available — white with blue border, today's game or unplayed ── */
.cal-tile--available {
  background: #ffffff;
  background-color: #ffffff;
  /* Pixel fallback first: Safari drops the scaled shorthand when
     --calendar-card-scale uses length/length division. */
  border: 5px solid #4c69ff;
  border-width: calc(5px * var(--calendar-card-scale));
  cursor: pointer;
  box-shadow: inset -6px -2px 5px rgba(0, 0, 0, 0.25);
}

/* Available tile number: cancel the base margin-top:auto so it centres
   the same way as the completed tile */
.cal-tile--available .cal-tile-num {
  margin-top: 0;
  padding-bottom: 0;
}

.cal-tile--available:hover,
.cal-tile--completed:hover {
  filter: brightness(0.92);
  transform: translateY(-1px);
  transition: filter 150ms, transform 80ms;
}
.cal-tile--available:active,
.cal-tile--completed:active {
  transform: translateY(0);
}

/* Safari cannot divide length/length, so --calendar-card-scale (and any
   border-width that multiplies it) is invalid. Re-apply tile chrome with
   pixel values. Other browsers skip this block and keep the scaled rules. */
@supports not (width: calc(1px * (1px / 1px))) {
  .cal-tile--locked {
    background-color: #c5c5c5;
  }

  .cal-tile--available {
    background-color: #ffffff;
    border: 5px solid #4c69ff;
  }

  .cal-tile--completed {
    background-color: #4d69ff;
    border: 3px solid #000;
  }

  @media (max-width: 767px) {
    .cal-tile--available,
    #view-calendar:not(.hidden) .cal-tile--available {
      border: 4.5px solid #4c69ff;
      box-shadow: inset -5px -2px 4px rgba(0, 0, 0, 0.25);
    }

    .cal-tile--completed,
    #view-calendar:not(.hidden) .cal-tile--completed {
      background-color: #4d69ff;
      border: 2.7px solid #000;
    }
  }
}

/* Day-number label inside completed / available tiles */
.cal-tile-num {
  font-family: 'Micro 5', 'Courier New', monospace;
  font-size: calc(40px * var(--calendar-card-scale));
  font-weight: 400;
  line-height: calc(40px * var(--calendar-card-scale));
  color: #000;
  display: block;
  text-align: center;
  width: 100%;
  user-select: none;
  pointer-events: none;
  /* Figma: justify-end on the flex column → shift number toward bottom */
  margin-top: auto;
  padding-bottom: calc(2px * var(--calendar-card-scale));
  white-space: nowrap;
}

/* ─── CTA — "התחל משחק": start today's game ───────────────────────
   Figma: centred horizontally, sits below the grid section.
   Re-uses .btn-start-game rules defined in homepage.css.
──────────────────────────────────────────────────────────────────── */
.cal-cta {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 572px;         /* just below grid section bottom (207+354+11) */
}

/* ─── Standalone calendar page body layout ────────────────────────
   calendar.html uses <body class="page-home page-calendar">.
   The same grid-paper bg from homepage.css applies via page-home.
──────────────────────────────────────────────────────────────────── */
.page-calendar body,
body.page-calendar {
  min-height: 100vh;
}

.page-calendar .cal-layout {
  height: auto;
  min-height: calc(100vh - var(--header-height, 68px));
}

@media (min-width: 835px) and (max-width: 1023px) and (min-height: 1200px) and (orientation: portrait) {
  #view-calendar:not(.hidden) .cal-grid-section {
    left: 59px;
    top: 293px;
    width: 287px;
    height: 301px;
  }

  #view-calendar:not(.hidden) .cal-game-board {
    top: 8px;
    left: 7px;
    width: 209px;
    height: 285px;
    grid-template-columns: repeat(3, 54px);
    column-gap: 20px;
    row-gap: 15px;
    padding: 0;
    max-height: none;
    overflow-y: auto;
    overflow-x: hidden;
  }

  #view-calendar:not(.hidden) .cal-tile {
    width: 54px;
    height: 54px;
    min-width: 54px;
    padding-bottom: 0;
    overflow: hidden;
  }

  #view-calendar:not(.hidden) .cal-tile--completed {
    border-width: 2.7px;
    gap: 8.1px;
    padding: 1.8px 19.8px;
    overflow: visible;
  }

  .view-calendar .cal-tile-num,
  .view-calendar .cal-tile--completed .cal-tile-num {
    font-size: 36px;
    line-height: 36px;
  }

  .view-calendar .cal-tile-check {
    right: 0;
    bottom: 0;
    left: auto;
    top: auto;
    width: 18.9px;
    height: 18.9px;
  }

  .view-calendar .cal-tile-check-badge {
    left: 0;
    top: 0;
    width: 18.9px;
    height: 18.9px;
    border-width: 2.7px;
  }

  .view-calendar .cal-tile-check-icon {
    left: auto;
    top: auto;
    right: 3.6px;
    bottom: 5.4px;
    width: 11.7px;
    height: 8.1px;
  }

  .view-calendar .cal-tile-corner--tl { top: 6px; left: 7px; right: auto; bottom: auto; }
  .view-calendar .cal-tile-corner--tr { top: 6px; right: 6px; left: auto; bottom: auto; }
  .view-calendar .cal-tile-corner--bl { bottom: 6px; left: 7px; right: auto; top: auto; }
  .view-calendar .cal-tile-corner--br { bottom: 6px; right: 6px; left: auto; top: auto; }
}

/* ─── Calendar mobile overrides (< 768 px) ─────────────────────────────────
   Matching Figma node 439:2635 "mobile stages" — 390×844px iPhone 13.
   Key Figma dimensions (all page-relative on 390px canvas):
     Card:        350×594px, left=50%, top=99px  (→ cal-layout padding-top=33px)
     Outer frame: scaleY(-1), fills card 350×594
     Inner frame: left=22.58, top=85.33, 304.84×461.94px, scaleY(-1)
     Logo:        page-top=129 → card-top=30px, 80×35px, centred
     Title row:   card-top=85px, gap=10px
     Description: card-top=135px, 313px, MosesText_Inter Medium 18/26
     Legend:      card-top=233px, 249px wide, flex row space-between
     Grid:        page-top=392, page-left=79 → card-top=293, card-left=59
                  3 cols×54px, col-gap=20px, row-gap=15px, 221px wide, 301px tall
     Scrollbar:   page-left=320 → card-left=300; section-relative left=241px
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {

  /* Figma 526:3528: background fills the full 844px iPhone screen on mobile.
     Override the desktop --layout-max-height:720px cap so the grid pattern
     extends edge-to-edge at any device height. */
  .home-stage {
    min-height: var(--app-available-height);
    overflow: visible;
  }

  .page-home {
    width: 100%;         /* ensure grid fills full viewport width */
    min-height: 100vh;   /* fallback */
    min-height: 100dvh;
    overflow: clip;      /* avoid RTL scroll-container anchor shift */
  }

  .view-calendar {
    height: auto;
    min-height: calc(100vh - var(--header-height-mobile));
    min-height: var(--app-available-height);
    overflow: visible;
  }

  /* No bottom overlay on mobile */
  .view-calendar::after {
    display: none;
  }

  /* Phone clip: no white bar on mobile — extend to full height, allow overflow.
     Scale the entire clip (phone + hinge animation) as one unit so the bottom
     of the hand always fits within the viewport. transform-origin: top center
     keeps the phone visually centred while shrinking toward the top. */
  .pm-clip {
    bottom: 0;
    overflow: visible;
    transform: scale(var(--mobile-lp-scale));
    transform-origin: top center;
  }

  .cal-layout {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    /* Figma mobile card top is 99px from the page; with the 68px header that leaves 31px. */
    padding: 31px 0 60px;
    min-height: unset;
    overflow: visible;
  }

  /* Mobile calendar view should not show the hand-held phone mockup. */
  .page-home:has(#view-calendar:not(.hidden)) .pm-clip {
    display: none;
  }

  /* ── Card: 350×599px, centred — Figma node 439:2770 ─────────────────────
     Outer frame PNG (Rectangle24) natural size is 350×599px (Figma height="599").
     Must match exactly — any squish distorts the corner bevel shape.
  ─────────────────────────────────────────────────────────────────────────── */
  .cal-card {
    position: relative;
    width: 350px;
    max-width: calc(100vw - 20px);
    height: 599px;          /* ← matches outer PNG natural height (was 594px) */
    margin: 0 auto;
    overflow: visible;
  }

  /* Outer frame: exactly 350×599px, scaleY(-1) (Figma: -scale-y-100)
     Use mobile PNG — desktop card-border-outer.png has 648×594 proportions
     and distorts the corner bevels when squeezed to 350×599. */
  .cal-card-frame-outer {
    content: url('../assets/images/card-border-outer-mobile.png?v=1791285426');
    left: 0;
    top: 0;
    width: 350px;
    height: 599px;
    max-width: none;
    max-height: none;
    object-fit: fill;       /* fill the exact pixel-matched box — no distortion */
    transform: scaleY(-1);
  }

  /* Inner border: Figma left=22.58px, top=85.33px, 304.84×461.94px, scaleY(-1)
     Use mobile SVG — desktop card-border-inner.svg has corner bevel for the
     648px-wide card and renders a rogue curve on the narrower mobile card. */
  .cal-card-frame-inner {
    content: url('../assets/images/card-border-inner-mobile.svg?v=1791285426');
    left: 22.58px;
    top: 85.33px;
    width: 304.839px;
    height: 461.942px;
    max-width: none;
    max-height: none;
    object-fit: fill;
    transform: scaleY(-1);
  }

  /* Logo: card-top=30px (page:129 − card:99), centred, 80×35px */
  .cal-card-logo {
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 35px;
  }

  /* Title row: card-top=85px (30+35+20), centred, gap=10px */
  .cal-title-row {
    left: 18px;
    right: 18px;
    top: 85px;
    gap: 10px;
    justify-content: center;
  }

  /* Title: MosesDisplay Bold 24px / weight 660 / lh 30 */
  .cal-title {
    font-size: 24px;
    font-weight: 660;
    line-height: 30px;
    white-space: nowrap;
  }

  /* ynet logo in title row: 48×20px */
  .cal-ynet-logo {
    width: 48px;
    height: 20px;
  }

  /* Description: card-top=135px, 313px wide, MosesText_Inter Medium 18/26 */
  .cal-description {
    top: 135px;
    left: 50%;
    transform: translateX(-50%);
    width: 313px;
    height: auto;
    font-family: 'MosesText_Inter', var(--font-body);
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
  }

  /* Legend: card-top=220px (Figma: Frame19.y=129 + legend.y=190 − card.y=99 = 220), 249px wide, flex row space-between */
  .cal-legend {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 220px;
    width: 249px;
    height: 57px;
    display: flex;
    flex-direction: row;
    gap: 0;
    align-items: flex-start;
    justify-content: space-between;
  }

  .cal-legend-item {
    position: relative;
    left: auto;
    top: auto;
    width: 42px;
    height: 57px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
  .cal-legend-item--completed,
  .cal-legend-item--new,
  .cal-legend-item--locked { left: auto; }

  .cal-legend-icon {
    position: relative;
    top: auto;
    left: auto;
    width: 21px;
    height: 21px;
  }

  .cal-legend-label {
    background: white;
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    white-space: pre-wrap;
    margin-top: 4px;
  }

  /* ── Grid section — Figma node 453:3319 ──────────────────────────────────
     Frame 43: x=79, y=392, 221×301 in "mobile stages" frame.
     left = Frame43.x − card.x = 79 − 20 = 59px.
     top  = Frame43.y − card.y = 392 − 99 = 293px.
     width = 287px: spans from left=59 to scrollbar right edge (346px from card left),
             leaving 4px to the card right edge.
  ─────────────────────────────────────────────────────────────────────────── */
  .cal-grid-section {
    position: absolute;
    left: 59px;
    top: 293px;
    width: 287px;       /* 59 + 287 = 346 = scrollbar right edge; 350 − 346 = 4px margin */
    height: 301px;
    overflow: visible;
    margin: 0;
  }

  .cal-grid-border {
    display: none;
  }

  /* 3-column grid: 3×54 + 2×20 = 202px tiles + 7px left pad = ~209px board */
  .cal-game-board {
    position: absolute;
    top: 8px;
    left: 7px;
    width: 209px;
    height: 285px;
    grid-template-columns: repeat(3, 54px);
    column-gap: 20px;
    row-gap: 15px;
    padding: 0;
    max-height: none;
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* Fixed 54×54px tiles — reset the padding-bottom% trick from older mobile styles */
  .cal-tile {
    width: 54px;
    height: 54px;
    min-width: 54px;
    padding-bottom: 0;
    overflow: hidden;
  }

  /* Completed tile — match desktop style, scaled for 54px tile (54/60 = 0.9×)
     border: 3px×0.9=2.7px, gap: 9px×0.9=8.1px, padding: 2px×0.9=1.8px / 22px×0.9=19.8px */
  .cal-tile--completed {
    border: 2.7px solid #000;
    gap: 8.1px;
    padding: 1.8px 19.8px;
    overflow: visible; /* allow badge to overflow bottom-right, matching desktop */
  }

  /* Tile day-number: 36px for mobile (Figma "Micro 5" 36px), static position */
  .cal-tile-num {
    font-size: 36px;
    line-height: 36px;
    position: static;
    top: auto;
    left: auto;
    transform: none;
    margin-top: auto;
    padding-bottom: 1px;
  }

  .cal-tile--completed .cal-tile-num {
    font-size: 36px;
    line-height: 36px;
  }

  /* Completed badge wrapper/badge/icon — exact Figma mobile geometry */
  .cal-tile-check {
    right: 0;
    bottom: 0;
    left: auto;
    top: auto;
    width: 18.9px;
    height: 18.9px;
  }

  .cal-tile-check-badge {
    left: 0;
    top: 0;
    width: 18.9px;
    height: 18.9px;
    border-width: 2.7px;
  }

  /* Replace CSS ::after checkmark with the actual Figma pixel-art SVG */
  .cal-tile-check::after {
    display: none;
  }

  /* Checkmark SVG — exact Figma mobile coordinates in the 54px completed tile */
  .cal-tile-check-icon {
    position: absolute;
    left: auto;
    top: auto;
    right: 3.6px;
    bottom: 5.4px;
    width: 11.7px;
    height: 8.1px;
    display: block;
    pointer-events: none;
  }

  /* Corner dots: Figma positions in 54px tile — TL(left:7 top:6), TR(right:6 top:6),
     BL(left:7 bottom:6), BR(right:6 bottom:6) */
  .cal-tile-corner--tl { top: 6px;    left:  7px; right: auto; bottom: auto; }
  .cal-tile-corner--tr { top: 6px;    right: 6px; left:  auto; bottom: auto; }
  .cal-tile-corner--bl { bottom: 6px; left:  7px; right: auto; top:    auto; }
  .cal-tile-corner--br { bottom: 6px; right: 6px; left:  auto; top:    auto; }

  /* CTA (if visible): centre below card */
  .cal-cta {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    margin-top: 16px;
    display: flex;
    justify-content: center;
  }
}

/* ─── Mobile overrides (< 768px) ──────────────────────────────────────── */
/*
  Figma node 430:1607 "mobile hp" — 390×844px iPhone 13.
  Layout: card centered on top (top=99px from frame), phone mockup below (top=405px).
  Card content is a vertical flex-column (justify-between) — not absolute like desktop.
  All distances below are measured from landing-main top (= page top minus header height).
*/
@media (max-width: 767px) {

  /*
   * Figma node 526:3668 "iPhone 13 & 14 - 1" — 390px wide.
   * Grid bg: ~10 columns across 390px → 39px per cell (vs 54px on desktop).
   * Override the responsive clamp() which only reaches 20px at 390px viewport.
   */
  .page-home {
    background-size: 39px 39px;
    width: 100%;          /* ensure grid fills full viewport width */
    min-height: 100vh;   /* fallback */
    min-height: 100dvh;  /* Figma: bg fills full screen, not capped at 720px */
    overflow: clip;
    --mobile-header-overhang: calc(var(--header-height-mobile) - var(--header-mobile-visual-height));
    /*
     * Scale factor that shrinks the landing composition (card + phone mockup)
     * so the entire phone hand fits within the viewport without being clipped.
     * 859px = phone DOM top from home-stage (323.9px) + phone DOM height (535.146px).
     * At s=1 the composition exactly fills 100dvh on ~932px+ screens; on shorter
     * screens both the card and phone mockup scale down proportionally.
     */
    --mobile-lp-scale: min(1, calc((100dvh - var(--header-height-mobile)) / 859px));
  }

  /* Use dynamic viewport height to avoid mobile browser address-bar issues */
  .view-landing {
    height: calc(100vh - var(--header-height-mobile));       /* fallback */
    height: var(--app-available-height);
    overflow: clip;      /* same RTL reason as page-home */
  }

  /* No bottom strip overlay on mobile — phone mockup scrolls off screen naturally */
  .view-landing::after {
    display: none;
  }

  /* ── Pointing hand: hidden on mobile ── */
  .select-hand-clip {
    display: none;
  }

  /* ── Landing main: position context for absolutely-placed card + phone ── */
  .landing-main {
    position: relative;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    padding: 0;
    overflow: clip;      /* clip, not hidden — avoids RTL scroll-container anchor shift */
    height: var(--app-available-height);
    min-height: unset;
  }

  /* ── Info card ──────────────────────────────────────────────────────────
     Figma (430:1607): card container top=99px, h=328px, w=350px.
     Reference landing-main height = 778px (844px device − 66px header).
     Card and phone are proportionally positioned using dvh so the phone
     remains visible below the card on all screen sizes (no fixed-px mismatch).
  ────────────────────────────────────────────────────────────────────── */
  .landing-card {
    position: absolute;
    /* Align to the visible header wave edge, not the full clipped 68px header box. */
    top: calc(31px - var(--mobile-header-overhang));
    left: 50%;
    transform-origin: top center;
    transform: translateX(-50%) scale(var(--mobile-lp-scale));
    width: 350px;          /* fixed width — card never narrows */
    height: 328px;         /* Figma container h-[328px]; inner frame is 323px */
    z-index: 2;
  }

  /* ── Card frame box ─────────────────────────────────────────────────────
     Mobile outer frame image is 350×323 px (height of the frame art).
     Container (.landing-card) is 328px to allow 5px below frame for shadow.
  ────────────────────────────────────────────────────────────────────── */
  .card-info-frame {
    position: relative;
    width: 350px;
    height: 323px;         /* frame art height; 5px gap to .landing-card 328px bottom */
    transform: none;
    margin-bottom: 0;
  }

  /* Outer border image: Figma Rectangle 24, 350×323, transform: scaleY(-1) only (desktop is scaleX(-1)) */
  .card-frame-outer {
    content: url('../assets/images/card-border-outer-landing-mobile.png?v=1791285426');
    left: 0;
    top: 0;
    width: 350px;
    height: 323px;
    transform: scaleY(-1);
  }

  /* Inner border image: Figma Rectangle 23, left=22.58, top=45.03, 304.84×243.80, scaleY(-1) only */
  .card-frame-inner {
    content: url('../assets/images/card-border-inner-landing-mobile.svg?v=1791285426');
    left: 22.58px;
    top: 45.03px;
    width: 304.839px;
    height: 243.803px;
    transform: scaleY(-1);
  }

  /* ── Aleynu logo: 80×35 px, top=28px, centered ── */
  .card-logo {
    content: url('../assets/icons/logos/aleynu-mobile.svg?v=1791285426');
    top: 28px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 35px;
    max-width: none;
    max-height: none;
  }

  /* ── Title row: top=89px (Figma justify-between over 272px) ────────────
     Items: logo(35) + titleRow(30) + desc(78) + cta(50) = 193px.
     Equal gap = (272-193)/3 = 26.33px.
     Title top = content_top + logo_h + gap = 28 + 35 + 26.33 = 89.33 → 89px.
  ────────────────────────────────────────────────────────────────────── */
  .card-title-row {
    position: absolute;
    top: 87px;
    left: 20px;
    right: 20px;
    width: auto;        /* override fixed desktop width */
    gap: 10px;          /* Figma: gap-[10px] (desktop is 15px) */
    justify-content: center;
  }

  /* ── Title: 24px Bold MosesDisplay_1.03 / weight 660 / lh 30 ── */
  .card-title {
    font-size: 24px;
    line-height: 30px;
    font-weight: 660;
    white-space: nowrap;
  }

  /* ── Ynet logo in title row: Figma 48×20 px (desktop is 70×30) ── */
  .card-ynet-logo {
    width: 48px;
    height: 20px;
  }

  /* ── Description: 18px MosesText_Inter Medium / lh 26 ──────────────────
     Figma: left=20px, width=313px within 350px card.
     justify-between: title_top + title_h + gap = 89 + 30 + 26.33 = 145.33 → 146px.
  ────────────────────────────────────────────────────────────────────── */
  .card-description {
    position: absolute;
    top: 141px;
    left: 50%;
    width: 313px;
    transform: translateX(-50%);
    font-family: 'MosesText_Inter', var(--font-body);
    font-size: 18px;
    font-weight: 500;         /* Medium */
    line-height: 26px;
    text-align: center;
  }

  /* ── CTA button: placed visually inside the card frame ─────────────────
     Figma: button is the 4th justify-between item in the content column.
     Top = 28 (content_top) + 272 (content_h) − 57 (btn_h) = 243px.
     .landing-card is position:relative, so absolute here is within the card.
  ────────────────────────────────────────────────────────────────────── */
  .card-cta {
    position: absolute;
    top: 250px;            /* 28 content_top + 272 content_h − 50 btn_h = 250px */
    left: 50%;
    transform: translateX(-50%);
    padding: 0;
  }

  .btn-start-game {
    width: 150px;
    height: 50px;
  }
/*
  .btn-frame-outer {
    content: url('../assets/images/btn-frame-outer-mobile.svg?v=1791285426');
  }

  .btn-frame-inner {
    content: url('../assets/images/btn-frame-inner-mobile.svg?v=1791285426');
  }
*/
  /* Mobile CTA label: "התחילו לשחק!" (vs desktop "התחל משחק") */
  .btn-start-game-text {
    top: 24%;
    right: 9.33%;
    bottom: 38%;
    left: 10%;
    font-size: 0;            /* hide the desktop Hebrew text content */
  }
  .btn-start-game-text::after {
    content: 'התחילו לשחק!';
    font-size: 18px;
    line-height: 18.65px;
    font-family: 'MosesText_Inter', var(--font-body);
    font-weight: 700;
    color: #000;
  }

  /* ── Phone mockup: Figma node 439:2226 — 464.293×535.146px canvas ──────
     Figma: left=calc(50%−5.85px) −translate-x-1/2 → left = calc(50% − 238px).
     top=405px from page (=  337px from landing-main top).
      Animation: same hinge swing as desktop — starts tilted (0deg inner layers at
      −13.91deg), swings past upright, then settles at 13.91deg.
    transform-origin matches the wrist-side desktop pivot so the motion reads
    left-to-right instead of hinging down from the lower corner.
  ────────────────────────────────────────────────────────────────────── */
  .phone-mockup {
    position: absolute;
    /* Move the full landing composition by the same visible-header correction. */
    top: calc(337px - var(--mobile-header-overhang));
    left: calc(50% - 238px);   /* Figma x=-43px on a 390px canvas */
    bottom: auto;
    width: 464.293px;
    height: 535.146px;
    transform: none;
    transform-origin: var(--phone-hinge-origin-x) var(--phone-hinge-origin-y); /* same wrist-side pivot as desktop */
    rotate: 0deg;                  /* start tilted, animation swings to 13.91deg (upright) */
    animation: pm-hinge-swing 0.82s cubic-bezier(0.22, 1, 0.36, 1) 0.8s 1 forwards;
    overflow: visible;
    pointer-events: none;
    user-select: none;
    z-index: 1;
  }

  /* ── Mobile Layer 1: BG wrapper ────────────────────────────────────────
     Figma (I439:2226;276:3403): wrapper left=−115.21 top=−48.39,
     579.359×631.094px. Inner: rotate(166.09deg) scaleY(-1).
     Image: 464.293×535.146px, object-cover.
  ────────────────────────────────────────────────────────────────────── */
  .pm-bg-wrapper {
    left: -115.21px;
    top: -48.39px;
    width: 579.359px;
    height: 631.094px;
  }
  .pm-bg-img {
    width: 464.293px;
    height: 535.146px;
  }

  /* ── Mobile Layer 2: Newspaper ─────────────────────────────────────────
     Figma (I439:2226;276:3404): wrapper 187.844×232.85px.
     Pre-computed: left=89.474px, top=90.958px.
     Inner: rotate(-13.91deg). Image: 142.859×204.496px.
  ────────────────────────────────────────────────────────────────────── */
  .pm-newspaper-wrapper {
    left: 89.474px;
    top: 90.958px;
    width: 187.844px;
    height: 232.85px;
  }
  .pm-newspaper-img {
    width: 142.859px;
    height: 204.496px;
  }

  /* ── Mobile Layer 3: Notch ─────────────────────────────────────────────
     Figma (I439:2226;276:3405): wrapper left=74.34 top=43.59,
     162.05×82.133px. Bar: 155.532×46.084px, radius 20.162px 20.162px 0 0.
  ────────────────────────────────────────────────────────────────────── */
  .pm-notch-wrapper {
    left: 74.34px;
    top: 43.59px;
    width: 162.05px;
    height: 82.133px;
  }
  .pm-notch {
    width: 155.532px;
    height: 46.084px;
    border-radius: 20.162px 20.162px 0 0;
  }

  /* ── Mobile Layer 4: Chin ──────────────────────────────────────────────
     Figma (I439:2226;276:3406): wrapper left=136.98 top=289.04,
     156.152×92.218px. Inner: rotate(-13.91deg) scaleY(-1). SVG: 146.316×58.757px.
  ────────────────────────────────────────────────────────────────────── */
  .pm-chin-wrapper {
    left: 136.98px;
    top: 289.04px;
    width: 156.152px;
    height: 92.218px;
  }
  .pm-chin-img {
    width: 146.316px;
    height: 58.757px;
  }
}

@media (min-width: 600px) and (max-width: 743px) and (min-height: 900px) {
  .page-home {
    --mobile-lp-scale: clamp(0.9, calc((100dvh - var(--header-height-mobile) - 24px) / 930px), 0.96);
  }

  .page-home:has(#view-calendar:not(.hidden)) .cal-layout {
    padding-top: 22px;
    padding-bottom: 44px;
  }

  .landing-card {
    top: calc(40px - var(--mobile-header-overhang));
  }

  .phone-mockup {
    top: calc(492px - var(--mobile-header-overhang));
    left: 50%;
    transform: translateX(-50%) scale(0.88);
    transform-origin: top center;
  }
}

@media (width: 614px) and (height: 960px) and (orientation: portrait) {
  html:not([data-returning]) .page-home:has(#view-landing:not(.hidden)) .phone-mockup,
  body.page-home:not(.is-returning-user):has(#view-landing:not(.hidden)) .phone-mockup {
    top: calc(337px - var(--mobile-header-overhang)) !important;
    left: calc(50% - 238px) !important;
    transform: none !important;
    transform-origin: var(--phone-hinge-origin-x) var(--phone-hinge-origin-y) !important;
  }

  .page-home:has(#view-calendar:not(.hidden)) .cal-layout {
    padding: 31px 0 60px;
  }
}

@media (min-width: 768px) and (max-width: 959px) and (min-height: 501px) and (orientation: landscape) {
  .page-home {
    --home-header-content-width: calc(100% - 24px);
    --home-header-edge-pad: 12px;
    --calendar-card-scale: clamp(0.62, min(calc((100vw - 96px) / 648px), calc((var(--desktop-stage-height) - 40px) / 594px)), 0.74);
    --desktop-calendar-top-gap: clamp(16px, 2.8vh, 24px);
    --desktop-calendar-right-gap: clamp(12px, 1.8vw, 20px);
  }

  .page-home:has(#view-calendar:not(.hidden)) .pm-clip {
    display: none;
  }

  .page-home:has(#view-calendar:not(.hidden)) .cal-layout {
    justify-content: center;
    padding-right: clamp(16px, 2.4vw, 24px);
    padding-left: clamp(16px, 2.4vw, 24px);
  }
}

/* ─── Select / Pointer Hand — Figma node 156:11203 ─────────────────────
   Two SVG layers (Vector outline + Group shading) composited into one hand.
   Anchored to the bottom of #view-landing, horizontally centred.
   Animation: slides up from wrist-only visible → full hand → back down.
──────────────────────────────────────────────────────────────────────── */
/* ─── Select / Pointer Hand — Figma node 156:11203 ─────────────────────
   .select-hand-clip: clip container anchored at the bottom of the gray grid
     (bottom: 0 = top of .view-landing::after white bar).
     overflow: hidden means the wrist/palm is clipped exactly at the grid edge
     regardless of z-index — nothing below this line is ever visible.
   .select-hand: animated inner element that rises/falls inside the clip box.
──────────────────────────────────────────────────────────────────────── */
.select-hand-clip {
  position: absolute;
  /* Top of white bar = bottom of visible grid */
  bottom: 0;
  /* Centre under CTA button: card right-inset=108px, card-width=524px
     → button centre = 108 + 262 = 370px from right
     → left edge of 130px hand = 370 − 65 = 305px from right */
  right: calc(var(--desktop-right-gap) + (var(--landing-card-width) / 2) - (65px * var(--select-hand-scale)));
  width: calc(130px * var(--select-hand-scale));
  height: calc(238px * var(--select-hand-scale));
  overflow: hidden;   /* clips the hand at the grid/white-bar boundary */
  z-index: 4;
  pointer-events: none;
}

.select-hand {
  position: absolute;
  bottom: 0;
  left: 0;
  width: calc(130px * var(--select-hand-scale));
  height: calc(238px * var(--select-hand-scale));
  will-change: transform;
  animation: select-hand-rise 3s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

/* Stack the two SVG images exactly on top of each other */
.select-hand-vector,
.select-hand-group {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ---- Keyframe: fingertip barely visible → full hand → back down ---- */
/* translateY(93%) = 221px down → 17px of fingertip visible at clip top  */
@keyframes select-hand-rise {
  0%   { transform: translateY(93%); }   /* start — fingertip only */
  30%  { transform: translateY(0);   }   /* rise to full reveal    */
  60%  { transform: translateY(0);   }   /* hold at top            */
  100% { transform: translateY(93%); }   /* back down              */
}

/* Hide the hand whenever the calendar view is active */
.page-home:has(#view-calendar:not(.hidden)) .select-hand-clip {
  display: none;
}

/* Also hide immediately for returning users (before JS runs) */
[data-returning] .select-hand-clip {
  display: none;
}

/* Hide the landing pointer hand only for the approved tablet matrix from the
   responsive plan. This keeps the desktop 1280x720 baseline and phone layouts
   unchanged while removing the hand from every listed tablet viewport. */
@media (width: 744px) and (height: 1133px),
       (width: 800px) and (height: 1200px),
       (width: 800px) and (height: 1280px),
       (width: 800px) and (height: 1340px),
       (width: 820px) and (height: 1180px),
       (width: 834px) and (height: 1194px),
       (width: 1133px) and (height: 744px),
       (width: 1180px) and (height: 820px),
       (width: 1194px) and (height: 834px),
       (width: 1200px) and (height: 800px),
       (width: 1280px) and (height: 800px),
       (width: 1340px) and (height: 800px),
       (width: 1366px) and (height: 1024px) {
  html:not([data-returning]) .page-home:has(#view-landing:not(.hidden)) .select-hand-clip,
  body.page-home:not(.is-returning-user):has(#view-landing:not(.hidden)) .select-hand-clip {
    display: none !important;
  }
}

@media (max-height: 549px) {
  html:not([data-returning]) .page-home:has(#view-landing:not(.hidden)) .select-hand-clip,
  body.page-home:not(.is-returning-user):has(#view-landing:not(.hidden)) .select-hand-clip {
    display: none !important;
  }
}

@media (min-height: 550px) {
  html:not([data-returning]) .page-home:has(#view-landing:not(.hidden)) .select-hand-clip,
  body.page-home:not(.is-returning-user):has(#view-landing:not(.hidden)) .select-hand-clip {
    display: block !important;
  }
}

@media (orientation: portrait) {
  html:not([data-returning]) .page-home:has(#view-landing:not(.hidden)) .select-hand-clip,
  body.page-home:not(.is-returning-user):has(#view-landing:not(.hidden)) .select-hand-clip {
    display: none !important;
  }
}

@media (orientation: landscape) and (max-width: 959px) and (max-height: 500px) {
  .page-home {
    background-size: 35px 35px;
    min-height: 100dvh;
    height: 100dvh;
    overflow: clip;
    --landing-card-scale: clamp(0.54, calc((100dvh - var(--header-height-mobile) - 12px) / 320px), 0.9);
    --calendar-card-scale: 0.62;
  }

  .page-home .home-stage,
  .page-home .view-landing,
  .page-home .view-calendar {
    min-height: var(--app-available-height);
    height: var(--app-available-height);
    overflow-y: hidden;
    overflow-x: clip;
  }

  .page-home .pm-clip,
  .page-home .select-hand-clip {
    display: none;
  }

  /* Override the higher-specificity :has() rules from the 900-1024×680 blocks
     that otherwise push the phone card and reserve left-padding for a phone mockup
     at this small-phone landscape viewport. Same specificity (0,3,0) but later
     in the cascade so these rules win. */
  .page-home:has(#view-landing:not(.hidden)) .pm-clip {
    display: none !important;
  }

  .page-home .landing-main,
  .page-home:has(#view-landing:not(.hidden)) .landing-main {
    min-height: var(--app-available-height);
    padding: 8px 0 10px;
    justify-content: center;
    align-items: center;
    overflow: visible;
  }

  .page-home .landing-card {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: var(--landing-card-width);
    height: auto;
    max-width: calc(100vw - 20px);
    margin: 0 auto;
  }

  .page-home .card-info-frame {
    width: 100%;
    height: var(--landing-card-frame-height);
    transform: none;
    margin-bottom: 0;
  }

  .page-home .card-frame-outer {
    content: normal;
    top: 0;
    left: calc(-5px * var(--landing-card-scale));
    width: 100%;
    height: 100%;
    transform: scaleX(-1);
  }

  .page-home .card-frame-inner {
    content: normal;
    top: calc(25.7px * var(--landing-card-scale));
    left: calc(28.81px * var(--landing-card-scale));
    width: calc(456.387px * var(--landing-card-scale));
    height: calc(183.418px * var(--landing-card-scale));
    transform: scaleX(-1);
  }

  .page-home .card-logo {
    content: normal;
    top: calc(30px * var(--landing-card-scale));
    width: calc(97px * var(--landing-card-scale));
    height: calc(42px * var(--landing-card-scale));
  }

  .page-home .card-title-row {
    top: calc(98px * var(--landing-card-scale));
    left: calc(39px * var(--landing-card-scale));
    right: calc(39px * var(--landing-card-scale));
    width: auto;
    gap: calc(15px * var(--landing-card-scale));
  }

  .page-home .card-title {
    font-size: calc(35px * var(--landing-card-scale));
    line-height: calc(35px * var(--landing-card-scale));
    font-weight: 700;
  }

  .page-home .card-ynet-logo {
    width: calc(70px * var(--landing-card-scale));
    height: calc(30px * var(--landing-card-scale));
  }

  .page-home .card-description {
    top: calc(141px * var(--landing-card-scale));
    width: calc(435px * var(--landing-card-scale));
    font-family: 'MosesText_Inter', var(--font-body);
    font-size: calc(20px * var(--landing-card-scale));
    font-weight: 400;
    line-height: normal;
  }

  .page-home .card-cta {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    padding-top: calc(20px * var(--landing-card-scale));
  }

  .page-home .btn-start-game {
    width: calc(150px * var(--landing-card-scale));
    height: calc(50px * var(--landing-card-scale));
  }

  .page-home .btn-start-game-text {
    top: 24%;
    right: 9.33%;
    bottom: 38%;
    left: 10%;
    font-size: calc(18px * var(--landing-card-scale));
    font-family: 'MosesText_Inter', 'Rubik', Arial, sans-serif;
    font-weight: 700;
    line-height: calc(18.65px * var(--landing-card-scale));
  }

  .page-home .btn-start-game-text::after {
    content: none;
  }

  .page-home .view-calendar,
  .page-home:has(#view-calendar:not(.hidden)) .view-calendar {
    height: var(--app-available-height);
    min-height: 0;
    padding-bottom: 0;
    overflow-x: clip;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior: contain;
  }

  .page-home .cal-layout,
  .page-home:has(#view-calendar:not(.hidden)) .cal-layout {
    min-height: 0;
    height: auto;
    padding: 8px 0 16px;
    justify-content: flex-start;
    align-items: center;
    overflow: visible;
  }

  .page-home .cal-card {
    width: min(350px, calc(100vw - 18px));
    height: auto;
    min-height: 334px;
    max-height: none;
    margin: 0 auto;
    overflow: visible;
  }

  .page-home .cal-card-frame-outer {
    width: 100%;
    height: 100%;
  }

  .page-home .cal-card-frame-inner {
    top: 54px;
    left: 18px;
    width: calc(100% - 36px);
    height: calc(100% - 74px);
  }

  .page-home .cal-card-logo {
    top: 16px;
    width: 62px;
    height: 27px;
  }

  .page-home .cal-title-row {
    top: 50px;
    left: 14px;
    right: 14px;
    gap: 8px;
  }

  .page-home .cal-title {
    font-size: 19px;
    line-height: 23px;
  }

  .page-home .cal-ynet-logo {
    width: 36px;
    height: 15px;
  }

  .page-home .cal-description {
    top: 79px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 34px);
    height: auto;
    font-size: 14px;
    line-height: 18px;
  }

  .page-home .cal-legend {
      top: 136px;
    left: 50%;
    right: auto;
    width: 249px;
    height: 57px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: row;
    gap: 0;
    justify-content: space-between;
    align-items: flex-start;
  }

  .page-home .cal-legend-item {
    position: relative;
    left: auto;
    top: auto;
    width: 42px;
    height: 57px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  .page-home .cal-legend-item--completed,
  .page-home .cal-legend-item--new,
  .page-home .cal-legend-item--locked {
    left: auto;
  }

  .page-home .cal-legend-icon {
    position: relative;
    top: auto;
    left: auto;
    width: 21px;
    height: 21px;
  }

  .page-home .cal-legend-label {
    background: white;
    position: relative;
    top: auto;
    left: auto;
    width: 42px;
    transform: none;
    margin-top: 4px;
    font-size: 12px;
    line-height: 16px;
  }

  .page-home .cal-grid-section {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    width: 88%;
    height: auto;
    bottom: auto;
    margin: 199px auto 16px;
    overflow: visible;
  }

  .page-home .cal-game-board {
    position: relative;
    top: 0;
    left: 0;
    width: calc(100% - 28px);
    height: auto;
    grid-template-columns: repeat(6, 40px);
    justify-content: start;
    column-gap: 8px;
    row-gap: 8px;
    padding: 0;
    overflow: visible;
  }

  .page-home .cal-scrollbar {
    display: none;
  }

  .page-home .cal-tile {
    width: 40px;
    height: 40px;
    min-width: 40px;
  }

  .page-home .cal-tile-num,
  .page-home .cal-tile--completed .cal-tile-num {
    font-size: 27px;
    line-height: 27px;
  }

  .page-home .cal-tile--completed {
    gap: 4px;
    padding: 1px 14px;
    border-width: 2px;
  }

  .page-home .cal-tile-check {
    right: 0;
    bottom: 0;
    left: auto;
    top: auto;
    width: 15px;
    height: 15px;
  }

  .page-home .cal-tile-check-badge {
    left: 0;
    top: 0;
    width: 15px;
    height: 15px;
    border-width: 2px;
  }

  .page-home .cal-tile-check-icon {
    left: auto;
    top: auto;
    right: 3px;
    bottom: 4.5px;
    width: 9px;
    height: 6px;
  }
}

@media (orientation: landscape) and (max-width: 959px) and (max-height: 363px) {
  .page-home:has(#view-calendar:not(.hidden)) .cal-card {
    min-height: 334px;
  }
}

@media (max-width: 767px) and (orientation: portrait) {
  .page-home:has(#view-landing:not(.hidden)) {
    --mobile-lp-scale: 0.9;
  }

  .page-home .cal-legend-label,
  .cal-legend-label {
    background: white;
    font-size: 12px;
    line-height: 16px;
  }
}

/* Mobile landing recovery for short portrait screens: when the device height is
   below the approved 720px baseline, let the page grow to that baseline and
   scroll vertically so the phone-hand artwork remains reachable. */
@media (max-width: 767px) and (orientation: portrait) and (max-height: 719px) {
  .page-home:has(#view-landing:not(.hidden)) {
    min-height: 720px;
    overflow-x: clip;
    overflow-y: auto;
  }

  .page-home:has(#view-landing:not(.hidden)) .home-stage,
  .page-home:has(#view-landing:not(.hidden)) .view-landing,
  .page-home:has(#view-landing:not(.hidden)) .landing-main {
    height: auto;
    min-height: calc(720px - var(--header-height-mobile));
    overflow: visible;
  }

  .page-home:has(#view-landing:not(.hidden)) .pm-clip {
    overflow: visible;
  }
}

@media (min-width: 744px) and (max-width: 799px) and (orientation: portrait) {
  .page-home:has(#view-calendar:not(.hidden)) .cal-layout {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 22px;
    padding-bottom: 44px;
    min-height: unset;
    overflow: visible;
  }

  #view-calendar:not(.hidden) .cal-card {
    position: relative;
    width: 350px;
    max-width: calc(100vw - 20px);
    height: 599px;
    margin: 0 auto;
    transform: scale(var(--responsive-mobile-scale));
    transform-origin: top center;
    overflow: visible;
  }

  #view-calendar:not(.hidden) .cal-card-frame-outer {
    content: url('../assets/images/card-border-outer-mobile.png?v=1791285426');
    width: 350px;
    height: 599px;
    transform: scaleY(-1);
  }

  #view-calendar:not(.hidden) .cal-card-frame-inner {
    content: url('../assets/images/card-border-inner-mobile.svg?v=1791285426');
    left: 22.58px;
    top: 85.33px;
    width: 304.839px;
    height: 461.942px;
    transform: scaleY(-1);
    display: block;
  }

  #view-calendar:not(.hidden) .cal-card-logo {
    top: 30px;
    left: 50%;
    width: 80px;
    height: 35px;
    transform: translateX(-50%);
  }

  #view-calendar:not(.hidden) .cal-title-row {
    left: 18px;
    right: 18px;
    top: 85px;
    gap: 10px;
    justify-content: center;
  }

  #view-calendar:not(.hidden) .cal-title {
    font-size: 24px;
    font-weight: 660;
    line-height: 30px;
    white-space: nowrap;
  }

  #view-calendar:not(.hidden) .cal-ynet-logo {
    width: 48px;
    height: 20px;
  }

  #view-calendar:not(.hidden) .cal-description {
    top: 135px;
    left: 50%;
    width: 313px;
    height: auto;
    transform: translateX(-50%);
    font-family: 'MosesText_Inter', var(--font-body);
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
  }

  #view-calendar:not(.hidden) .cal-legend {
    position: absolute;
    left: 50%;
    top: 220px;
    width: 249px;
    height: 57px;
    display: flex;
    flex-direction: row;
    gap: 0;
    align-items: flex-start;
    justify-content: space-between;
    transform: translateX(-50%);
  }

  #view-calendar:not(.hidden) .cal-legend-item {
    position: relative;
    left: auto;
    top: auto;
    width: 54px;
    height: 57px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
  }

  #view-calendar:not(.hidden) .cal-legend-item--completed,
  #view-calendar:not(.hidden) .cal-legend-item--new,
  #view-calendar:not(.hidden) .cal-legend-item--locked {
    left: auto;
  }

  #view-calendar:not(.hidden) .cal-legend-icon {
    position: relative;
    top: auto;
    left: auto;
    width: 21px;
    height: 21px;
  }

  #view-calendar:not(.hidden) .cal-legend-label {
    background: white;
    position: relative;
    top: auto;
    left: auto;
    margin-top: 0;
    width: 54px;
    transform: none;
    text-align: center;
    line-height: 14px;
    white-space: pre-wrap;
  }

  #view-calendar:not(.hidden) .cal-grid-section {
    position: absolute;
    left: 59px;
    top: 293px;
    width: 287px;
    height: 301px;
    margin: 0;
    overflow: visible;
  }

  #view-calendar:not(.hidden) .cal-grid-border {
    display: none;
  }

  #view-calendar:not(.hidden) .cal-game-board {
    position: absolute;
    top: 8px;
    left: 7px;
    width: 209px;
    height: 285px;
    grid-template-columns: repeat(3, 54px);
    column-gap: 20px;
    row-gap: 15px;
    padding: 0;
    max-height: none;
    overflow-y: auto;
    overflow-x: hidden;
  }

  #view-calendar:not(.hidden) .cal-tile {
    width: 54px;
    height: 54px;
    min-width: 54px;
    padding-bottom: 0;
    overflow: hidden;
  }

  #view-calendar:not(.hidden) .cal-tile--completed {
    border-width: 2.7px;
    gap: 8.1px;
    padding: 1.8px 19.8px;
    overflow: visible;
  }

  #view-calendar:not(.hidden) .cal-tile-num,
  #view-calendar:not(.hidden) .cal-tile--completed .cal-tile-num {
    font-size: 36px;
    line-height: 36px;
  }
}

@media (min-width: 835px) and (max-width: 1023px) and (orientation: portrait) {
  .page-home:has(#view-calendar:not(.hidden)) .cal-layout {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: clamp(24px, 3vh, 36px);
    padding-bottom: 52px;
    min-height: unset;
    overflow: visible;
  }

  #view-calendar:not(.hidden) .cal-card {
    position: relative;
    width: 350px;
    max-width: calc(100vw - 20px);
    height: 599px;
    margin: 0 auto;
    transform: scale(var(--responsive-mobile-scale));
    transform-origin: top center;
    overflow: visible;
  }

  #view-calendar:not(.hidden) .cal-card-frame-outer {
    content: url('../assets/images/card-border-outer-mobile.png?v=1791285426');
    width: 350px;
    height: 599px;
    transform: scaleY(-1);
  }

  #view-calendar:not(.hidden) .cal-card-frame-inner {
    content: url('../assets/images/card-border-inner-mobile.svg?v=1791285426');
    left: 22.58px;
    top: 85.33px;
    width: 304.839px;
    height: 461.942px;
    transform: scaleY(-1);
    display: block;
  }

  #view-calendar:not(.hidden) .cal-card-logo {
    top: 30px;
    left: 50%;
    width: 80px;
    height: 35px;
    transform: translateX(-50%);
  }

  #view-calendar:not(.hidden) .cal-title-row {
    left: 18px;
    right: 18px;
    top: 85px;
    gap: 10px;
    justify-content: center;
  }

  #view-calendar:not(.hidden) .cal-title {
    font-size: 24px;
    font-weight: 660;
    line-height: 30px;
    white-space: nowrap;
  }

  #view-calendar:not(.hidden) .cal-ynet-logo {
    width: 48px;
    height: 20px;
  }

  #view-calendar:not(.hidden) .cal-description {
    top: 135px;
    left: 50%;
    width: 313px;
    height: auto;
    transform: translateX(-50%);
    font-family: 'MosesText_Inter', var(--font-body);
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
  }

  #view-calendar:not(.hidden) .cal-legend {
    position: absolute;
    left: 50%;
    top: 220px;
    width: 249px;
    height: 57px;
    display: flex;
    flex-direction: row;
    gap: 0;
    align-items: flex-start;
    justify-content: space-between;
    transform: translateX(-50%);
  }

  #view-calendar:not(.hidden) .cal-legend-item {
    position: relative;
    left: auto;
    top: auto;
    width: 54px;
    height: 57px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
  }

  #view-calendar:not(.hidden) .cal-legend-item--completed,
  #view-calendar:not(.hidden) .cal-legend-item--new,
  #view-calendar:not(.hidden) .cal-legend-item--locked {
    left: auto;
  }

  #view-calendar:not(.hidden) .cal-legend-icon {
    position: relative;
    top: auto;
    left: auto;
    width: 21px;
    height: 21px;
  }

  #view-calendar:not(.hidden) .cal-legend-label {
    background: white;
    position: relative;
    top: auto;
    left: auto;
    margin-top: 0;
    width: 54px;
    transform: none;
    text-align: center;
    line-height: 14px;
    white-space: pre-wrap;
  }

  #view-calendar:not(.hidden) .cal-grid-section {
    position: absolute;
    left: 59px;
    top: 293px;
    width: 287px;
    height: 301px;
    margin: 0;
    overflow: visible;
  }

  #view-calendar:not(.hidden) .cal-grid-border {
    display: none;
  }

  #view-calendar:not(.hidden) .cal-scrollbar {
    left: auto;
    right: 0;
  }

  #view-calendar:not(.hidden) .cal-game-board {
    position: absolute;
    top: 8px;
    left: 7px;
    width: 209px;
    height: 285px;
    grid-template-columns: repeat(3, 54px);
    column-gap: 20px;
    row-gap: 15px;
    padding: 0;
    max-height: none;
    overflow-y: auto;
    overflow-x: hidden;
  }

  #view-calendar:not(.hidden) .cal-tile {
    width: 54px;
    height: 54px;
    min-width: 54px;
    padding-bottom: 0;
    overflow: hidden;
  }

  #view-calendar:not(.hidden) .cal-tile--completed {
    border-width: 2.7px;
    gap: 8.1px;
    padding: 1.8px 19.8px;
    overflow: visible;
  }

  #view-calendar:not(.hidden) .cal-tile-num,
  #view-calendar:not(.hidden) .cal-tile--completed .cal-tile-num {
    font-size: 36px;
    line-height: 36px;
  }
}

@media (min-width: 800px) and (max-width: 1023px) and (orientation: portrait) {
  .page-home {
    --responsive-mobile-scale: clamp(1.24, min(calc((100vw - 22px) / 350px), calc((100vh - 176px) / 860px)), 1.42);
  }

  .page-home:has(#view-calendar:not(.hidden)) .cal-layout {
    padding-top: 22px;
    padding-bottom: 58px;
  }

  #view-calendar:not(.hidden) .cal-title-row {
    top: 82px;
    left: 16px;
    right: 16px;
    gap: 11px;
  }

  #view-calendar:not(.hidden) .cal-title {
    font-size: 25px;
    line-height: 30px;
  }

  #view-calendar:not(.hidden) .cal-ynet-logo {
    width: 50px;
    height: 21px;
  }

  #view-calendar:not(.hidden) .cal-description {
    top: 130px;
    left: 50%;
    transform: translateX(-50%);
    width: 286px;
    height: auto;
    font-size: 18px;
    line-height: 26px;
  }

  #view-calendar:not(.hidden) .cal-legend {
    top: 224px;
    width: 260px;
  }

  #view-calendar:not(.hidden) .cal-legend-item {
    width: 58px;
    height: 62px;
    gap: 4px;
  }

  #view-calendar:not(.hidden) .cal-legend-icon {
    width: 22px;
    height: 22px;
  }

  #view-calendar:not(.hidden) .cal-legend-label {
    background: white;
    width: 58px;
    font-size: 12px;
    line-height: 15px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) and (max-height: 1111px) and (orientation: portrait) {
  #view-calendar:not(.hidden) .cal-tile-check {
    width: 18.9px;
    height: 18.9px;
    right: 0;
    bottom: 0;
    left: auto;
    top: auto;
  }

  #view-calendar:not(.hidden) .cal-tile-check-badge {
    left: 0;
    top: 0;
    width: 18.9px;
    height: 18.9px;
    border-width: 2.7px;
  }

  #view-calendar:not(.hidden) .cal-tile-check-icon {
    left: auto;
    top: auto;
    right: 3.6px;
    bottom: 5.4px;
    width: 11.7px;
    height: 8.1px;
  }
}

/* Shared header contract: keep homepage-specific width tuning in variables only. */
.page-home {
  --header-content-max-width: var(--home-header-content-width);
  --header-content-inline-gutter: 16px;
  --header-left-pad: var(--home-header-edge-pad);
  --header-right-pad: calc(var(--home-header-edge-pad) - 1px);
}

@media (min-width: 1280px) {
  .page-home {
    --header-content-inline-gutter: 0px;
  }
}

@media (min-width: 768px) {
  .page-home .site-header-bar {
    width: 100%;
    max-width: none;
    margin: 0;
  }

  .page-home .header-haatar-logo {
    right: var(--header-logo-haatar-right);
  }

  .page-home .header-ynet-group {
    right: var(--header-logo-ynet-right);
  }
}

/* Final guard: when calendar is active, prevent page-level scroll in both axes.
   This is intentionally at end-of-file to override breakpoint-specific rules above. */
html:has(body.page-home #view-calendar:not(.hidden)),
body.page-home:has(#view-calendar:not(.hidden)) {
  overflow: hidden !important;
}

body.page-home:has(#view-calendar:not(.hidden)) {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

@supports (height: 100dvh) {
  body.page-home:has(#view-calendar:not(.hidden)) {
    min-height: 100dvh;
  }
}

body.page-home:has(#view-calendar:not(.hidden)) .home-stage,
body.page-home:has(#view-calendar:not(.hidden)) #view-calendar,
body.page-home:has(#view-calendar:not(.hidden)) .cal-layout {
  height: var(--app-available-height) !important;
  min-height: var(--app-available-height) !important;
  overflow-x: clip !important;
}

body.page-home:has(#view-calendar:not(.hidden)) .home-stage {
  flex: 0 0 auto;
}

body.page-home:has(#view-calendar:not(.hidden)) .site-footer {
  flex: 0 0 auto;
}

body.page-home:has(#view-calendar:not(.hidden)) .site-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
}

body.page-home:has(#view-calendar:not(.hidden)) .home-stage,
body.page-home:has(#view-calendar:not(.hidden)) #view-calendar {
  overflow-y: hidden !important;
}

body.page-home:has(#view-calendar:not(.hidden)) .cal-layout {
  overflow-y: visible !important;
}

/* Above 1200 and up to 1360 landscape: Figma-sized hand, vertically pinned
   with percentages so 650–900vh keep the phone on-screen (wrist may clip). */
@media (min-width: 1201px) and (max-width: 1360px) and (orientation: landscape) {
  html:not([data-returning]) .page-home:has(#view-landing:not(.hidden)),
  body.page-home:not(.is-returning-user):has(#view-landing:not(.hidden)),
  .page-home:has(#view-landing:not(.hidden)) {
    --landing-card-scale: 0.86;
    --desktop-phone-scale: clamp(0.72, calc((var(--desktop-stage-height) - 12px) / 680px), 0.92);
    --desktop-phone-left: clamp(-96px, -7vw, -64px);
    --desktop-phone-top: calc(-4% - (818px * (1 - var(--desktop-phone-scale))));
  }

  html:not([data-returning]) .page-home:has(#view-landing:not(.hidden)) .phone-mockup,
  body.page-home:not(.is-returning-user):has(#view-landing:not(.hidden)) .phone-mockup,
  .page-home:has(#view-landing:not(.hidden)) .pm-clip .phone-mockup {
    left: var(--desktop-phone-left) !important;
    top: var(--desktop-phone-top) !important;
    transform: scale(var(--desktop-phone-scale)) !important;
    transform-origin: var(--phone-hinge-origin-x) var(--phone-hinge-origin-y) !important;
    scale: none !important;
    animation: pm-hinge-swing 0.82s cubic-bezier(0.22, 1, 0.36, 1) 0.8s 1 forwards !important;
  }

  html:not([data-returning]) .page-home:has(#view-landing:not(.hidden)) .landing-main,
  body.page-home:not(.is-returning-user):has(#view-landing:not(.hidden)) .landing-main,
  .page-home:has(#view-landing:not(.hidden)) .landing-main {
    padding-top: 56px !important;
    padding-right: 48px !important;
    padding-bottom: 24px !important;
    padding-left: 560px !important;
  }

  html[data-returning] .page-home,
  body.page-home.is-returning-user,
  .page-home:has(#view-calendar:not(.hidden)) {
    --calendar-card-scale: clamp(0.72, calc((var(--desktop-stage-height) - 24px) / 594px), 0.88);
    --desktop-calendar-top-gap: 16px;
    --desktop-calendar-right-gap: 24px;
    --desktop-phone-scale: clamp(0.72, calc((var(--desktop-stage-height) - 12px) / 680px), 0.92);
    --desktop-phone-left: clamp(-96px, -7vw, -64px);
    --desktop-phone-top: calc(-4% - (818px * (1 - var(--desktop-phone-scale))));
  }

  html[data-returning] .page-home .pm-clip,
  body.page-home.is-returning-user .pm-clip,
  .page-home:has(#view-calendar:not(.hidden)) .pm-clip {
    display: block !important;
  }

  html[data-returning] .page-home .cal-layout,
  body.page-home.is-returning-user .cal-layout,
  .page-home:has(#view-calendar:not(.hidden)) .cal-layout {
    padding-top: 16px !important;
    padding-right: 24px !important;
    padding-bottom: 16px !important;
    padding-left: 420px !important;
    justify-content: flex-start !important;
  }

  html[data-returning] .page-home .phone-mockup,
  body.page-home.is-returning-user .phone-mockup,
  .page-home:has(#view-calendar:not(.hidden)) .phone-mockup {
    left: var(--desktop-phone-left) !important;
    top: var(--desktop-phone-top) !important;
    transform: scale(var(--desktop-phone-scale)) !important;
    transform-origin: var(--phone-hinge-origin-x) var(--phone-hinge-origin-y) !important;
    scale: none !important;
    animation: pm-hinge-swing 0.82s cubic-bezier(0.22, 1, 0.36, 1) 0.8s 1 forwards !important;
  }
}

/* 1201-1360 × ~650: only tighten the calendar card. Hand position/scale come
   from the percentage-pinned rule above so the phone is not clipped at the top. */
@media (min-width: 1201px) and (max-width: 1360px) and (max-height: 680px) and (orientation: landscape) {
  html[data-returning] .page-home,
  body.page-home.is-returning-user,
  .page-home:has(#view-calendar:not(.hidden)) {
    --calendar-card-scale: 0.78;
    --desktop-calendar-top-gap: 8px;
  }

  html[data-returning] .page-home .cal-layout,
  body.page-home.is-returning-user .cal-layout,
  .page-home:has(#view-calendar:not(.hidden)) .cal-layout {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  html:not([data-returning]) .page-home:has(#view-landing:not(.hidden)) .landing-main,
  body.page-home:not(.is-returning-user):has(#view-landing:not(.hidden)) .landing-main {
    padding-top: 36px !important;
    padding-bottom: 12px !important;
  }

  html:not([data-returning]) .page-home:has(#view-landing:not(.hidden)),
  body.page-home:not(.is-returning-user):has(#view-landing:not(.hidden)) {
    --landing-card-scale: 0.72;
  }
}

/* EquallyAI launcher: bottom-right on mobile portrait landing only
   (not calendar). Overrides the widget's inline top-right mobile position. */
@media (max-width: 450px) and (orientation: portrait) {
  html:not([data-returning]) .page-home:has(#view-landing:not(.hidden)) #equally-ai___init-button,
  body.page-home:not(.is-returning-user):has(#view-landing:not(.hidden)) #equally-ai___init-button {
    top: auto !important;
    bottom: 20px !important;
    right: 20px !important;
    left: auto !important;
  }

  /* Calendar only: shrink the 599px card when it would sit under the fixed
     footer, preserving frame proportions via scale (not height squash). */
  .page-home:has(#view-calendar:not(.hidden)) .cal-layout {
    padding: 12px 0 0;
  }

  .page-home:has(#view-calendar:not(.hidden)) .cal-card {
    /* Keep the 599px design box. The column flex layout would otherwise shrink
       the frame while the tiles stay at their original offsets. */
    height: 599px;
    min-height: 599px;
    flex-shrink: 0;
    /* Fallback until load. viewport-fit.js then sets the measured scale from
       the card top and the fixed footer, after iOS Safari places its toolbar. */
    --cal-portrait-fit-scale: min(1, var(--cal-portrait-fit-scale-measured, calc((var(--app-available-height) - 24px) / 599px)));
    transform: scale(var(--cal-portrait-fit-scale));
    transform-origin: top center;
    /* Collapse unused layout space left by transform:scale */
    margin-bottom: calc((var(--cal-portrait-fit-scale) - 1) * 599px);
  }
}

/* Short phone landscape (e.g. 570×290): the EOF calendar lock above uses
   overflow-y:hidden !important on #view-calendar, which makes the card
   unreachable. Re-open a single vertical scroller on the calendar view. */
@media (orientation: landscape) and (max-width: 959px) and (max-height: 500px) {
  body.page-home:has(#view-calendar:not(.hidden)) .home-stage {
    overflow: hidden !important;
    height: var(--app-available-height) !important;
    min-height: 0 !important;
  }

  body.page-home:has(#view-calendar:not(.hidden)) #view-calendar,
  body.page-home:has(#view-calendar:not(.hidden)) .view-calendar {
    height: 100% !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior: contain;
  }

  body.page-home:has(#view-calendar:not(.hidden)) .cal-layout {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
}