/* =============================================================
  GAME.CSS - Active guessing game page (game.html)
   Figma node 131-2309 | Stack: Vanilla HTML/CSS/JS | RTL Hebrew
   ============================================================= */

/* Page layout */
.page-game {
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  direction: ltr;
  --game-desktop-grid-size: clamp(54px, 4.22vw, 72px);
  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: var(--game-desktop-grid-size) var(--game-desktop-grid-size);
  background-position: top left;
  --game-stage-height: var(--app-available-height);
  --game-desktop-reference-width: 1280px;
  --game-desktop-reference-height: 720px;
  --game-footer-clearance: calc(var(--site-footer-height) + 4px);
  --game-panel-height: max(0px, calc(var(--game-stage-height) - var(--game-footer-clearance)));
  --game-panel-width: clamp(440px, 45vw, 760px);
  --game-phone-top: 41px;
  --game-phone-left: -43px;
  --game-hand-bottom-clip: 0px;
  --game-phone-scale: clamp(0.42,
    min(
      calc(100vh / var(--game-desktop-reference-height)),
      calc((100vw - var(--game-panel-width) - 158px) / 546px)
    ),
    1.12);
  --pm-top-chrome-top: 8px;
  --pm-top-chrome-height: 72px;
  --pm-bottom-chrome-top: 435.87px;
  /* 546×629 overlay: uniform scale of the 401.32 mobile article screen (× 546/401.32). */
  --pm-screen-left: 178.48px;
  --pm-screen-top: 28.46px;
  --pm-screen-width: 258.5px;
  --pm-screen-bottom: 514.27px;
  --pm-screen-height: calc(var(--pm-screen-bottom) - var(--pm-screen-top));
  --pm-panel-left: 190.49px;
  --pm-panel-width: 245.59px;
  --pm-title-left: 200.64px;
  --pm-title-width: 226.2px;
  --pm-subtitle-left: 195.1px;
  --pm-subtitle-width: 233.58px;
  --pm-upper-top: 83px;
  --pm-upper-title-top-gap: 6.9px;
  --pm-upper-title-bottom-gap: 7.66px;
  --pm-panels-gap: 8px;
  --pm-lower-bottom-inset: 7px;
  --pm-lower-bottom: calc(var(--pm-screen-bottom) - var(--pm-lower-bottom-inset));
  --pm-lower-min-height: 55px;
  --pm-lower-content-top-gap: 9px;
  --pm-lower-content-bottom-gap: 0px;
  --pm-title-initial-height: 116px;
  --pm-dynamic-title-height: 116px;
  --pm-upper-height: calc(var(--pm-dynamic-title-height) + var(--pm-upper-title-top-gap) + var(--pm-upper-title-bottom-gap));
  --pm-lower-top: calc(var(--pm-upper-top) + var(--pm-upper-height) + var(--pm-panels-gap));
  --pm-lower-height: calc(var(--pm-lower-bottom) - var(--pm-lower-top));
  --pm-dynamic-lower-height: var(--pm-lower-height);
}

/* Header geometry now comes from the shared lane-based header contract.
   Keep game-specific layout out of the header positioning layer so wide
   screens behave the same as homepage/completed. */

.game-stage {
  position: relative;
  min-height: var(--game-stage-height);
  overflow: hidden;
  direction: ltr;
}

@media (min-width: 1024px) {
  html:has(body.page-game) {
    overflow: hidden;
  }

  .page-game {
    height: 100vh;
    overflow: hidden;
  }

  .game-stage {
    height: var(--game-stage-height);
    min-height: 0;
  }
}

/* --- Phone mockup - canonical component node 270:1361 placed using
   the desktop page export geometry from node 426:1795
  Container geometry in the 1280×720 desktop frame:
  left=-43px, top=109px from page top, width=546px, height=629.323px.
  Since .game-stage starts below the 68px header in normal flow, the desktop
  top offset here becomes 109 - 68 = 41px.
   Hand halftone (577px wide, starting left=35) extends 66px right of container and
   69px above — overflow is visible (no clip) so it renders fully, matching Figma.
   All pm-* child positions below use the desktop 426:* export proportions.
  Scale is derived from the same desktop frame baseline and constrained by the
  available width left of the right-side panel so the composition stays responsive.
------------------------------------------------------------------------- */
.page-game .phone-mockup {
  position: absolute;
  left: calc(var(--game-phone-left) * var(--game-phone-scale));
  /* Desktop placement follows the Figma frame geometry: 41px below the stage top
    in the 1280×720 reference, scaled with the mockup so the composition holds as
    the page scales down. */
  top: calc(var(--game-phone-top) * var(--game-phone-scale));
  width: 546px;
  height: 629.323px;
  transform: scale(var(--game-phone-scale));
  transform-origin: top left;
  pointer-events: none;
  user-select: none;
  overflow: visible;
  /* contain:layout isolates this element as a layout island so absolutely-positioned
     children (e.g. pm-hand-portrait-img) do not expand the document's scrollHeight,
     while still allowing visual overflow (the hand bleed). */
  contain: layout;
  z-index: 1;
}

/* pm-* child layers – all pixel values are Figma-exact within the 546×629 canvas (node 270:1361) */

/* Halftone hand (shutterstock_2440255879 1 – node 270:1362)
   Figma: left=35 top=-69 width=577 height=675.
   Image inside: w=151.44%, h=134.17%, left=-16.42%, top=-3.8%.
   scaleX(-1) on the container (not the image) so transform-origin=center of the 577×675 box,
   matching Figma's -scaleY(1)*rotate(180°) which resolves to a horizontal mirror. */
/* overflow:hidden clips the halftone image (151%×134%) to the 577×675 wrapper,
   matching Figma's "absolute inset-0 overflow-hidden" inner clip div.
   The wrapper itself is not bottom-trimmed in Figma; .phone-mockup remains
   overflow:visible so the hand can bleed outside the 546×629 canvas exactly. */
.page-game .pm-hand-wrap         { position:absolute; left:35px; top:-69px; width:577px; height:675px;
  overflow:hidden;
  clip-path: inset(0 0 var(--game-hand-bottom-clip) 0);
  transform:scaleX(-1); transform-origin:center center; }
.page-game .pm-hand-portrait-img { display:block; position:absolute; width:151.44%; height:134.17%; max-width:none;
  left:-16.42%; top:-3.8%; }

/* Phone chrome top (node 426:1773 / 270:1415): desktop export geometry */
.page-game .pm-phone-chrome-top  { position:absolute; left:170px; top:8px; width:289px; height:72px; display:block; }

/* White screen background.
   Sized to the full visible phone screen interior so it underlays the full article area. */
.page-game .pm-screen-shell      {
  position:absolute;
  left:var(--pm-screen-left);
  top:var(--pm-screen-top);
  width:var(--pm-screen-width);
  height:var(--pm-screen-height);
  overflow:hidden;
  border-radius: 22px 22px 8px 8px;
}
.page-game .pm-screen-bg         {
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background:#fff;
}

/* Black upper screen / title section.
   Height follows the rendered title text so short headlines do not leave empty black space,
   while long headlines can grow until the lower panel reaches its minimum height. */
.page-game .pm-screen-upper      {
  position:absolute;
  left:calc(var(--pm-panel-left) - var(--pm-screen-left));
  top:calc(var(--pm-upper-top) - var(--pm-screen-top));
  width:var(--pm-panel-width);
  height:var(--pm-upper-height);
  background:#000;
}

/* Yediot logo: same left/width as the black panels; sits on the rule. */
.page-game .pm-yediot-logo       {
  position:absolute;
  inset: auto;
  left: calc(var(--pm-panel-left) - var(--pm-screen-left));
  top: 11px;
  width: var(--pm-panel-width);
  height: auto;
  aspect-ratio: 248 / 32;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  z-index: 6;
}
.page-game .pm-yediot-logo img   {
  width:100%;
  height:100%;
  max-width:100%;
  max-height:none;
  object-fit:contain;
  display:block;
}

/* Thin rule under Yediot — same left/width as the black panels. */
.page-game .pm-logo-rule         {
  position:absolute;
  left: calc(var(--pm-panel-left) - var(--pm-screen-left));
  right: auto;
  top: 45px;
  width: var(--pm-panel-width);
  height: 2px;
  min-height: 2px;
  max-height: 2px;
  display:block;
  z-index: 6;
}

/* Article title text. Its measured height feeds the dynamic panel sizing in game.js. */
.page-game .pm-article-title     {
  position:absolute;
  left:calc(var(--pm-title-left) - var(--pm-screen-left));
  top:calc(var(--pm-upper-top) + var(--pm-upper-title-top-gap) - var(--pm-screen-top));
  width:var(--pm-title-width);
  height:var(--pm-dynamic-title-height);
  margin:0; padding:2px 4px;
  font-family:'MosesText_Inter','Rubik',Arial,sans-serif; font-weight:700; font-size:23.71px; line-height:25.065px;
  color:#fff; text-align:right; direction:rtl;
  overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:5; line-clamp: 5;
}

/* Black lower screen / subtitle section.
   It expands or contracts to occupy the remaining mockup article space under the title panel. */
.page-game .pm-screen-lower      {
  position:absolute;
  left:calc(var(--pm-panel-left) - var(--pm-screen-left));
  top:calc(var(--pm-lower-top) - var(--pm-screen-top));
  width:var(--pm-panel-width);
  height:var(--pm-dynamic-lower-height);
  background:#000;
  border:0.677px solid #000;
  overflow:hidden;
  border-radius: 0;
}

/* Article subtitle text. Its box tracks the lower panel height so it fills the remaining mockup area. */
.page-game .pm-article-subtitle  {
  position:absolute;
  left:calc(var(--pm-subtitle-left) - var(--pm-screen-left));
  top:calc(var(--pm-lower-top) + var(--pm-lower-content-top-gap) - var(--pm-screen-top));
  width:var(--pm-subtitle-width);
  height:max(0px, calc(var(--pm-dynamic-lower-height) - var(--pm-lower-content-top-gap) - var(--pm-lower-content-bottom-gap)));
  margin:0; padding:4px 6px;
  font-family:'MosesText_Inter','Rubik',Arial,sans-serif; font-weight:400; font-size:13.548px; line-height:16.258px;
  color:#fff; text-align:right; direction:rtl;
  overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:8; line-clamp: 8;
}

/* Phone chrome bottom (node 426:1772 / 426:1414): exact desktop export geometry.
  scaleY(-1) so the chin curves downward correctly (matches Figma -scale-y-100). */
.page-game .pm-phone-chrome-bottom { position:absolute; left:176.31px; top:435.87px; width:271.746px; height:98.131px; display:block;
  transform: scaleY(-1); transform-origin: center center; }

/* Zoom controller (Controllers – node 294:4647): left=285 top=457 size=54×54 */
/* pm-zoom-icon intentionally hidden on game page — no zoom-in/out functionality here */
.page-game .pm-zoom-icon         { display:none; }

/* Skeleton newspaper text-line bars (nodes 270:1372–270:1419)
   Decorative #d9d9d9 bars that simulate article body text inside the white screen area. */
.page-game .pm-skeleton { position:absolute; background:#d9d9d9; }

/* Loading / error states */
/* Base pseudo-element reserved for responsive background layers. */
.page-game::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: none;
  pointer-events: none;
  z-index: 0;
}

/* Desktop/tablet background overlay.
   Figma node 192:1154 combines a 54px graph-paper base on #e2e3e4 plus a
   multiply-blended halftone texture placed 6px below the top edge. */
@media (min-width: 768px) {
  .page-game::before {
    top: 6px;
    background-image: url('../assets/images/halftone-bg.png?v=1791285426');
    background-size: cover;
    background-position: left top;
    background-repeat: no-repeat;
    mix-blend-mode: multiply;
    opacity: 0.5;
  }
}
.page-status {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-family: var(--font-body);
  font-size: 18px;
  color: var(--color-text);
  z-index: 10;
}
.page-status--error { color: #c0392b; }

.back-btn-plain {
  display: inline-block;
  margin-top: 12px;
  padding: 8px 16px;
  background: var(--color-title);
  color: #fff;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

/* Game panel
   Positioned on the physical right side of the viewport.
  Figma: game area left=684px in 1280px viewport -> right ~= 20px
   Width: 576px  (Figma node 276:2670: left=684 in 1280px  right=20px; 525px word-bank + 12L + 39R)
   Height: fills from below header to bottom of layout.
*/
.game-panel {
  position: absolute;
  top: 0;
  right: clamp(16px, 2vw, 20px);
  width: var(--game-panel-width);
  height: var(--game-panel-height);
  display: flex;
  flex-direction: column;
  gap: 0;
  z-index: 2;
  direction: rtl;
}

@media (min-width: 1280px) {
  .game-panel {
    right: 20px;
    width: 576px;
  }
}

/* Controls bar
  Horizontal row: RTL flow = physical right -> left
   DOM order (RTL): back-btn | hint | wrong-score | correct-score
  Visual order (left -> right): correct | wrong | hint | back-btn
*/
.controls-bar {
  flex-shrink: 0;
  display: flex;
  flex-direction: row;            /* RTL: items flow from physical right to left */
  align-items: flex-end;          /* all bottom edges aligned; hint (66px) protrudes above score tiles (49px) */
  justify-content: space-between; /* spread items across full 576px panel width */
  gap: 0;
  direction: rtl;
  /* padding: top right(physical) bottom left(physical)
     top=54px: pushes controls to Figma-matching absolute position.
       Figma: game-panel top=56px, controls at +66px within panel = 122px from page-top.
       Our panel top=68px → top-padding = 122-68 = 54px.
     right=38px: 576-538=38px space after back-btn right edge (Figma)
     bottom=47px: gap between score-tile bottom and word-bank top (Figma: 162-115=47px)
     left=16px: 16px before correct-tile left edge (Figma) */
  padding: clamp(8px, 1.4vh, 16px) clamp(18px, 3vw, 38px) clamp(14px, 2vh, 22px) clamp(12px, 2vw, 16px);
  min-height: 92px;
}

@media (min-width: 1280px) {
  .controls-bar {
    position: relative;
    display: block;
    min-height: 162px;
    height: 162px;
    padding: 0;
  }

  .controls-bar .pixel-back-btn {
    position: absolute;
    left: 388px;
    top: 70px;
  }

  .controls-bar .hint-tile--desktop {
    position: absolute;
    left: 288px;
    top: 55px;
  }

  .controls-bar .score-tile {
    position: absolute;
    width: 95.577px;
    height: 49.154px;
  }

  .controls-bar .score-tile--wrong {
    left: 162.58px;
    top: 72px;
  }

  .controls-bar .score-tile--correct {
    left: 19px;
    top: 72px;
  }
}

/* .score-tile, .score-icon, .score-value styles live in global.css (shared with completedgame.html) */

/* .pixel-back-btn styles live in global.css (shared with completedgame.html) */

/*  Hint tile 
   Figma Clue component  three states driven by CSS class alone:
     (default)              active layers visible, badge shows 3/2/1
     .hint-tile--exhausted  disabled layers visible, badge hidden
   Layer insets taken directly from Figma desktop3 / desktop0 specs.
 */
.hint-tile {
  position: relative;
  width: 70px;
  height: 66px;
  flex-shrink: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  overflow: visible;
  cursor: pointer;
  transition: opacity 0.1s;
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
  .hint-tile:hover:not(:disabled):not(.hint-tile--exhausted) {
    opacity: 0.85;
  }
}

.hint-tile:active:not(:disabled):not(.hint-tile--exhausted) {
  opacity: 1;
}

.hint-tile--desktop {
  display: block;
}

.hint-tile--mobile {
  --hint-mobile-scale: 1;
  display: none;
  width: 53.909px;
  height: 51px;
}

.hint-mobile-icon-body {
  position: absolute;
  left: calc(3px * var(--hint-mobile-scale));
  top: calc(10px * var(--hint-mobile-scale));
  width: calc(50.909px * var(--hint-mobile-scale));
  height: calc(40px * var(--hint-mobile-scale));
}

.hint-mobile-flip,
.hint-mobile-asset {
  transform: rotate(180deg) scaleY(-1);
  transform-origin: center;
}

.hint-mobile-flip {
  width: 100%;
  height: 100%;
}

.hint-mobile-canvas {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: clip;
}

.hint-mobile-slot {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hint-mobile-asset {
  position: relative;
}

.hint-mobile-layer {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  image-rendering: pixelated;
}

.hint-mobile-slot--active-bg {
  inset: 0 0 0 2.86%;
}

.hint-mobile-asset--active-bg {
  width: calc(49.455px * var(--hint-mobile-scale));
  height: calc(40px * var(--hint-mobile-scale));
}

.hint-mobile-slot--active-mid {
  inset: 0 19.8% 12.12% 2.86%;
}

.hint-mobile-asset--active-mid {
  width: calc(39.375px * var(--hint-mobile-scale));
  height: calc(35.153px * var(--hint-mobile-scale));
}

.hint-mobile-slot--disabled-bg,
.hint-mobile-slot--disabled-mid {
  display: none;
}

.hint-mobile-slot--disabled-bg {
  inset: 5% 0.09% 0 15.45%;
}

.hint-mobile-asset--disabled-bg {
  width: calc(43px * var(--hint-mobile-scale));
  height: calc(38px * var(--hint-mobile-scale));
}

.hint-mobile-slot--disabled-mid {
  inset: 5% 7.95% 7.12% 14.71%;
}

.hint-mobile-asset--disabled-mid {
  width: calc(39.375px * var(--hint-mobile-scale));
  height: calc(35.153px * var(--hint-mobile-scale));
}

.hint-mobile-slot--q {
  inset: 11.29% 27.14% 25.81% 10%;
  z-index: 1;
}

.hint-mobile-asset--q {
  width: calc(32px * var(--hint-mobile-scale));
  height: calc(25.161px * var(--hint-mobile-scale));
  overflow: clip;
}

.hint-mobile-q-inner {
  position: absolute;
  inset: 1.26% 5.51% -0.81% 6.82%;
}

.hint-mobile-badge {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(17.581px * var(--hint-mobile-scale));
  height: calc(18.92px * var(--hint-mobile-scale));
}

.hint-mobile-badge-bg-img {
  position: absolute;
  left: calc(0.283px * var(--hint-mobile-scale));
  top: calc(0.184px * var(--hint-mobile-scale));
  width: calc(17.188px * var(--hint-mobile-scale));
  height: calc(19.003px * var(--hint-mobile-scale));
  display: block;
  object-fit: fill;
  image-rendering: pixelated;
}

.hint-mobile-badge-border-img {
  position: absolute;
  left: calc(4.433px * var(--hint-mobile-scale));
  top: calc(0.184px * var(--hint-mobile-scale));
  width: calc(13.0395px * var(--hint-mobile-scale));
  height: calc(17.803px * var(--hint-mobile-scale));
  display: block;
  object-fit: fill;
  image-rendering: pixelated;
}

.hint-mobile-count {
  position: absolute;
  top: calc(4px * var(--hint-mobile-scale));
  right: calc(3.583px * var(--hint-mobile-scale));
  bottom: calc(3.921px * var(--hint-mobile-scale));
  left: calc(6.001px * var(--hint-mobile-scale));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Micro 5', monospace;
  font-size: calc(20px * var(--hint-mobile-scale));
  line-height: 1;
  color: #000;
  text-align: right;
  z-index: 1;
}

.hint-tile--mobile.hint-tile--exhausted .hint-mobile-slot--active-bg,
.hint-tile--mobile.hint-tile--exhausted .hint-mobile-slot--active-mid {
  display: none;
}

.hint-tile--mobile.hint-tile--exhausted .hint-mobile-slot--disabled-bg,
.hint-tile--mobile.hint-tile--exhausted .hint-mobile-slot--disabled-mid {
  display: flex;
}

.hint-tile--mobile.hint-tile--exhausted .hint-mobile-slot--q {
  inset: 17.5% 15.8% 19.6% 21.34%;
}

.hint-tile--mobile.hint-tile--exhausted .hint-mobile-badge {
  display: none;
}

.hint-tile--mobile.hint-tile--exhausted,
.hint-tile--mobile:disabled {
  cursor: default !important;
}

/*  Icon body container  Figma: left=3.9 top=14.28 66.104×51.939px.
   overflow:hidden matches Figma Layer_1 overflow-clip. */
.hint-icon-body {
  position: absolute;
  left:   3.9px;
  top:    14.28px;
  width:  66.104px;
  height: 51.939px;
  overflow: hidden;
}

/* All layers share the same stacking base */
.hint-layer {
  position: absolute;
  display: block;
  object-fit: fill;
  image-rendering: pixelated;
}

/* Active layers (desktop3) — physical positions after Figma scaleX(-1) mirror transform.
   Physical left = Figma right-inset value (not local-left).
   active-bg:  right-inset=0%   → left=0
   active-mid: right-inset=19.8% of 66.104=13.09px
   q:          right-inset=27.14% of 66.104=17.93px */
.hint-layer--active-bg {
  left: 0;       top: 0;
  width: 64.216px; height: 51.939px;
}
.hint-layer--active-mid {
  left: 13.09px; top: 0;
  width: 51.127px; height: 45.646px;
}
/* "?" glyph — active position (desktop3) */
.hint-layer--q {
  left: 17.93px; top: 5.86px;
  width: 41.551px; height: 32.671px;
}

/* Disabled layers (desktop0)  hidden until .hint-tile--exhausted */
.hint-layer--disabled-bg,
.hint-layer--disabled-mid {
  display: none;
}
/* Disabled layers — physical positions after scaleX(-1) mirror transform.
   disabled-bg:  right-inset=0.16% of 66.104≈0px
   disabled-mid: right-inset=6.21% of 66.104=4.11px */
.hint-layer--disabled-bg {
  left: 0;      top: 2.72px;
  width: 55px; height: 49px;
}
.hint-layer--disabled-mid {
  left: 4.11px; top: 2.72px;
  width: 51.127px; height: 45.646px;
}

/*  Exhausted state: swap to gray layers, hide badge  */
.hint-tile--exhausted .hint-layer--active-bg,
.hint-tile--exhausted .hint-layer--active-mid {
  display: none;
}
.hint-tile--exhausted .hint-layer--disabled-bg,
.hint-tile--exhausted .hint-layer--disabled-mid {
  display: block;
}
/* Reposition "?" to desktop0 spec — physical left = right-inset = 13.55% of 66.104 = 8.96px.
   z-index:3 required because .hint-layer--q is 3rd in DOM but disabled-bg/mid come after it (4th/5th),
   so without explicit z-index the disabled layers cover the "?" completely.
   No grayscale filter — hint-q.svg is already black; visual change comes from disabled-bg/mid layers. */
.hint-tile--exhausted .hint-layer--q {
  left: 8.96px; top: 8.57px;
  width: 41.551px; height: 32.671px;
  z-index: 3; /* must be above disabled-bg (auto) and disabled-mid (auto) */
}
/* Badge counter vanishes */
.hint-tile--exhausted .hint-badge {
  display: none;
}
.hint-tile--exhausted,
.hint-tile:disabled {
  cursor: default !important;
}

/*  Badge container  Figma: left=0 top=0, 22.82824.567px  */
.hint-badge {
  position: absolute;
  left:   0;
  top:    0;
  width:  22.828px;
  height: 24.567px;
}

/* Badge background — fills entire badge box */
.hint-badge-bg-img {
  position: absolute;
  inset: 0;
  width:  100%;
  height: 100%;
  display: block;
  object-fit: fill;
  image-rendering: pixelated;
}

/* Badge pixel-art border frame — Figma Group7 inset[0.97%,0.62%,4.93%,25.21%] on 22.828×24.567px
   Resolves to: top=0.238px right=0.141px bottom=1.211px left=5.755px
   → size: w=22.828-5.755-0.141=16.932px  h=24.567-0.238-1.211=23.118px          */
.hint-badge-border-img {
  position: absolute;
  top:    0.24px;
  left:   5.76px;
  width:  16.93px;   /* = badge.w(22.828) - left(5.755) - right(0.141) */
  height: 23.12px;   /* = badge.h(24.567) - top(0.238) - bottom(1.211) */
  display: block;
  object-fit: fill;  /* SVG has preserveAspectRatio=none — fill to exact dims */
  image-rendering: pixelated;
}

/* Count digit — Figma inset[21.14%,20.37%,20.72%,34.13%] on 22.828×24.567px
   top=5.19px right=4.65px bottom=5.09px left=7.79px                          */
.hint-count {
  position: absolute;
  top:    5.19px;
  right:  4.65px;
  bottom: 5.09px;
  left:   7.79px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Micro 5', monospace;
  font-size: 25px;
  color: #000;
  line-height: normal;
  z-index: 1;
}

/* Compact headline above the word bank.
  Blacked-out words are rendered here by JS. */

.article-strip {
  flex-shrink: 0;
  padding: 0 2px 10px;
  border-bottom: 2px solid #000;
  margin-bottom: 0;
}

/* Collapse when JS hasn't populated title/subtitle yet
   (Figma 156-13132: article strip is not shown in the main game panel) */
.article-strip:has(.article-title:empty + .article-subtitle:empty) {
  display: none;
}

.article-title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.6;
  direction: rtl;
  margin-bottom: 4px;
}

.article-subtitle {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text);
  line-height: 1.5;
  direction: rtl;
}

/* Blacked-out words */
.blacked-word {
  display: inline-block;
  background:#d9d9d9;
  color: transparent;
  border-radius: 2px;
  padding: 0 3px;
  min-width: 2.8em;
  cursor: default;
  user-select: none;
  vertical-align: baseline;
  transition: background-color 0.35s ease, color 0.35s ease;
}

/* Revealed by correct word-bank click */
.blacked-word.revealed {
  background: transparent;
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--color-title);
  text-underline-offset: 3px;
}

/* Revealed by hint — orange to match word-bank hint colour (Figma #ffc257) */
.blacked-word.hint-revealed {
  background: #ffc257;
  color: #111;
  font-weight: 700;
}
/* Phone mockup overrides  .pm-article-title / .pm-article-subtitle have black
   backgrounds and white text, so blacked-out bars show as dark-gray blocks,
   and revealed words appear white with no underline (purely decorative). */
.pm-article-title .blacked-word,
.pm-article-subtitle .blacked-word {
  background:#d9d9d9; 
  min-width: 1.8em;
}
.pm-article-title .blacked-word.revealed,
.pm-article-subtitle .blacked-word.revealed {
  background: transparent;
  color: #fff;
  text-decoration: none;
}
.pm-article-title .blacked-word.hint-revealed,
.pm-article-subtitle .blacked-word.hint-revealed {
  background: #ffc257;
  color: #111;
}

/* Word bank area
  Figma: bg #4d69ff, border 2px solid black, 525x442px (we fill flex)
*/
/* ─── Word bank area ───────────────────────────────────────────────────────────
   Figma node 276:3237: bg #4d69ff, border 2px solid black.
   Height: 442px exact (Figma scrollbar h=442px sets component height).
   Width: 100% fills game panel (size-full in Figma — container-dependent).
────────────────────────────────────────────────────────────────────────────── */
.word-bank-area {
  flex: 1;
  min-height: 320px;
  max-height: 442px; /* match 1280px fixed-height design — prevents over-growing at 1024–1279px */
  width: 100%;
  background: #4d69ff;
  border: 2px solid #000;
  overflow: hidden;
  position: relative;
}

@media (min-width: 1280px) {
  .word-bank-area {
    flex: none;
    width: 525px;
    height: 442px;
    min-height: 442px;
    margin-left: 12px;
    margin-right: 39px;
  }

  .word-bank-scrollbar {
    top: 12px;
    right: 10px;
    width: 23px;
    height: 415px;
  }
}

/* Wide desktop — exact 1920×980 frame alignment from Figma node 2812:13127.
   This layout uses a larger right-side game group and the unscaled 709×854 phone
   composition from node 2812:13220. */
@media (min-width: 1600px) and (min-height: 900px) {
  .page-game {
    --game-panel-width: 970px;
    background-size: 81.03px 80px;
    background-position: 0 0, 81.22px 0;
  }

  .page-game::before {
    left: 36.42px;
    top: 96.34px;
    width: 1569.67px;
    height: 887.31px;
    background-image: url('../assets/images/halftone-bg.png?v=1791285426');
    background-size: 100% 100%;
    background-position: left top;
    background-repeat: no-repeat;
    mix-blend-mode: multiply;
    opacity: 0.5;
  }

  .page-game .phone-mockup {
    left: 0;
    top: 58px;
    transform: scale(var(--game-phone-scale));
    transform-origin: top left;
  }

  .page-game .pm-hand-wrap {
    left: -20px;
    top: 2px;
    width: 660px;
    height: 826px;
  }

  .game-panel {
    top: 13px;
    right: 99px;
    width: 970px;
    height: var(--game-panel-height);
    max-height: var(--game-panel-height);
    transform: none;
    transform-origin: top right;
  }

  .controls-bar {
    min-height: 132px;
    height: 132px;
    padding: 0;
  }

  .controls-bar .pixel-back-btn {
    left: 697px;
    top: 27px;
    width: 273px;
    height: 65px;
    min-height: 65px;
  }

  .controls-bar .pixel-back-btn-text--desktop {
    inset: 24.62% 4.53% 29.23% 11.59%;
    font-family: 'MosesText_Inter', 'Rubik', Arial, sans-serif;
    font-size: 24px;
    line-height: 30px;
  }

  .controls-bar .hint-tile--desktop {
    left: 584px;
    top: 10px;
    width: 86px;
    height: 82px;
  }

  .controls-bar .score-tile {
    width: 118px;
    height: 64.728px;
    border-width: 3.704px;
    gap: 15px;
    padding: 10px 15px;
  }

  .controls-bar .score-value {
    font-size: 54px;
  }

  .controls-bar .score-tile--wrong {
    left: 155px;
    top: 27px;
  }

  .controls-bar .score-tile--correct {
    left: 0;
    top: 27px;
  }

  .controls-bar .score-tile--wrong .score-icon {
    width: 32.1px;
    height: 38.188px;
  }

  .controls-bar .score-tile--correct .score-icon {
    width: 33.334px;
    height: 38.188px;
  }

  .word-bank-area {
    width: 970px;
    height: 740px;
    min-height: 740px;
    max-height: 740px;
    margin-left: 0;
    margin-right: 0;
  }

  .word-bank {
    grid-template-columns: 184.43px 138.86px 149.66px;
    justify-content: start;
    row-gap: 23px;
    column-gap: 122px;
    padding: 25px 162px 25px 90px;
  }

  .word-btn {
    font-size: 25px;
    line-height: 37px;
    padding: 0;
  }

  .word-bank-scrollbar {
    top: 22px;
    right: 7px;
    width: 35.486px;
    height: 695.4px;
    --deco-scrollbar-track-left: 4.629px;
    --deco-scrollbar-track-width: 26.229px;
    --deco-scrollbar-thumb-width: 35.486px;
    --deco-scrollbar-thumb-min-height: 179.296px;
  }

  .word-bank-scrollbar .deco-scrollbar-track,
  .word-bank-scrollbar .deco-scrollbar-track::before,
  .word-bank-scrollbar .deco-scrollbar-thumb {
    border-radius: 0;
  }

  .word-bank-scrollbar .deco-scrollbar-thumb {
    background: #e6e7e8;
    border: 1px solid #121212;
    box-shadow: none;
  }
}

/* Word bank grid
  Figma uses 3 vertical columns of words (column-major flow).
  CSS multi-column achieves this without knowing the item count.
*/
.word-bank {
  height: 100%;
  overflow-y: auto;            /* vertical scroll, native bar hidden via .site-scrollbar */
  overflow-x: hidden;
  /* direction:rtl — rows fill right→left (alphabetical word bank). Custom scrollbar is overlaid on the physical right. */
  direction: rtl;
  touch-action: none;
  -webkit-overflow-scrolling: touch;
  /* CSS Grid: 3 equal columns */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-content: start;
  row-gap: 15px;
  column-gap: 0;
  /* Right padding reserves space for the 18px custom scrollbar overlay */
  padding: 17px calc(18px + 2px) 17px 17px;
  /* Native scrollbar hidden — visual scrollbar is .word-bank-scrollbar */
}



/* Word buttons */
.word-btn {
  display: block;
  width: fit-content;       /* auto-size to text content (Figma: shrink-0) */
  break-inside: avoid;
  justify-self: center;     /* center the button within its grid column */
  margin: 0 auto;
  padding: 2px 5px;
  background: #fff;
  border: none;
  direction: rtl;           /* restore RTL for Hebrew text */
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 400;
  color: #000;
  text-align: right;        /* Figma: text-right */
  cursor: pointer;
  white-space: nowrap;
  line-height: normal;      /* Figma: leading-[normal] on MosesDisplay */
  touch-action: manipulation;
  transition: background 0.1s;
}

/* Brackets around each word - Figma style [ word ] */
.word-btn::before { content: '[ '; }
.word-btn::after  { content: ' ]'; }

.word-btn:hover:not(:disabled) {
  background: #e8e8e8;
}

.hint-tile,
.instructions-close {
  touch-action: manipulation;
}

/* Correct guess - teal (#1deabe in Figma) */
.word-btn--correct {
  background: #1deabe !important;
  color: #000 !important;
  cursor: default;
}

/* Wrong guess - pink (#ffadbf) */
.word-btn--wrong {
  background: #ffadbf !important;
  color: #000 !important;
  cursor: default;
}

/* Hinted — orange (Figma #ffc257, node 439:3419 Variant3) */
.word-btn--hinted {
  background: #ffc257 !important;
  color: #000 !important;
  cursor: default;
}

.word-btn:disabled { cursor: default; }

/* ─── Horizontal word-bank scrollbar (mobile) ─────────────────────────────
   On mobile the word-bank scrolls horizontally, so the deco-scrollbar is
   rotated 90° conceptually: the track runs left→right and the thumb moves
   via JS-set `left` instead of `top`.
   Specificity 0,2,0 > global.css 0,1,0 — overrides without !important except
   where global uses !important (height), where we use !important too.
─────────────────────────────────────────────────────────────────────────── */
/* ─── Horizontal word-bank scrollbar colours + geometry ──────────────────
   Figma source: imgGroup46 / node 474-2665, viewBox 348×23.
   black base : fill black,     y=3, h=17
   grey space : fill #65625B,   y=4, h=15 (1px inset each side of rail)
   light space: fill #E6E7E8,   stroke 1px #121212; 22px tall, ~115px wide
   grip lines : 3 vertical 2×15px black lines, spaced ~6.4px, centred in thumb
──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {

  .page-game {
    --mobile-ui-scale: var(--pm-mobile-scale, 1);
  }
  .word-bank-scrollbar {
    top:    auto;
    /* Figma: 99px gap below scrollbar in 399px component = 99/399 ≈ 24.81% */
    bottom: 24.81%;
    right:  12px;  /* Figma: 390 − 14 (left) − 364 (scrollbar width) = 12px */
    left:   14px;  /* Figma: word bank container left=14px */
    width:  auto;  /* defined by left + right insets */
    height: 23px;
     transform: none;
  }
  /* Track rail — black outer, dark-grey inner (Figma black base + grey space) */
  .word-bank-scrollbar .deco-scrollbar-track {
    position:   absolute;
    top:        3px;          /* y=3 from Figma black base */
    left:       0;
    width:      100%;
    height:     17px;         /* Figma black base height */
    background: black;        /* Figma fill: black */
    border-radius: 0;
  }
  .word-bank-scrollbar .deco-scrollbar-track::before {
    top:        1px;          /* 1px inset from rail top */
    left:       2px;          /* 2px inset from rail left end */
    width:      calc(100% - 4px);
    height:     15px;         /* Figma grey space height */
    background: #65625B;      /* Figma grey space exact colour */
    border-radius: 0;
  }
  /* Thumb — light rectangle (Figma light space) */
  .word-bank-scrollbar .deco-scrollbar-thumb {
    position:       absolute;
    top:            -3px;     /* -3px: 17px rail is 3px from top → thumb top = 0 of outer */
    left:           0;        /* JS drives style.left */
    right:          auto;
    width:          80px;     /* JS overrides via style.width */
    height:         23px !important; /* override global.css height:107px !important */
    background:     #E6E7E8;  /* Figma light space fill */
    border:         1px solid #121212; /* Figma stroke-0 */
    box-shadow:     none;
    border-radius:  0;
    transition:     left 200ms;
    /* Horizontal layout for vertical grip lines */
    flex-direction: row;
    align-items:    center;
    justify-content: center;
    gap:            6.4px;    /* Figma: tick marks ~6.4px apart (57.8 → 64.3 → 70.8) */
  }
  /* CSS grip-line pseudo is for vertical scrollbar — hide it on horizontal */
  .word-bank-scrollbar .deco-scrollbar-thumb::before { display: none; }
  /* Show vertical SVG grip lines centred in the horizontal thumb */
  .word-bank-scrollbar .deco-scrollbar-grip-line {
    display:    block !important;
    width:      2px;           /* Figma stroke-width 2 vertical line */
    height:     15px;          /* Figma line height (y=4 to y=19) */
    flex-shrink: 0;
  }
}

/* Responsive - tablet */
@media (max-width: 1023px) and (min-width: 768px) {
  /* Allow vertical scroll -- phone mockup (top) + game panel (below) stacked */
  .page-game {
    --game-tablet-phone-scale: clamp(0.42,
      min(
        calc((100vw - 96px) / 546px),
        calc((100vh - 356px) / 629px)
      ),
      0.56);
    --game-tablet-phone-offset-top: 18px;
    --game-tablet-panel-gap: 20px;
    --game-tablet-word-bank-height: clamp(200px, 24vh, 260px);
    min-height: 100svh;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .game-stage {
    display: flow-root;
    /* Tablet stack: prevent the panel's top margin from collapsing into the stage and overlapping the phone mockup. */
    min-height: auto;
    overflow: visible;
    padding-bottom: 32px;
  }

  /* Show phone mockup centered and scaled — 546×0.5=273px visual width, centered */
  .page-game .phone-mockup {
    left: 50%;
    margin-left: 0;
    top: var(--game-tablet-phone-offset-top);
    transform: translateX(-50%) scale(var(--game-tablet-phone-scale));
    transform-origin: top center;
  }

  /* Game panel below phone mockup */
  .game-panel {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    transform: none;
    width: min(576px, calc(100vw - 32px));
    height: auto;
    min-height: 0;
    max-height: none;
    margin: calc((629px * var(--game-tablet-phone-scale)) + var(--game-tablet-phone-offset-top) + var(--game-tablet-panel-gap)) auto 0;
  }

  /* Allow word-bank-area to grow on tablet (stacked layout has room) */
  .word-bank-area {
    flex: 0 0 auto;
    height: var(--game-tablet-word-bank-height);
    min-height: var(--game-tablet-word-bank-height);
    max-height: var(--game-tablet-word-bank-height);
  }

  .hint-tile--desktop {
    display: none;
  }

  .hint-tile--mobile {
    display: block;
  }

  .hint-tile--mobile {
    --hint-mobile-scale: 1;
    width: 53.909px;
    height: 51px;
  }

  .controls-bar {
    align-items: center;
    /* Tablet stack: level the back button, scores, and hint tile on one row. */
  }
}

@media (max-width: 1023px) and (min-width: 768px) and (orientation: portrait) {
  html:has(body.page-game) {
    overflow: hidden;
  }

  .page-game {
    --game-tablet-phone-scale: clamp(0.48,
      min(
        calc((100vw - 120px) / 546px),
        calc((100vh - 720px) / 629px)
      ),
      0.58);
    --game-tablet-phone-offset-top: 24px;
    --game-tablet-panel-gap: clamp(26px, 4vh, 38px);
    --game-tablet-word-bank-height: clamp(280px, 34vh, 360px);
    height: 100svh;
    min-height: 100svh;
    overflow: hidden;
  }

  .game-stage {
    height: var(--game-stage-height);
    min-height: auto;
    overflow: hidden;
    padding-bottom: 48px;
  }

  .page-game .phone-mockup {
    left: 50%;
    margin-left: 0;
    top: var(--game-tablet-phone-offset-top);
    transform: translateX(-50%) scale(var(--game-tablet-phone-scale));
    /* Tablet portrait: keep the phone scale and the panel offset in sync across the full tablet range. */
    transform-origin: top center;
  }

  .game-panel {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    transform: none;
    width: min(576px, calc(100vw - 40px));
    height: auto;
    min-height: 0;
    max-height: none;
    margin: calc((629px * var(--game-tablet-phone-scale)) + var(--game-tablet-phone-offset-top) + var(--game-tablet-panel-gap)) auto 0;
  }
}

@media (min-width: 1024px) and (max-width: 1199px) {
  .page-game .phone-mockup {
    left: clamp(12px, 2vw, 24px);
    /* Tablet landscape: keep the phone mockup inside the viewport instead of using the desktop negative offset. */
    top: clamp(28px, 4.25vh, 40px);
    /* Tablet landscape: keep a consistent gap below the header while preserving the desktop composition. */
  }

  .controls-bar {
    align-items: center;
    /* Tablet landscape: vertically align the mixed-height controls instead of bottom-staggering them. */
  }
}

@media (min-width: 960px) and (max-width: 1366px) and (max-height: 1024px) and (orientation: landscape) {
  html:has(body.page-game) {
    overflow-x: clip;
  }

  body.page-game,
  body.page-game .game-stage {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }
}



@media (min-width: 960px) and (max-width: 1023px) and (max-height: 700px) and (orientation: landscape) {
  .page-game {
    /* Short landscape tablets do not have enough vertical room for the stacked
       tablet layout, so switch back to a compact side-by-side composition. */
    --game-phone-scale: clamp(0.4,
      min(
        calc((100vh - 124px) / 629.323px),
        calc((100vw - 624px) / 546px)
      ),
      0.46);
    overflow: hidden;
  }

  .game-stage {
    height: var(--game-stage-height);
    min-height: 0;
    padding-bottom: 0;
    overflow: hidden;
  }

  .page-game .phone-mockup {
    left: clamp(8px, 2vw, 20px);
    /* Short tablet landscape: stop the phone mockup from bleeding past the left viewport edge. */
    top: clamp(12px, 13.1vh, 104px);
    transform: scale(0.68); /* var(--game-phone-scale) */
    transform-origin: top left;
  }

  .game-panel {
    position: absolute;
    top: 0;
    right: clamp(12px, 2vw, 20px);
    width: min(560px, calc(100vw - 316px));
    height: var(--game-stage-height);
    margin: 0;
  }

  .controls-bar {
    position: relative;
    display: block;
    flex: none;
    height: 118px;
    min-height: 118px;
    padding: 0;
    /* 960x614: pin the compact controls so the hint button keeps its intended lane in the narrowed short-landscape panel. */
  }

  .controls-bar .pixel-back-btn {
    position: absolute;
    left: 372px;
    top: 46px;
  }

  .controls-bar .hint-tile--desktop {
    display: block;
    position: absolute;
    left: 274px;
    top: 34px;
  }

  .controls-bar .hint-tile--mobile {
    display: none;
  }

  .controls-bar .score-tile {
    position: absolute;
    width: 88px;
    height: 45px;
  }

  .controls-bar .score-tile--wrong {
    left: 151px;
    top: 50px;
  }

  .controls-bar .score-tile--correct {
    left: 18px;
    top: 50px;
  }

  .word-bank-area {
    flex: 0 1 auto;
    height: min(442px, calc(100% - 118px));
    min-height: 0;
    max-height: min(442px, calc(100% - 118px));
    /* 960x614: cap the bank to the remaining short-landscape lane instead of letting it overrun the panel. */
  }
}

@media (min-width: 960px) and (max-width: 1000px) and (min-height: 600px) and (max-height: 650px) and (orientation: landscape) {
    .page-game .phone-mockup {
        left: -24px;
        transform: scale(.7);
        transform-origin: center left;
      }
}

/* Responsive - mobile */
/* ─── Responsive — mobile (max-width: 600px) ─────────────────────────────────
   Figma source: node 453:2388 (390px canvas).
   Layout:
     • Phone mockup scales to fill screen width (scale=(100vw-16)/546, max 0.72).
     • Game panel stacks directly below the mockup.
     • Controls bar: absolute-positioned children matching Figma px coordinates.
       - Hint (right:22px, top:64px) | Score-wrong (right:131px, top:37px)
         | Score-correct (right:198px, top:37px) | Back-btn (left:16px, top:75px)
     • Word bank: horizontal single-row flex scroller (height 143px, gap 25px).
     • Deco-scrollbar: rotated to horizontal at bottom of word-bank-area.
─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {

  /* Shell geometry: ORIGINAL mobile canvas values (Figma node 453:2389, 401.32×462.56).
     These align pm-screen-shell exactly with the phone glass area in pm-hand-figma.png.
     The top chrome ends at 5.88+52.92=58.8px, so screen-top=60.92 starts just below it.
     ─────────────────────────────────────────────────────────────────────────────────────
     Content geometry: scaled from the ≥1000px desktop block (292×532 screen)
     to the mobile screen (198.14×259.45):
       SX = 198.14/292 = 0.6786   (widths / horizontal offsets within screen)
       SY = 259.45/532 = 0.4879   (heights / vertical offsets within screen)
     All --pm-panel-*, --pm-title-*, --pm-upper-* etc. are canvas-absolute and derived as:
       canvas_value = screen_left/top + (desktop_offset_within_screen × SX/SY)           */
  .page-game {
    --pm-screen-left:   131.19px;  /* original — aligns with phone glass left edge */
    --pm-screen-top:     20.92px;  /* original — starts 2px below top chrome       */
    --pm-screen-width:  190px;     /* slightly narrower so the white glass does not protrude on the right */
    /* PNG glass (measured) stays ~193px wide through y≈370, then the chin
       rounds off. Keep the HTML overlay over that glass, not the Figma chrome. */
    --pm-screen-bottom: 378px;
    --pm-screen-height: calc(var(--pm-screen-bottom) - var(--pm-screen-top));
    --pm-panel-left:    140.01px;  /* 131.19 + 13 × SX  (desktop panel is 13px inside screen) */
    --pm-panel-width:   180.51px;  /* 266 × SX */
    --pm-title-left:    147.48px;  /* 131.19 + 24 × SX */
    --pm-title-width:   166.26px;  /* 245 × SX */
    --pm-subtitle-left: 143.40px;  /* 131.19 + 18 × SX */
    --pm-subtitle-width:171.69px;  /* 253 × SX */
    --pm-upper-top:      61px;
    --pm-upper-title-top-gap:   5.07px;  /* 9  × SY */
    --pm-upper-title-bottom-gap:5.63px;  /* 10 × SY */
    --pm-panels-gap:    6px;
    --pm-lower-bottom-inset: 5px;
    --pm-lower-bottom:  calc(var(--pm-screen-bottom) - var(--pm-lower-bottom-inset));
    --pm-lower-min-height: 40.53px;/* 72  × SY */
    --pm-lower-content-top-gap:  6.75px; /* 12 × SY */
    --pm-lower-content-bottom-gap: 0px;
    --pm-title-initial-height:   85.56px;/* 152 × SY */
    --pm-dynamic-title-height:   85.56px;
    --pm-dynamic-lower-height: var(--pm-lower-height);
  }

  /* ── Page ────────────────────────────────────────────────────────── */
  /* Figma node 526:3246 — #e2e3e4 base + ~35.6px graph-paper grid (black lines, 50% opacity).
     Same construction as .page-home; no halftone texture on mobile. */
  .page-game {
    --game-mobile-visible-height: var(--game-visual-viewport-height, 100dvh);
    --game-mobile-panel-top: calc(404px * var(--pm-mobile-scale, 1));
    --game-mobile-panel-min-height: 300px;
    --game-mobile-controls-height: calc(115px * var(--mobile-ui-scale));
    --game-mobile-panel-shell-height: calc(
      calc(26.5px * var(--mobile-ui-scale)) +
      calc((100vw + calc(4px * var(--mobile-ui-scale))) * 0.79464)
    );
    --game-mobile-recovery-gap: max(16px, calc(12px + env(safe-area-inset-bottom)), var(--game-visual-viewport-loss, 0px));
    height:     auto;
    min-height: var(--game-mobile-visible-height);
    overflow-x: hidden;
    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: 35.6px 35.6px;
    /* offset: first vertical line ≈30px from left, first horizontal line ≈16px from top */
    background-position: 30px 16px;
    background-attachment: local;
  }

  .game-stage {
    min-height: max(
      var(--game-mobile-visible-height),
      calc(var(--game-mobile-panel-top) + var(--game-mobile-panel-min-height) + var(--game-mobile-recovery-gap))
    );
    overflow: visible;
  }

  /* Phone mockup: mobile canvas exactly matches Figma node 453:2389
     (mobile_article), 401.32 × 462.563 px.
     left=-31px: hand-halftone bleed at the left viewport edge (Figma exact).
     top = header height (68px).
     Scale: clamp(0.70, 100vw/390, 1.0) → fills a 390px-wide iPhone perfectly;
            shrinks proportionally on narrower devices. */
  .page-game .phone-mockup {
    /* Mobile canvas: 401.32×462.563 px (Figma node 453:2389). left=-31px bleeds the
       hand off the left edge exactly as Figma. Scale from top-left fills viewport width.
       --pm-mobile-scale is a pure <number> set by the inline JS in game.html.
       (clamp(0.82, 100vw/390, 1.0) is INVALID CSS: 100vw/390 is a <length>, not <number>.)
       z-index:3 so phone renders above game-panel (z-index:2) overlapping by 74px. */
    left:            -31px;
    margin-left:      0;
    top:              calc(16px * var(--pm-mobile-scale, 1));
    width:            401.32px;
    height:           462.563px;
    transform:        scale(var(--pm-mobile-scale, 1));
    transform-origin: top left;
    z-index:          1;
  }

  /* ── Mobile pm-* children — Figma pixel-exact on the 401.32 × 462.563 canvas ── */

  /* Hand halftone wrapper: left=25.73 top=-50.72 w=424.105 h=496.137 (Figma 453:2390).
     rotate(180deg) + scaleY(-1) = scaleX(-1) (horizontal mirror). */
  .page-game .pm-hand-wrap {
    left:   25.73px;
    top:   -50.72px;
    width:  424.105px;
    height: 496.137px;
    transform: rotate(180deg) scaleY(-1);     /* ≡ scaleX(-1) */
    transform-origin: center center;
    clip-path: none;
  }

  /* Phone top chrome (Figma 453:2442): left=124.95 top=5.88 w=212.42 h=52.921 */
  .page-game .pm-phone-chrome-top {
    left:   124.95px;
    top:      5.88px;
    width:  212.42px;
    height:  52.921px;
  }

  /* White screen background: fills the visible phone screen interior for the mobile mockup. */
  .page-game .pm-screen-bg {
    left: 0;
    top: 0;
    width: 100%;
  }

  /* Logo within pm-screen-shell — scaled from desktop (248×SX w, 32×SY h).
     Desktop logo: left=20px, top=19px within 292×532 screen → SX/SY scaled. */
  .page-game .pm-yediot-logo {
    inset: auto;
    left: calc(var(--pm-panel-left) - var(--pm-screen-left));
    top: 8px;
    width: var(--pm-panel-width);
    height: auto;
    aspect-ratio: 248 / 32;
    z-index: 6;
  }

  .page-game .pm-yediot-logo img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: none;
    object-fit: contain;
  }

  /* Logo-rule — keep a canvas-stable gap under Yediot, not a % of the taller shell
     (percentage top was sliding under the black title panel). */
  .page-game .pm-logo-rule {
    left: calc(var(--pm-panel-left) - var(--pm-screen-left));
    right: auto;
    width: var(--pm-panel-width);
    top: 33px;
    height: 2px;
    min-height: 2px;
    max-height: 2px;
    z-index: 6;
  }

  /* Top follows the glass; a slight bottom radius on the white screen only,
     kept smaller than --pm-lower-bottom-inset so square black corners are not clipped. */
  .page-game .pm-screen-shell {
    border-radius: 16px 16px 6px 6px;
  }

  /* Black title section: geometry now follows the shared mockup vars so the title panel can resize. */
  .page-game .pm-screen-upper {
    left: calc(var(--pm-panel-left) - var(--pm-screen-left));
    top: calc(var(--pm-upper-top) - var(--pm-screen-top));
    width: var(--pm-panel-width);
  }

  /* Same width as the title panel; square corners as on desktop. */
  .page-game .pm-screen-lower {
    left: calc(var(--pm-panel-left) - var(--pm-screen-left));
    top: calc(var(--pm-lower-top) - var(--pm-screen-top));
    width: var(--pm-panel-width);
    border-radius: 0;
  }

  .page-game .pm-article-title .blacked-word,
  .page-game .pm-article-subtitle .blacked-word {
    min-width: 1.15em;
    padding: 0 2px;
    margin-block: 1px;
    border-radius: 0;
  }

  .page-game .pm-article-subtitle .blacked-word {
    min-width: 0.95em;
  }

  /* Article title text: height is supplied by the measured title content. */
  .page-game .pm-article-title {
    left:        calc(var(--pm-title-left) - var(--pm-screen-left));
    top:         calc(var(--pm-upper-top) + var(--pm-upper-title-top-gap) - var(--pm-screen-top));
    width:       var(--pm-title-width);
    font-size:   17.427px;
    line-height: 18.423px;
    padding:     1px 3px;
    display:     block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
  }

  /* Subtitle size also stays on the mobile-scaled canvas so text fits the narrower screen. */
  .page-game .pm-article-subtitle {
    left:        calc(var(--pm-subtitle-left) - var(--pm-screen-left));
    top:         calc(var(--pm-lower-top) + var(--pm-lower-content-top-gap) - var(--pm-screen-top));
    width:       var(--pm-subtitle-width);
    font-size:    12px;
    line-height:  14.4px;
    padding:      2px 3px;
    display:      block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
  }

  /* Phone bottom chrome (Figma 453:2441): left=129.59 top=320.37 w=199.738 h=72.128 */
  .page-game .pm-phone-chrome-bottom {
    left:   129.59px;
    top:    320.37px;
    width:  199.738px;
    height:  72.128px;
    transform: scaleY(-1);
    transform-origin: center center;
  }

  /* Zoom controller (Figma 453:2446): left=209.48 top=335.9 size=39.691 */
  .page-game .pm-zoom-icon {
    left:   209.48px;
    top:    335.9px;
    width:   39.691px;
    height:  39.691px;
    transform: scaleX(-1);
    transform-origin: center center;
  }

  /* Figma mobile frame 453:2388 positions the phone wrapper at y=84 and the
     controls/panel block at y=472 on a 390px-wide canvas. Preserve that exact
     relationship while scaling proportionally with --pm-mobile-scale. */
  .game-panel {
    right:      0;
    left:       0;
    transform:  none;
    width:      100%;
    top:        var(--game-mobile-panel-top);
    /* Fill from panel top to the bottom of the viewport so the blue word-bank
       area stretches to the screen edge while keeping the Figma panel anchor. */
    height:     calc(var(--game-mobile-visible-height) - var(--game-mobile-panel-top));
    min-height: var(--game-mobile-panel-min-height);
  }

  .page-game.page-game--viewport-recovered .game-panel {
    height: auto;
  }
  /* ── Controls bar: absolute children (Figma node 463:3308, 390px canvas) ── */
  .controls-bar {
    display:  block;
    position: relative;
    /* Figma baseline: 115px (390px node). Scaled by --mobile-ui-scale. */
    height:     var(--game-mobile-controls-height);
    padding:  0;
  }

  /* ── Controls bar children — scoped to .controls-bar to avoid bleeding into
     completedgame.html which also uses score-tile and pixel-back-btn ──────── */

    /* Controls bar children: all positions from Figma 390px canvas, scaled
      proportionally via --mobile-ui-scale. */

  /* Hint tile — exact Figma mobile component, shown only on mobile/tablet. */
  .hint-tile--desktop {
    display: none;
  }

  .hint-tile--mobile {
    display: block;
  }

  .controls-bar .hint-tile--mobile {
    --hint-mobile-scale: var(--mobile-ui-scale);
    position:  absolute;
    left:      calc(314px * var(--mobile-ui-scale));
    right:     auto;
    top:       calc(64px * var(--mobile-ui-scale));
    width:     calc(53.909px * var(--mobile-ui-scale));
    height:    calc(51px    * var(--mobile-ui-scale));
    transform: none;
  }

  /* Score tiles — 60×30px, top=37px
     wrong:   right = 131/390 = 33.59vw
     correct: right = 198/390 = 50.77vw */
  .controls-bar .score-tile {
    position:     absolute;
    width:        calc(60px * var(--mobile-ui-scale));
    height:       calc(30px * var(--mobile-ui-scale));
    border-width: calc(1.845px * var(--mobile-ui-scale));
    top:          calc(37px * var(--mobile-ui-scale));
  }
  .controls-bar .score-tile--wrong {
    left:    calc(199px * var(--mobile-ui-scale));
    right:   34%;
    gap:     calc(4px * var(--mobile-ui-scale));
    padding: calc(2px * var(--mobile-ui-scale)) calc(7px * var(--mobile-ui-scale));
  }
  .controls-bar .score-tile--correct {
    left:    calc(132px * var(--mobile-ui-scale));
    right:   51%;
    gap:     calc(5px * var(--mobile-ui-scale));
    padding: calc(2px * var(--mobile-ui-scale)) calc(10px * var(--mobile-ui-scale));
  }
  .controls-bar .score-value { font-size: calc(27.673px * var(--mobile-ui-scale)); }
  .controls-bar .score-tile--wrong .score-icon {
    width:  calc(17.581px * var(--mobile-ui-scale));
    height: calc(18.92px * var(--mobile-ui-scale));
  }
  .controls-bar .score-tile--correct .score-icon {
    width:  calc(15.989px * var(--mobile-ui-scale));
    height: calc(18.92px * var(--mobile-ui-scale));
  }

  /* Back button — Figma: left=16px, top=75px, 135×40px */
  .controls-bar .pixel-back-btn {
    position: absolute;
    left:     calc(16px * var(--mobile-ui-scale));
    top:      calc(75px * var(--mobile-ui-scale));
    width:    calc(135px * var(--mobile-ui-scale));
    height:   calc(40px * var(--mobile-ui-scale));
  }
  .controls-bar .pixel-back-btn-text--mobile {
    font-size:   calc(12px * var(--mobile-ui-scale));
    line-height: calc(16px * var(--mobile-ui-scale));
  }

  /* ── Word bank: horizontal single-row scroll (Figma 474:2665) ────────
     Figma layout: top=120px (5px below controls-bar base), left=14px, w=364px
     flex-col gap=14px between word overflow (143px) and scrollbar (23px)
     total height = 143 + 14 (gap) + 23 = 180px
  ──────────────────────────────────────────────────────────────────────── */
  .word-bank-area {
    flex:       1;           /* grow to fill remaining panel height below controls-bar */
    min-height: calc(180px * var(--mobile-ui-scale));   /* 143 word row + 14px gap + 23 horizontal scrollbar */
    height:     auto;
    margin-top: calc(5px * var(--mobile-ui-scale));     /* Figma: word bank top=120, controls-bar base=115 → 5px gap */
  }

  .page-game.page-game--viewport-recovered .word-bank-area {
    flex: 0 0 auto;
    height: calc(180px * var(--mobile-ui-scale));
    min-height: calc(180px * var(--mobile-ui-scale));
    max-height: calc(180px * var(--mobile-ui-scale));
  }
  /* 2-row horizontal-scrolling grid (Figma 474:2756 mobile word bank).
     game.js sets an explicit column count + grid-auto-flow:row so sorted
     words fill the top row right→left, then the bottom row. */
  .word-bank {
    direction:             rtl;
    display:               grid;
    grid-template-rows:    auto auto;    /* exactly 2 rows */
    grid-auto-flow:        row;          /* row-major: top row, then bottom (RTL) */
    grid-auto-columns:     max-content;  /* each column = its widest item */
    grid-template-columns: initial;      /* reset desktop repeat(3,1fr); JS sets repeat(n, max-content) */
    gap:                   calc(18px * var(--mobile-ui-scale)) calc(25px * var(--mobile-ui-scale));    /* row-gap 18px, col-gap 25px (Figma) */
    align-content:         center;       /* vertically centre 2 rows in 143px box */
    overflow-x:            auto;
    overflow-y:            hidden;
    /* Hide native browser scrollbar — deco-scrollbar handles the UI */
    scrollbar-width:       none;      /* Firefox */
    height:                calc(143px * var(--mobile-ui-scale));
    padding:               0 calc(14px * var(--mobile-ui-scale));
  }
  .word-bank::-webkit-scrollbar { display: none; }  /* Chrome/Safari */
  .word-btn {
    font-size:   calc(16px * var(--mobile-ui-scale));
    margin:      0;
    padding:     0 calc(4px * var(--mobile-ui-scale));
    height:      calc(24px * var(--mobile-ui-scale));
    line-height: calc(24px * var(--mobile-ui-scale));
    white-space: nowrap;    /* keep each word on one line */
    justify-self: auto;     /* reset desktop justify-self: center */
    direction: rtl;
  }

  /* ── Article text ─────────────────────────────────────────────────── */
  .article-title    { font-size: 16px; }
  .article-subtitle { font-size: 12px; }

  /* ── Notched panel background (Figma node 463:3201, game-panel-bg-mobile.svg) ──
     SVG viewBox 0 0 392 311.5, positioned left=-2 top=26.5 in the 390px Component.
     We render it as a ::before on .game-panel so it sits behind all controls.
     Sizing: 100% wide + 2px overshoot each side; height proportional (≈79.5% of w).
     Score tiles (top:37px) are above the SVG's y=26.5 start → they appear in
     the raised notch centre (x≈123–266 in Component coords).
  ─────────────────────────────────────────────────────────────────────────── */
  .game-panel {
    isolation: isolate;        /* new stacking context for ::before + children */
  }
  .game-panel::before {
    content:  '';
    position: absolute;
    /* Figma node 463:3201: left=-2 top=26.5 w=392 h=311.5 within 390px Component.
       SVG viewBox="0 0 392 311.5", preserveAspectRatio="none".
       Container is (100vw + 4px) wide (left:-2px + right:-2px overshoot).
       Height = container-width × (311.5 / 392) = container-width × 0.79464 */
    top:      calc(26.5px * var(--mobile-ui-scale));
    left:     calc(-2px * var(--mobile-ui-scale));
    right:    calc(-2px * var(--mobile-ui-scale));
    height:   calc((100vw + calc(4px * var(--mobile-ui-scale))) * 0.79464);
    /* background-size: 100% 100% forces SVG (preserveAspectRatio=none) to fill
       the ::before box exactly, matching Figma's pixel-exact notch geometry. */
    background: url('../assets/images/game-panel-bg-mobile.svg?v=1791285426') no-repeat top left / 100% 100%;
    z-index:  -1;
    pointer-events: none;
  }

  /* Stack controls and word bank above the ::before bg */
  .controls-bar   { position: relative; z-index: 1; }
  .word-bank-area {
    display:    flex;
    flex-direction: column;
    position:   relative;
    z-index:    1;
    /* The SVG ::before covers only the notched top portion (~311px).
       Restore the blue fill so the area below the SVG stays blue all the
       way to the screen bottom, keeping the scrollbar inside the blue panel. */
    background: #4d69ff;
    border-left:   2px solid #000;
    border-right:  2px solid #000;
    border-bottom: 2px solid #000;
    border-top:    none;   /* SVG stroke provides the top-edge visual */
    /* No padding-bottom needed — scrollbar uses bottom: 24.81% for responsive gap */
  }

  @media (orientation: portrait) and (max-width: 743px) {
    .page-game .word-bank-area,
    .page-game.page-game--viewport-recovered .word-bank-area {
      background: transparent;
      border: none;
    }
  }

  /* Put the deco-scrollbar track/thumb above the word-bank transparent bg */
  .word-bank-scrollbar { z-index: 2; }

  .word-bank-scrollbar {
    position: relative;
    top:      auto;
    right:    auto;
    bottom:   auto;
    left:     auto;
    width:    auto;
    height:   calc(23px * var(--mobile-ui-scale));
    margin:   0 calc(22px * var(--mobile-ui-scale));
  }

  .page-game.page-game--viewport-recovered .word-bank-scrollbar {
    bottom: auto;
  }

  .word-bank-scrollbar .deco-scrollbar-track {
    top:    calc(3px * var(--mobile-ui-scale));
    left:   0;
    width:  100%;
    height: calc(17px * var(--mobile-ui-scale));
  }

  .word-bank-scrollbar .deco-scrollbar-track::before {
    top:    calc(1px * var(--mobile-ui-scale));
    left:   calc(2px * var(--mobile-ui-scale));
    width:  calc(100% - calc(4px * var(--mobile-ui-scale)));
    height: calc(15px * var(--mobile-ui-scale));
  }

  .word-bank-scrollbar .deco-scrollbar-thumb {
    top:       calc(-3px * var(--mobile-ui-scale));
    left:      0;
    width:     calc(115.64px * var(--mobile-ui-scale));
    height:    calc(23px * var(--mobile-ui-scale)) !important;
    display:   flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    transition: left 200ms;
    gap:       calc(6.48px * var(--mobile-ui-scale));
  }

  .word-bank-scrollbar .deco-scrollbar-grip-line {
    width:  calc(2px * var(--mobile-ui-scale));
    height: calc(15px * var(--mobile-ui-scale));
  }

  /* Word bank needs a tiny top padding so first row isn't flush against invisible border */
  .word-bank {
    padding-top:    calc(14px * var(--mobile-ui-scale));
    padding-bottom: calc(14px * var(--mobile-ui-scale));
  }

  /* Background is rendered directly on .page-game via CSS gradients above.
     Suppress both pseudo-elements so the desktop halftone cannot bleed through. */
  .page-game::before {
    display: none !important;
  }

  .page-game::after {
    display: none !important;
  }
}

@media (min-width: 362px) and (max-width: 743px) and (max-height: 750px) and (orientation: portrait) {
  .page-game {
    --game-mobile-panel-min-height: var(--game-mobile-panel-shell-height);
  }

  .game-stage {
    height: calc(var(--game-mobile-panel-top) + var(--game-mobile-panel-shell-height));
    min-height: calc(var(--game-mobile-panel-top) + var(--game-mobile-panel-shell-height));
  }

  .game-panel,
  .page-game.page-game--viewport-recovered .game-panel {
    height: var(--game-mobile-panel-shell-height);
    min-height: var(--game-mobile-panel-shell-height);
  }

  .word-bank-area,
  .page-game.page-game--viewport-recovered .word-bank-area {
    flex: 0 0 auto;
    height: calc(var(--game-mobile-panel-shell-height) - var(--game-mobile-controls-height));
    min-height: calc(var(--game-mobile-panel-shell-height) - var(--game-mobile-controls-height));
    max-height: calc(var(--game-mobile-panel-shell-height) - var(--game-mobile-controls-height));
    margin-top: 0;
    padding-top: calc(5px * var(--mobile-ui-scale));
  }

  .word-bank-scrollbar,
  .page-game.page-game--viewport-recovered .word-bank-scrollbar {
    top: auto;
    bottom: auto;
    margin: 0 calc(22px * var(--mobile-ui-scale));
  }
}

@media (min-width: 650px) and (max-width: 767px) and (min-height: 501px) and (max-height: 767px) {
  .page-game.page-game--horizontal-word-bank {
    --game-mobile-panel-min-height: var(--game-mobile-panel-shell-height);
  }

  .page-game.page-game--horizontal-word-bank .game-stage {
    height: calc(var(--game-mobile-panel-top) + var(--game-mobile-panel-shell-height));
    min-height: calc(var(--game-mobile-panel-top) + var(--game-mobile-panel-shell-height));
  }

  .page-game.page-game--horizontal-word-bank .game-panel,
  .page-game.page-game--horizontal-word-bank.page-game--viewport-recovered .game-panel {
    height: var(--game-mobile-panel-shell-height);
    min-height: var(--game-mobile-panel-shell-height);
  }

  .page-game.page-game--horizontal-word-bank .word-bank-area,
  .page-game.page-game--horizontal-word-bank.page-game--viewport-recovered .word-bank-area {
    flex: 0 0 auto;
    height: calc(var(--game-mobile-panel-shell-height) - var(--game-mobile-controls-height));
    min-height: calc(var(--game-mobile-panel-shell-height) - var(--game-mobile-controls-height));
    max-height: calc(var(--game-mobile-panel-shell-height) - var(--game-mobile-controls-height));
    margin-top: 0;
    padding-top: calc(5px * var(--mobile-ui-scale));
  }

  .page-game.page-game--horizontal-word-bank .word-bank-scrollbar,
  .page-game.page-game--horizontal-word-bank.page-game--viewport-recovered .word-bank-scrollbar {
    top: auto;
    bottom: auto;
    margin: 0 calc(22px * var(--mobile-ui-scale));
  }
}

@media (min-width: 744px) and (max-width: 767px) and (orientation: portrait) {
  .page-game {
    /* 546 canvas: scaled copy of the 401 mobile article overlay. */
    --pm-screen-left: 178.48px;
    --pm-screen-top: 28.46px;
    --pm-screen-width: 258.5px;
    --pm-screen-bottom: 514.27px;
    --pm-screen-height: calc(var(--pm-screen-bottom) - var(--pm-screen-top));
    --pm-panel-left: 190.49px;
    --pm-panel-width: 245.59px;
    --pm-title-left: 200.64px;
    --pm-title-width: 226.2px;
    --pm-subtitle-left: 195.1px;
    --pm-subtitle-width: 233.58px;
    --pm-upper-top: 83px;
    --pm-upper-title-top-gap: 6.9px;
    --pm-upper-title-bottom-gap: 7.66px;
    --pm-panels-gap: 8px;
    --pm-lower-bottom-inset: 7px;
    --pm-lower-bottom: calc(var(--pm-screen-bottom) - var(--pm-lower-bottom-inset));
    --pm-lower-min-height: 55px;
    --pm-lower-content-top-gap: 9px;
    --pm-lower-content-bottom-gap: 0px;
    --pm-title-initial-height: 116px;
    --pm-dynamic-title-height: 116px;
    --pm-upper-height: calc(var(--pm-dynamic-title-height) + var(--pm-upper-title-top-gap) + var(--pm-upper-title-bottom-gap));
    --pm-lower-top: calc(var(--pm-upper-top) + var(--pm-upper-height) + var(--pm-panels-gap));
    --pm-lower-height: calc(var(--pm-lower-bottom) - var(--pm-lower-top));
    --pm-dynamic-lower-height: var(--pm-lower-height);
    --game-744-phone-scale: 0.72;
    --game-744-phone-offset-top: 20px;
    --game-744-panel-gap: 28px;
    --game-744-word-bank-height: 360px;
    min-height: 100svh;
    overflow-x: hidden;
    overflow-y: auto;
    background-size: 54px 54px;
    background-position: top left;
    background-attachment: scroll;
    /* 744px portrait tablets: restore the tablet grid spacing instead of the denser mobile graph paper. */
    /* 744px portrait tablets: promote this edge width to the stacked tablet layout instead of the mobile panel. */
  }

  .page-game::before {
    display: block !important;
    top: 6px;
    background-image: url('../assets/images/halftone-bg.png?v=1791285426');
    background-size: cover;
    background-position: left top;
    background-repeat: no-repeat;
    mix-blend-mode: multiply;
    opacity: 0.5;
    /* 744px portrait tablets: restore the tablet halftone layer that the mobile override hides. */
  }

  .game-stage {
    display: flow-root;
    /* 744px portrait tablets: keep the stacked panel offset from collapsing into the stage. */
    min-height: auto;
    overflow: visible;
    padding-bottom: 48px;
  }

  .page-game .phone-mockup {
    left: 50%;
    margin-left: 0;
    top: var(--game-744-phone-offset-top);
    width: 546px;
    height: 629.323px;
    transform: translateX(-50%) scale(var(--game-744-phone-scale));
    /* 744px portrait tablets: keep the phone centered with the same scale used by the panel offset. */
    transform-origin: top center;
    z-index: 1;
  }

  .page-game .pm-screen-shell {
    clip-path: none;
    border-radius: 22px 22px 8px 8px;
  }

  .page-game .pm-screen-lower {
    left: calc(var(--pm-panel-left) - var(--pm-screen-left));
    width: var(--pm-panel-width);
    border-radius: 0;
  }

  .game-panel {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    transform: none;
    width: min(560px, calc(100vw - 32px));
    height: auto;
    min-height: 0;
    max-height: none;
    margin: calc((629.323px * var(--game-744-phone-scale)) + var(--game-744-phone-offset-top) + var(--game-744-panel-gap)) auto 0;
    /* 744px portrait tablets: stack the panel below the phone instead of keeping the mobile absolute overlay. */
  }

  .game-panel::before {
    display: none;
    /* 744px portrait tablets: remove the mobile notched SVG panel so the tablet block can use the standard word-bank shell. */
  }

  /* ── pm-* child layers: reset from mobile 401px canvas back to desktop 546×629 canvas ── */
  .page-game .pm-hand-wrap {
    left:   35px;
    top:   -69px;
    width:  577px;
    height: 675px;
  }

  .page-game .pm-phone-chrome-top {
    left:   170px;
    top:      8px;
    width:  289px;
    height:  72px;
  }

  .page-game .pm-yediot-logo {
    inset: auto;
    left: calc(var(--pm-panel-left) - var(--pm-screen-left));
    top: 11px;
    width: var(--pm-panel-width);
    height: auto;
    aspect-ratio: 248 / 32;
    z-index: 6;
  }

  .page-game .pm-logo-rule {
    left: calc(var(--pm-panel-left) - var(--pm-screen-left));
    right: auto;
    width: var(--pm-panel-width);
    top: 45px;
    height: 2px;
    min-height: 2px;
    max-height: 2px;
    z-index: 6;
  }

  .page-game .pm-phone-chrome-bottom {
    left:   176.31px;
    top:    435.87px;
    width:  271.746px;
    height:  98.131px;
  }

  .page-game .pm-zoom-icon {
    display: none;
  }

  .page-game .pm-article-title {
    font-size:   23.71px;
    line-height: 25.065px;
    padding:     2px 4px;
    -webkit-line-clamp: 5;
    line-clamp: 5;
  }

  .page-game .pm-article-subtitle {
    font-size:    13.548px;
    line-height:  16.258px;
    padding:      4px 6px;
    -webkit-line-clamp: 8;
    line-clamp: 8;
  }

  .controls-bar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: auto;
    min-height: 70px;
    padding: 12px 16px;
    position: relative;
    /* 744px portrait: switch from mobile absolute layout back to tablet flex row. */
  }

  /* Reset mobile absolute positioning — restore all controls to in-flow flex items. */
  .controls-bar .hint-tile--mobile {
    position: relative;
    left: 0px;
    top: auto;
    --hint-mobile-scale: 1;
    width: 53.909px;
    height: 51px;
  }

  .controls-bar .score-tile {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    width: 88px;
    height: 45px;
    border-width: 3px;
    gap: 5px;
    padding: 3px 8px;
  }

  .controls-bar .score-value {
    font-size: 34px;
  }

  .controls-bar .score-tile--wrong .score-icon,
  .controls-bar .score-tile--correct .score-icon {
    width: 22px;
    height: 24px;
  }

  .controls-bar .pixel-back-btn {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: 120px;
    height: 40px;
    min-height: 40px;
    aspect-ratio: auto;
  }

  .word-bank-area {
    flex: 0 0 auto;
    height: var(--game-744-word-bank-height);
    min-height: var(--game-744-word-bank-height);
    max-height: var(--game-744-word-bank-height);
    margin-top: 0;
    background: #4d69ff;
    border: 2px solid #000;
    /* 744px portrait tablets: restore the tablet word-bank shell instead of the mobile horizontal scroller container. */
  }

  .word-bank {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: none;
    grid-auto-flow: row;
    grid-auto-columns: auto;
    align-content: start;
    row-gap: 15px;
    column-gap: 0;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    direction: rtl;
    padding: 17px 20px 17px 17px;
    scrollbar-width: none;
    /* 744px portrait tablets: switch back to the tablet three-column bank so words stop spilling off-screen. */
  }

  .word-btn {
    display: block;
    width: fit-content;
    margin: 0 auto;
    padding: 2px 5px;
    height: auto;
    line-height: normal;
    justify-self: center;
    /* 744px portrait tablets: restore the tablet word sizing instead of the mobile single-row button metrics. */
  }

  .word-bank-scrollbar {
    top: 12px;
    right: 10px;
    bottom: auto;
    left: auto;
    width: 23px;
    height: calc(100% - 24px);
    /* 744px portrait tablets: put the custom scrollbar back on the physical right edge in vertical mode. */
  }

  .word-bank-scrollbar .deco-scrollbar-track {
    top: 0;
    left: 3px;
    width: 17px;
    height: 100%;
    /* 744px portrait tablets: restore the vertical scrollbar rail geometry used by the tablet layout. */
  }

  .word-bank-scrollbar .deco-scrollbar-track::before {
    top: 1px;
    left: 1px;
    width: 15px;
    height: calc(100% - 2px);
    /* 744px portrait tablets: keep the inner rail aligned after overriding the mobile horizontal track. */
  }

  .word-bank-scrollbar .deco-scrollbar-thumb {
    top: 0;
    left: -3px;
    width: 23px;
    height: 107px !important;
    flex-direction: column;
    gap: 0;
    transition: top 200ms;
    /* 744px portrait tablets: restore a vertical thumb because JS drives top, not left, in tablet mode. */
  }

  .word-bank-scrollbar .deco-scrollbar-thumb::before {
    display: block;
    /* 744px portrait tablets: re-enable the desktop/tablet grip mark on the vertical thumb. */
  }

  .word-bank-scrollbar .deco-scrollbar-grip-line {
    display: none !important;
    /* 744px portrait tablets: hide the mobile horizontal grip artwork after switching the scrollbar back to vertical. */
  }
}

@media (min-width: 600px) and (max-width: 743px) and (min-height: 900px) {
  .page-game {
    --game-large-mobile-scale: clamp(0.62,
      min(
        calc((100vw - 84px) / 401.32px),
        calc((100vh - 492px) / 462.563px)
      ),
      0.74);
    height: auto;
    min-height: 100svh;
    overflow-y: auto;
  }

  .game-stage {
    min-height: calc((462.563px * var(--game-large-mobile-scale)) + 420px);
    padding-bottom: 40px;
  }

  .page-game .phone-mockup {
    left: 50%;
    top: 24px;
    margin-left: 0;
    transform: translateX(-50%) scale(var(--game-large-mobile-scale));
    transform-origin: top center;
  }

  .game-panel {
    left: 50%;
    right: auto;
    top: calc((462.563px * var(--game-large-mobile-scale)) + 44px);
    width: min(560px, calc(100vw - 28px));
    height: auto;
    min-height: 360px;
    transform: translateX(-50%);
  }

  .word-bank-area {
    min-height: 220px;
    max-height: 260px;
  }
}

@media (width: 744px) and (height: 1133px) and (orientation: portrait) {
  html:has(body.page-game) {
    overflow: hidden;
  }

  .page-game {
    height: 100svh;
    min-height: 100svh;
    overflow: hidden;
  }

  .game-stage {
    height: var(--game-stage-height);
    min-height: 0;
    overflow: hidden;
    padding-bottom: 0;
  }
}

@media (min-width: 600px) and (max-width: 660px) and (min-height: 900px) and (max-height: 1024px) {
  .game-panel {
    min-height: 0;
    /* 614x960 rendered view: drop the inherited large-mobile floor so the panel stops reserving empty blue space below the bank. */
  }

  .game-panel::before {
    height: calc(127px + 26.5px + 5px + 184px);
    /* 614x960 rendered view: trim the mobile panel shell to the actual controls+bank stack so the decorative blue background does not extend below the word bank. */
  }

  .controls-bar {
    height: calc(127px * var(--mobile-ui-scale));
    /* 614x960 rendered view: deepen the control lane so the buttons sit inside the panel notch instead of riding too close to the top edge. */
  }

  .controls-bar .score-tile {
    top: calc(47px * var(--mobile-ui-scale));
  }

  .controls-bar .pixel-back-btn {
    top: calc(85px * var(--mobile-ui-scale));
  }

  .controls-bar .hint-tile--mobile {
    left: auto;
    right: calc(22px * var(--mobile-ui-scale));
    top: calc(73px * var(--mobile-ui-scale));
    /* 614x960 rendered view: anchor the hint tile from the panel's right edge so it does not drift inward as the panel widens beyond the 390px mobile frame. */
  }

  .word-bank-area {
    flex: 0 0 auto;
    height: 184px;
    min-height: 237px;
    max-height: 184px;
    /* 614x960 rendered view: keep the large-mobile bank at its compact baseline instead of stretching taller. */
  }

  .word-bank-scrollbar {
    left: auto;
    right: auto;
    width: calc(100% - calc(44px * var(--mobile-ui-scale)));
    margin-left: calc(22px * var(--mobile-ui-scale));
    margin-right: calc(22px * var(--mobile-ui-scale));
    /* 600x1024 portrait belongs to this tall 600-660 group; give the horizontal scrollbar
       an explicit centered width so the insets stay equal on both sides. */
  }
}

@media (min-width: 450px) and (max-width: 743px) {
  /* Phone mockup: scale is capped at 1.0 (390px baseline), so on wider screens
     the 401.32px canvas would otherwise sit flush-left. Center it horizontally. */
  .page-game .phone-mockup {
    left: calc((100vw - 401.32px) / 2);
  }

  .controls-bar .hint-tile--mobile {
    left: auto;
    right: calc(22px * var(--mobile-ui-scale));
    /* 450-743 wide mobile portrait: keep the hint tile horizontally centered in the
       right blue lane before the notch/tab without changing its baseline Y position. */
  }

  .word-bank-scrollbar {
    left: auto;
    right: auto;
    width: auto;
    /* 450-743 wide mobile portrait: scrollbar is position:relative so left/right act as
       offsets (not anchors). Reset to auto so the base margin:0 22px handles equal
       spacing on both sides. */
  }
}

@media (min-width: 450px) and (max-width: 743px) and (min-height: 900px) {
  .controls-bar {
    height: calc(127px * var(--mobile-ui-scale));
    /* 450-743 wide mobile portrait: preserve the deeper control lane so the back button
       and hint tile align with the notched panel instead of riding too high. */
  }

  .controls-bar .score-tile {
    top: calc(47px * var(--mobile-ui-scale));
  }

  .controls-bar .pixel-back-btn {
    top: calc(85px * var(--mobile-ui-scale));
  }

  .controls-bar .hint-tile--mobile {
    top: calc(73px * var(--mobile-ui-scale));
    /* 450-743 wide mobile portrait with tall height: keep only the deeper Y placement
       while the X placement is handled by the width-only override above. */
  }
}

@media (min-width: 600px) and (max-width: 660px) and (min-height: 900px) and (max-height: 1024px) {
  .page-game .phone-mockup {
    left: 50%;
    /* 600x1024 portrait inherits the later 450-743 wide-mobile left formula, which
       double-centers once the tall large-mobile band already uses translateX(-50%).
       Restore true center anchoring for this tall 600-660 group. */
  }

  .page-game .word-bank-scrollbar {
    left: auto;
    right: auto;
    width: calc(100% - calc(44px * var(--mobile-ui-scale)));
    margin-left: calc(22px * var(--mobile-ui-scale));
    margin-right: calc(22px * var(--mobile-ui-scale));
  }
}

/* ─── First-time instructions popup ───────────────────────────────────────────────
   Desktop: Figma node 195:1440 — 349×209px box, 24px bold text, close icon top-right
   Mobile:  Figma node 463:3973 — 309×209px box, 20px bold text
────────────────────────────────────────────────────────────────────── */
.instructions-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  min-height: 100%;
  background: rgba(175, 175, 175, 0.80);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 28px 12px;
  box-sizing: border-box;
  overflow: visible;
  -webkit-text-size-adjust: 100%;
}
.instructions-overlay.hidden { display: none; }

.instructions-box {
  position: relative;
  width: 349px;
  height: 209px;
  max-width: 100%;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: visible;
  flex-shrink: 0;
}

/* Desktop popup SVG frame — Figma node 195:1441, scaleX(-1) for RTL shadow.
   Use <img> rather than a CSS background: iOS Safari mishandles SVG masks,
   CSS variables, and background-size: 100% 100% on background images. */
.instructions-frame {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  transform: scaleX(-1);
  transform-origin: center;
  z-index: 0;
  pointer-events: none;
}
.instructions-frame--mobile { display: none; }

/* Close (X) button — Figma: top-right corner, floats above the popup box */
.instructions-close {
  position: absolute;
  top: -19px;
  right: 33px;
  width: 35px;
  height: 37.48px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 1;
  transition: opacity 0.15s;
}
.instructions-close:hover { opacity: 0.75; }
.instructions-close img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Instruction text — Figma 743:2879 / 195:1458: MosesText_Inter Bold 24/30, center, 229×120 */
.instructions-text {
  position: relative;
  z-index: 1;
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
  letter-spacing: 0;
  color: #000;
  text-align: center;
  margin: 0;
  width: 229px;
  overflow-wrap: break-word;
}

@media (max-width: 767px) {
  .instructions-overlay {
    /* Figma node 774:3632 overlay */
    --instructions-w: min(309px, calc(100vw - 24px));
    background: rgba(0, 0, 0, 0.47);
  }

  .instructions-box {
    width: var(--instructions-w);
    height: calc(var(--instructions-w) * 209 / 309);
    min-height: 0;
  }

  .instructions-frame--desktop { display: none; }
  .instructions-frame--mobile { display: block; }

  .instructions-close {
    width: calc(var(--instructions-w) * 35 / 309);
    height: calc(var(--instructions-w) * 37.4799 / 309);
    top: calc(var(--instructions-w) * -16.26 / 309);
    right: calc(var(--instructions-w) * 19.47 / 309);
  }

  .instructions-text {
    width: calc(var(--instructions-w) * 186 / 309);
    font-size: calc(var(--instructions-w) * 20 / 309);
    line-height: calc(var(--instructions-w) * 26 / 309);
  }
}

/* Safari cannot divide one length by another. If that invalidates
   --instructions-w calcs, keep a fixed mobile popup size. */
@supports not (width: calc(1px * (1px / 1px))) {
  @media (max-width: 767px) {
    .instructions-box {
      width: 309px;
      max-width: calc(100vw - 24px);
      height: 209px;
    }

    .instructions-close {
      width: 35px;
      height: 37.48px;
      top: -16.26px;
      right: 19.47px;
    }

    .instructions-text {
      width: 186px;
      font-size: 20px;
      line-height: 26px;
    }
  }
}

/* ─── Out-of-guesses popup
   Landscape / laptop / desktop: Figma 3586:8530 — 471×245 box, two buttons in a row
   Portrait mobile: Figma 3586:9989 — 309×306 box, two buttons stacked
   Safari cannot divide one length by another, so do not use px/px scale factors.
────────────────────────────────────────────────────────────────────── */
.out-of-guesses-overlay {
  --oog-w: min(471px, calc(100vw - 24px), calc((100dvh - 48px) * 471 / 280));
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  min-height: 100%;
  background: rgba(0, 0, 0, 0.53);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 16px;
  box-sizing: border-box;
  overflow: visible;
  -webkit-text-size-adjust: 100%;
}
.out-of-guesses-overlay.hidden { display: none; }

.out-of-guesses-box {
  position: relative;
  width: var(--oog-w);
  height: calc(var(--oog-w) * 245 / 471);
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--oog-w) * 18 / 471);
  overflow: visible;
  flex-shrink: 0;
}

/* Use <img> rather than a CSS background: iOS Safari mishandles SVG masks
   and background-size: 100% 100% on background images. */
.out-of-guesses-frame {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  transform: scaleX(-1);
  transform-origin: center;
  z-index: 0;
  pointer-events: none;
}
.out-of-guesses-frame--portrait { display: none; }

.out-of-guesses-close {
  position: absolute;
  top: calc(var(--oog-w) * -19 / 471);
  right: calc(var(--oog-w) * 33 / 471);
  width: calc(var(--oog-w) * 35 / 471);
  height: calc(var(--oog-w) * 37.48 / 471);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 1;
  transition: opacity 0.15s;
}
.out-of-guesses-close:hover { opacity: 0.75; }
.out-of-guesses-close img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.out-of-guesses-title {
  position: relative;
  z-index: 1;
  font-family: var(--font-body);
  font-size: calc(var(--oog-w) * 28 / 471);
  font-weight: 700;
  line-height: calc(var(--oog-w) * 35 / 471);
  letter-spacing: 0;
  color: #000;
  text-align: center;
  unicode-bidi: plaintext;
  margin: 0;
  width: calc(var(--oog-w) * 229 / 471);
}

.out-of-guesses-actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: calc(var(--oog-w) * 21 / 471);
}

.out-of-guesses-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--oog-w) * 199.226 / 471);
  height: calc(var(--oog-w) * 63.124 / 471);
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-body);
  color: #000;
}
.out-of-guesses-btn img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}
.out-of-guesses-btn span {
  position: relative;
  z-index: 1;
  font-size: calc(var(--oog-w) * 20 / 471);
  font-weight: 700;
  line-height: calc(var(--oog-w) * 30 / 471);
  transform: translateY(calc(var(--oog-w) * -3 / 471));
  white-space: nowrap;
}

@media (max-width: 767px) and (orientation: portrait) {
  .out-of-guesses-overlay {
    --oog-w: min(309px, calc(100vw - 24px), calc((100dvh - 48px) * 309 / 340));
    background: rgba(0, 0, 0, 0.47);
  }

  .out-of-guesses-box {
    height: calc(var(--oog-w) * 306 / 309);
    gap: calc(var(--oog-w) * 25 / 309);
  }

  .out-of-guesses-frame--desktop { display: none; }
  .out-of-guesses-frame--portrait { display: block; }

  .out-of-guesses-close {
    top: calc(var(--oog-w) * -16.26 / 309);
    right: calc(var(--oog-w) * 22 / 309);
    width: calc(var(--oog-w) * 35 / 309);
    height: calc(var(--oog-w) * 37.48 / 309);
  }

  .out-of-guesses-title {
    font-size: calc(var(--oog-w) * 20 / 309);
    line-height: calc(var(--oog-w) * 26 / 309);
    width: calc(var(--oog-w) * 239 / 309);
  }

  .out-of-guesses-actions {
    flex-direction: column-reverse;
    gap: calc(var(--oog-w) * 20 / 309);
  }

  .out-of-guesses-btn {
    width: calc(var(--oog-w) * 199.226 / 309);
    height: calc(var(--oog-w) * 63.124 / 309);
  }

  .out-of-guesses-btn span {
    font-size: calc(var(--oog-w) * 20 / 309);
    line-height: calc(var(--oog-w) * 30 / 309);
    transform: translateY(calc(var(--oog-w) * -3 / 309));
  }
}

/* Safari cannot divide one length by another. If that invalidates
   --oog-w calcs, keep the designed pixel sizes. */
@supports not (width: calc(1px * (1px / 1px))) {
  .out-of-guesses-overlay { --oog-w: 471px; }

  .out-of-guesses-box {
    width: 471px;
    max-width: calc(100vw - 24px);
    height: 245px;
    gap: 18px;
  }

  .out-of-guesses-close {
    top: -19px;
    right: 33px;
    width: 35px;
    height: 37.48px;
  }

  .out-of-guesses-title {
    font-size: 28px;
    line-height: 35px;
    width: 229px;
  }

  .out-of-guesses-actions { gap: 21px; }

  .out-of-guesses-btn {
    width: 199.226px;
    height: 63.124px;
  }

  .out-of-guesses-btn span {
    font-size: 20px;
    line-height: 30px;
    transform: translateY(-3px);
  }

  @media (max-width: 767px) and (orientation: portrait) {
    .out-of-guesses-overlay { --oog-w: 309px; }

    .out-of-guesses-box {
      width: 309px;
      max-width: calc(100vw - 24px);
      height: 306px;
      gap: 25px;
    }

    .out-of-guesses-close {
      top: -16.26px;
      right: 22px;
      width: 35px;
      height: 37.48px;
    }

    .out-of-guesses-title {
      font-size: 20px;
      line-height: 26px;
      width: 239px;
    }

    .out-of-guesses-actions { gap: 20px; }

    .out-of-guesses-btn {
      width: 199.226px;
      height: 63.124px;
    }

    .out-of-guesses-btn span {
      font-size: 20px;
      line-height: 30px;
      transform: translateY(-3px);
    }
  }
}

@media (orientation: landscape) and (max-width: 959px) and (max-height: 520px) {
  html,
  body.page-game {
    height: auto;
    min-height: 100dvh;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .page-game {
    min-height: max(100dvh, calc(var(--header-height-mobile) + var(--game-landscape-required-stage-height)));
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
    background-image:
      linear-gradient(rgba(0, 0, 0, 0.58) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0, 0, 0, 0.58) 1px, transparent 1px);
    background-size: 39px 39px;
    background-position: 18px 14px;
    --game-stage-height: var(--app-available-height);
    --game-panel-width: clamp(286px, 34vw, 318px);
    --game-landscape-phone-left-offset: calc(100vw * 0.02);
    --game-landscape-panel-right-offset: calc(100vw * 0.03);
    --game-landscape-panel-phone-gap: calc(100vw * 0.05);
    --game-landscape-ui-scale: clamp(0.64, calc((100dvh - var(--header-height-mobile)) / 410px), 0.74);
    --game-phone-scale: clamp(0.48,
      min(
        calc((100dvh - var(--header-height-mobile) - 18px) / 462.563px),
        calc((100vw - var(--game-landscape-phone-left-offset) - var(--game-landscape-panel-right-offset) - var(--game-landscape-panel-phone-gap) - var(--game-panel-width)) / 401.32px)
      ),
      0.52);
    --game-landscape-required-stage-height: calc(8px + (606px * var(--game-phone-scale)) + 8px);
    /* Same 401.32 article overlay as portrait mobile — landscape only changes page layout. */
    --pm-screen-left: 131.19px;
    --pm-screen-top: 20.92px;
    --pm-screen-width: 190px;
    --pm-screen-bottom: 378px;
    --pm-screen-height: calc(var(--pm-screen-bottom) - var(--pm-screen-top));
    --pm-panel-left: 140.01px;
    --pm-panel-width: 180.51px;
    --pm-title-left: 147.48px;
    --pm-title-width: 166.26px;
    --pm-subtitle-left: 143.40px;
    --pm-subtitle-width: 171.69px;
    --pm-upper-top: 61px;
    --pm-upper-title-top-gap: 5.07px;
    --pm-upper-title-bottom-gap: 5.63px;
    --pm-panels-gap: 6px;
    --pm-lower-bottom-inset: 5px;
    --pm-lower-bottom: calc(var(--pm-screen-bottom) - var(--pm-lower-bottom-inset));
    --pm-lower-min-height: 40.53px;
    --pm-lower-content-top-gap: 6.75px;
    --pm-lower-content-bottom-gap: 0px;
    --pm-title-initial-height: 85.56px;
    --pm-dynamic-title-height: 85.56px;
  }

  .page-game::before {
    opacity: 0.34;
  }

  .page-game .site-header {
    height: var(--header-height-mobile);
  }

  .page-game .game-stage {
    min-height: max(var(--game-stage-height), var(--game-landscape-required-stage-height));
    height: auto;
    overflow: hidden;
    background: transparent;
  }

  .page-game .phone-mockup {
    left: var(--game-landscape-phone-left-offset);
    top: 8px;
    width: 401.32px;
    height: 462.563px;
    transform: scale(var(--game-phone-scale));
    transform-origin: top left;
    z-index: 1;
  }

  .page-game .pm-hand-wrap {
    left: 25.73px;
    top: -50.72px;
    width: 424.105px;
    height: 496.137px;
    transform: rotate(180deg) scaleY(-1);
    transform-origin: center center;
    clip-path: none;
  }

  .page-game .pm-phone-chrome-top {
    left: 124.95px;
    top: 5.88px;
    width: 212.42px;
    height: 52.921px;
  }

  .page-game .pm-phone-chrome-bottom {
    left: 129.59px;
    top: 320.37px;
    width: 199.738px;
    height: 72.128px;
    transform: scaleY(-1);
    transform-origin: center center;
  }

  .page-game .pm-screen-bg {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }

  .page-game .pm-yediot-logo {
    inset: auto;
    left: calc(var(--pm-panel-left) - var(--pm-screen-left));
    top: 8px;
    width: var(--pm-panel-width);
    height: auto;
    aspect-ratio: 248 / 32;
    z-index: 6;
  }

  .page-game .pm-yediot-logo img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: none;
    object-fit: contain;
  }

  .page-game .pm-logo-rule {
    left: calc(var(--pm-panel-left) - var(--pm-screen-left));
    right: auto;
    width: var(--pm-panel-width);
    top: 33px;
    height: 2px;
    min-height: 2px;
    max-height: 2px;
    z-index: 6;
  }

  .page-game .pm-screen-shell {
    border-radius: 16px 16px 6px 6px;
  }

  .page-game .pm-screen-upper {
    left: calc(var(--pm-panel-left) - var(--pm-screen-left));
    top: calc(var(--pm-upper-top) - var(--pm-screen-top));
    width: var(--pm-panel-width);
  }

  .page-game .pm-screen-lower {
    left: calc(var(--pm-panel-left) - var(--pm-screen-left));
    top: calc(var(--pm-lower-top) - var(--pm-screen-top));
    width: var(--pm-panel-width);
    border-radius: 0;
  }

  .page-game .pm-article-title {
    left: calc(var(--pm-title-left) - var(--pm-screen-left));
    top: calc(var(--pm-upper-top) + var(--pm-upper-title-top-gap) - var(--pm-screen-top));
    width: var(--pm-title-width);
    font-size: 17.427px;
    line-height: 18.423px;
    padding: 1px 3px;
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
  }

  .page-game .pm-article-subtitle {
    left: calc(var(--pm-subtitle-left) - var(--pm-screen-left));
    top: calc(var(--pm-lower-top) + var(--pm-lower-content-top-gap) - var(--pm-screen-top));
    width: var(--pm-subtitle-width);
    font-size: 12px;
    line-height: 14.4px;
    padding: 2px 3px;
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
  }

  .page-game .pm-article-title .blacked-word,
  .page-game .pm-article-subtitle .blacked-word {
    min-width: 1.15em;
    padding: 0 2px;
    margin-block: 1px;
    border-radius: 0;
  }

  .page-game .game-panel {
    position: absolute;
    top: 0;
    left: auto;
    right: var(--game-landscape-panel-right-offset);
    margin-top: 0;
    width: var(--game-panel-width);
    height: calc(var(--game-stage-height) - 18px);
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .page-game .controls-bar {
    position: relative;
    display: block;
    flex: none;
    min-height: 0;
    height: calc(86px * var(--game-landscape-ui-scale));
    padding: 0;
  }

  .page-game .controls-bar .pixel-back-btn {
    position: absolute;
    left: auto;
    right: 0;
    top: calc(38px * var(--game-landscape-ui-scale));
    width: clamp(104px, calc(146px * var(--game-landscape-ui-scale)), 116px);
    height: calc(40px * var(--game-landscape-ui-scale));
    min-height: calc(40px * var(--game-landscape-ui-scale));
  }

  .page-game .controls-bar .pixel-back-btn-frame--desktop,
  .page-game .controls-bar .pixel-back-btn-text--desktop {
    display: none;
  }

  .page-game .controls-bar .pixel-back-btn-frame--mobile,
  .page-game .controls-bar .pixel-back-btn-fill--mobile,
  .page-game .controls-bar .pixel-back-btn-text--mobile {
    display: block;
  }

  .page-game .controls-bar .pixel-back-btn-frame--mobile.pixel-back-btn-frame--outer {
    inset: 0.01% 0 1.64% 0.62%;
    width: 100%;
    height: 100%;
    z-index: 0;
  }

  .page-game .controls-bar .pixel-back-btn-fill--mobile {
    top: calc(1px * var(--game-landscape-ui-scale));
    right: calc(1px * var(--game-landscape-ui-scale));
    bottom: calc(5px * var(--game-landscape-ui-scale));
    left: calc(6px * var(--game-landscape-ui-scale));
    z-index: 1;
  }

  .page-game .controls-bar .pixel-back-btn-frame--mobile.pixel-back-btn-frame--inner {
    inset: 0 0 12.12% 5.19%;
    width: 96%;
    height: 88%;
    z-index: 2;
  }

  .page-game .controls-bar .pixel-back-btn-text--mobile {
    top: calc(8px * var(--game-landscape-ui-scale));
    right: calc(5px * var(--game-landscape-ui-scale));
    bottom: calc(11px * var(--game-landscape-ui-scale));
    left: calc(10px * var(--game-landscape-ui-scale));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(8.5px, calc(11px * var(--game-landscape-ui-scale)), 10.5px);
    line-height: 1.1;
    z-index: 3;
  }

  .page-game .hint-tile--desktop {
    display: none;
  }

  .page-game .hint-tile--mobile {
    display: block;
  }

  .page-game .controls-bar .hint-tile--mobile {
    --hint-mobile-scale: calc(0.88 * var(--game-landscape-ui-scale));
    position: absolute;
    left: auto;
    right: calc(166px * var(--game-landscape-ui-scale));
    top: calc(30px * var(--game-landscape-ui-scale));
    width: calc(44px * var(--game-landscape-ui-scale));
    height: calc(42px * var(--game-landscape-ui-scale));
    transform: none;
  }

  .page-game .controls-bar .hint-tile--mobile.hint-tile--exhausted {
    --hint-mobile-scale: calc(1.02 * var(--game-landscape-ui-scale));
    top: calc(30px * var(--game-landscape-ui-scale));
    width: calc(50px * var(--game-landscape-ui-scale));
    height: calc(48px * var(--game-landscape-ui-scale));
  }

  .page-game .controls-bar .score-tile {
    position: absolute;
    width: calc(60px * var(--game-landscape-ui-scale));
    height: calc(30px * var(--game-landscape-ui-scale));
    border-width: calc(1.845px * var(--game-landscape-ui-scale));
    top: calc(41px * var(--game-landscape-ui-scale));
  }

  .page-game .controls-bar .score-tile--wrong {
    left: auto;
    right: calc(224px * var(--game-landscape-ui-scale));
    gap: calc(4px * var(--game-landscape-ui-scale));
    padding: calc(2px * var(--game-landscape-ui-scale)) calc(7px * var(--game-landscape-ui-scale));
  }

  .page-game .controls-bar .score-tile--correct {
    left: auto;
    right: calc(299px * var(--game-landscape-ui-scale));
    gap: calc(5px * var(--game-landscape-ui-scale));
    padding: calc(2px * var(--game-landscape-ui-scale)) calc(10px * var(--game-landscape-ui-scale));
  }

  .page-game .controls-bar .score-value {
    font-size: calc(27.673px * var(--game-landscape-ui-scale));
  }

  .page-game .controls-bar .score-tile--wrong .score-icon {
    width: calc(17.581px * var(--game-landscape-ui-scale));
    height: calc(18.92px * var(--game-landscape-ui-scale));
  }

  .page-game .controls-bar .score-tile--correct .score-icon {
    width: calc(15.989px * var(--game-landscape-ui-scale));
    height: calc(18.92px * var(--game-landscape-ui-scale));
  }

  .page-game .word-bank-area {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    width: 100%;
    margin-top: 8px;
    overflow: hidden;
  }

  .page-game .word-bank {
    direction: rtl;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: none;
    grid-auto-flow: row;
    grid-auto-columns: auto;
    height: 100%;
    align-content: start;
    gap: calc(12px * var(--game-landscape-ui-scale)) 0;
    padding: calc(10px * var(--game-landscape-ui-scale)) calc(12px * var(--game-landscape-ui-scale));
    overflow-x: hidden;
    overflow-y: auto;
  }

  .page-game .word-btn {
    display: block;
    width: fit-content;
    margin: 0 auto;
    font-size: calc(14px * var(--game-landscape-ui-scale));
    height: auto;
    line-height: normal;
    padding: 0 calc(4px * var(--game-landscape-ui-scale));
    justify-self: center;
  }

  .page-game .word-bank-scrollbar {
    width: 18px;
  }

  .page-game .word-bank-scrollbar .deco-scrollbar-track {
    left: 2.5px;
    width: 13px;
  }

  .page-game .word-bank-scrollbar .deco-scrollbar-track::before {
    left: 1px;
    width: calc(100% - 2px);
  }

  .page-game .word-bank-scrollbar .deco-scrollbar-thumb {
    left: 0;
    width: 18px;
  }

  .page-game .instructions-box {
    width: min(320px, calc(100vw - 100px));
    height: calc(min(320px, calc(100vw - 100px)) * 209 / 349);
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  .page-game .instructions-text {
    position: static;
    transform: none;
    width: min(229px, 72%);
    font-size: 20px;
    line-height: 26px;
    text-align: center;
  }
}

@media (orientation: landscape) and (width: 667px) and (height: 375px) {
  .page-game {
    --game-landscape-mockup-shift-ratio: 0.1248;
  }
}

@media (orientation: landscape) and (width: 640px) and (height: 360px) {
  .page-game {
    --game-landscape-mockup-shift-ratio: 0.0624;
    /* Galaxy Note 3-class landscape viewport is narrower than the iPhone 667x375 group,
       but taller than the <=700x320 band. Give the full mockup a smaller left shift so
       the hand clears the word bank without over-pulling the phone away from center. */
  }
}

@media (orientation: landscape) and (max-width: 700px) and (max-height: 320px) {
  .page-game {
    --game-landscape-mockup-shift-ratio: 0.1248;
  }

  .page-game .pm-article-title {
    font-size: 17.427px;
    line-height: 18.423px;
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
  }

  .page-game .pm-article-subtitle {
    font-size: 12px;
    line-height: 14.4px;
    -webkit-line-clamp: unset;
    line-clamp: unset;
  }
}

@media (orientation: landscape) and (max-width: 767px) {
  html,
  body.page-game {
    height: auto;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .page-game {
    --game-stage-height: var(--app-available-height);
    --game-landscape-required-stage-height: calc(8px + (606px * var(--game-phone-scale)) + 8px);
    --game-panel-width: clamp(286px, 34vw, 318px);
    --game-phone-scale: clamp(0.48,
      min(
        calc((100dvh - var(--header-height-mobile) - 18px) / 462.563px),
        calc((100vw - var(--game-landscape-phone-left-offset) - var(--game-landscape-panel-right-offset) - var(--game-landscape-panel-phone-gap) - var(--game-panel-width)) / 401.32px)
      ),
      0.52);
    width: 100%;
    min-width: 0;
    min-height: 100dvh;
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .page-game .game-stage {
    width: 100%;
    min-width: 0;
    min-height: max(var(--game-stage-height), var(--game-landscape-required-stage-height));
    height: auto;
    overflow: hidden;
    background: transparent;
  }

  .page-game .phone-mockup {
    left: var(--game-landscape-phone-left-offset);
    top: 8px;
    width: 401.32px;
    height: 462.563px;
    transform: translateX(calc(-401.32px * var(--game-landscape-mockup-shift-ratio, 0))) scale(var(--game-phone-scale));
    transform-origin: top left;
  }

  .page-game .pm-hand-wrap {
    left: 25.73px;
    top: -50.72px;
    width: 424.105px;
    height: 496.137px;
    overflow: hidden;
    clip-path: none;
    transform: rotate(180deg) scaleY(-1);
    transform-origin: center center;
  }

  .page-game .pm-phone-chrome-top {
    left: 124.95px;
    top: 5.88px;
    width: 212.42px;
    height: 52.921px;
  }

  .page-game .pm-screen-shell {
    left: var(--pm-screen-left);
    top: var(--pm-screen-top);
    width: var(--pm-screen-width);
    height: var(--pm-screen-height);
    clip-path: none;
    border-radius: 16px 16px 6px 6px;
  }

  .page-game .pm-phone-chrome-bottom {
    left: 129.59px;
    top: 320.37px;
    width: 199.738px;
    height: 72.128px;
  }

  .page-game .pm-article-title {
    font-size: 17.427px;
    line-height: 18.423px;
    font-weight: 700;
  }

  .page-game .pm-article-subtitle {
    font-size: 12px;
    line-height: 14.4px;
    font-weight: 400;
  }

  .page-game .game-panel {
    position: absolute;
    top: 0;
    right: var(--game-landscape-panel-right-offset);
    width: var(--game-panel-width);
    height: calc(var(--game-stage-height) - 18px);
    min-height: 0;
    isolation: auto;
  }

  .page-game .game-panel::before {
    display: none;
    background: none;
    content: none;
  }

  .page-game .controls-bar {
    position: relative;
    display: block;
    flex: none;
    min-height: 0;
    height: calc(86px * var(--game-landscape-ui-scale));
    padding: 0;
  }

  .page-game .word-bank-area {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    width: 100%;
    margin-top: 8px;
    overflow: hidden;
    background: #4d69ff;
    border: 2px solid #000;
    position: relative;
  }

  .page-game .word-bank {
    direction: rtl;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: none;
    grid-auto-flow: row;
    grid-auto-columns: auto;
    height: 100%;
    align-content: start;
    gap: calc(12px * var(--game-landscape-ui-scale)) 0;
    padding: calc(10px * var(--game-landscape-ui-scale)) calc(12px * var(--game-landscape-ui-scale));
    overflow-x: hidden;
    overflow-y: auto;
  }

  .page-game .word-bank-scrollbar {
    position: absolute;
    top: 0 !important;
    bottom: auto !important;
    left: auto !important;
    right: 0 !important;
    width: 18px !important;
    height: 100% !important;
    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none;
    z-index: 3;
  }

  .page-game .word-bank-scrollbar .deco-scrollbar-track {
    position: absolute;
    top: 0;
    left: 2.5px;
    width: 13px;
    height: 100%;
    background: #3f3f3f;
    border-radius: 2px;
  }

  .page-game .word-bank-scrollbar .deco-scrollbar-track::before {
    top: 2px;
    left: 1px;
    width: calc(100% - 2px);
    height: calc(100% - 4px);
    background: #717171;
    border-radius: 1px;
    display: block;
  }

  .page-game .word-bank-scrollbar .deco-scrollbar-thumb {
    position: absolute;
    left: 0;
    top: 0;
    right: auto;
    width: 18px;
    height: var(--deco-scrollbar-thumb-height, 107px) !important;
    background: #d4d4d4;
    border: 1.5px solid #555;
    box-shadow: inset -2px -2px 4px rgba(0, 0, 0, 0.25);
    border-radius: 0;
    transition: top 200ms;
  }

  .page-game .word-bank-scrollbar .deco-scrollbar-thumb::before {
    display: block !important;
  }

  .page-game .word-bank-scrollbar .deco-scrollbar-grip-line {
    display: none !important;
  }
}

/* Desktop-only phone mockup update (Figma node 2812:13127 / 1920x980).
  Keep tablet/mobile contracts unchanged by scoping to >=1024×700 only.
  Do not use (min-width: 700px) and (min-height: 1000px) — that leaked the
  709×854 canvas onto portrait tablets such as 941×1297. */
@media (min-width: 1024px) and (min-height: 700px) {
  .page-game {
    /* Phone group geometry from Figma node 2812:13220 at 1920x980. */
    --game-phone-left: 0px;
    --game-phone-top: 58px;
    --game-phone-scale: clamp(0.48,
      min(
        calc((100vh - 126px) / 854px),
        calc((100vw - var(--game-panel-width) - 140px) / 709px)
      ),
      1);
    --pm-screen-left: 210px;
    --pm-screen-top: 63px;
    --pm-screen-width: 292px;
    --pm-screen-bottom: 595px;
    --pm-panel-left: 223px;
    --pm-panel-width: 266px;
    --pm-title-left: 234px;
    --pm-title-width: 245px;
    --pm-subtitle-left: 228px;
    --pm-subtitle-width: 253px;
    --pm-upper-top: 132.5px;
    --pm-upper-title-top-gap: 9px;
    --pm-upper-title-bottom-gap: 10px;
    --pm-panels-gap: 5px;
    --pm-lower-bottom-inset: 8px;
    --pm-lower-min-height: 72px;
    --pm-lower-content-top-gap: 12px;
    --pm-lower-content-bottom-gap: 0px;
    --pm-title-initial-height: 152px;
  }

  .page-game .phone-mockup {
    left: calc(var(--game-phone-left) * var(--game-phone-scale));
    top: calc(var(--game-phone-top) * var(--game-phone-scale));
    width: 709px;
    height: 854px;
    transform: scale(var(--game-phone-scale));
    transform-origin: top left;
  }

  .page-game .pm-hand-wrap {
    left: -16px;
    top: 0;
    width: 660px;
    height: 826px;
    overflow: visible;
    clip-path: none;
  }

  .page-game .pm-hand-portrait-img {
  width: 139.13%;
        height: 116.99%;
        left: -19.65%;
        top: -8.16%;
  }

  .page-game .pm-screen-shell {
    border-radius: 30px;
  }

  .page-game .pm-yediot-logo {
    inset: auto;
    left: 20px;
    top: 19px;
    width: 248px;
    height: 32px;
  }

  .page-game .pm-yediot-logo img {
    width: auto;
    height: 100%;
    max-height: none;
  }

  .page-game .pm-logo-rule {
    left: 13.24px;
    top: 57.81px;
    width: 265.53px;
  }

  .page-game .pm-article-title {
    color: #fff;
    text-align: right;
    font-family: 'MosesText_Inter', 'Rubik', Arial, sans-serif;
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 0.48px;
    word-wrap: break-word;
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
  }

  .page-game .pm-article-subtitle {
    color: #fff;
    text-align: right;
    font-family: 'MosesText_Inter', 'Rubik', Arial, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    word-wrap: break-word;
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
  }

  .page-game .pm-article-title .blacked-word {
    min-width: 1.15em;
    padding: 0 2px;
    margin-block: 1px;
    border-radius: 0;
  }

  .page-game .pm-article-subtitle .blacked-word {
    min-width: 0.95em;
    padding: 0 2px;
    margin-block: 1px;
    border-radius: 0;
  }
}

/* Desktop-wide scale ramp: grow the entire phone mockup continuously from 1280 to 1920.
   1280px -> 0.78 scale, 1920px -> 1.12 scale (intentionally much larger than Figma target at 1920). */
@media (min-width: 1280px) and (min-height: 700px) {
  .page-game {
    --game-phone-scale: clamp(0.78,
      calc(0.78 + ((100vw - 1280px) * (0.34 / 640))),
      1.12);
  }
}

/* Hard wide-screen boost: on real 1920+ desktop widths force a visibly larger phone. */
@media (min-width: 1920px) and (min-height: 900px) {
  .page-game {
    --game-phone-scale: 1.15;
  }

  .page-game .phone-mockup {
    transform: scale(var(--game-phone-scale)) !important;
    transform-origin: top left;
  }
}

/* Desktop word-bank upgrade from Figma node 2815:13645.
   Interpolates from the 1280 baseline to the 1600+ wide-desktop geometry. */
@media (min-width: 1280px) and (min-height: 700px) {
  .page-game {
    --game-wordbank-width: clamp(525px, calc(525px + ((100vw - 1280px) * 1.390625)), 970px);
    --game-wordbank-height: clamp(442px, calc(442px + ((100vw - 1280px) * 0.93125)), 740px);
    --game-wordbank-gutters: clamp(0px, calc(51px - ((100vw - 1280px) * 0.159375)), 51px);
    --game-wordbank-margin-left: clamp(0px, calc(12px - ((100vw - 1280px) * 0.0375)), 12px);
    --game-wordbank-margin-right: clamp(0px, calc(39px - ((100vw - 1280px) * 0.121875)), 39px);
    --game-wordbank-row-gap: clamp(15px, calc(15px + ((100vw - 1280px) * 0.025)), 23px);
    --game-wordbank-column-gap: clamp(0px, calc((100vw - 1280px) * 0.38125), 122px);
    --game-wordbank-font-size: clamp(16px, calc(16px + ((100vw - 1280px) * 0.028125)), 25px);
    --game-wordbank-line-height: clamp(24px, calc(24px + ((100vw - 1280px) * 0.040625)), 37px);
    --game-wordbank-pad-top: clamp(17px, calc(17px + ((100vw - 1280px) * 0.025)), 25px);
    --game-wordbank-pad-right: clamp(20px, calc(20px + ((100vw - 1280px) * 0.44375)), 162px);
    --game-wordbank-pad-left: clamp(17px, calc(17px + ((100vw - 1280px) * 0.228125)), 90px);
    --game-wordbank-scrollbar-width: clamp(23px, calc(23px + ((100vw - 1280px) * 0.03901875)), 35.486px);
    --game-wordbank-scrollbar-height: clamp(415px, calc(415px + ((100vw - 1280px) * 0.87625)), 695.4px);
    --game-wordbank-scrollbar-top: clamp(12px, calc(12px + ((100vw - 1280px) * 0.03125)), 22px);
    --game-wordbank-track-left: clamp(3px, calc(3px + ((100vw - 1280px) * 0.005090625)), 4.629px);
    --game-wordbank-track-width: clamp(17px, calc(17px + ((100vw - 1280px) * 0.028840625)), 26.229px);
    --game-wordbank-thumb-min-height: clamp(107px, calc(107px + ((100vw - 1280px) * 0.225925)), 179.296px);
    --game-ctrl-bar-height: 132px;
    --game-ctrl-right-inset: var(--game-wordbank-margin-right);
    --game-ctrl-back-width: clamp(150px, calc(150px + ((100vw - 1280px) * 0.384375)), 273px);
    --game-ctrl-back-right: var(--game-ctrl-right-inset);
    --game-ctrl-back-left: calc(var(--game-wordbank-width) + var(--game-wordbank-gutters) - var(--game-ctrl-back-right) - var(--game-ctrl-back-width));
    --game-ctrl-back-top: clamp(27px, calc(52px - ((100vw - 1280px) * 0.078125)), 52px);
    --game-ctrl-back-height: clamp(52px, calc(52px + ((100vw - 1280px) * 0.040625)), 65px);
    --game-ctrl-back-font-size: clamp(13.676px, calc(13.676px + ((100vw - 1280px) * 0.0322625)), 24px);
    --game-ctrl-back-line-height: clamp(18.65px, calc(18.65px + ((100vw - 1280px) * 0.03546875)), 30px);
    --game-ctrl-hint-gap: clamp(30px, calc(33px - ((100vw - 1280px) * 0.009375)), 33px);
    --game-ctrl-hint-top: clamp(10px, calc(40px - ((100vw - 1280px) * 0.09375)), 40px);
    --game-ctrl-hint-width: clamp(70px, calc(70px + ((100vw - 1280px) * 0.05)), 86px);
    --game-ctrl-hint-height: clamp(66px, calc(66px + ((100vw - 1280px) * 0.05)), 82px);
    --game-ctrl-hint-scale: clamp(1, calc(var(--game-ctrl-hint-width) / 70px), 1.228571);
    --game-ctrl-hint-right: calc(var(--game-ctrl-back-right) + var(--game-ctrl-back-width) + var(--game-ctrl-hint-gap));
    --game-ctrl-hint-left: calc(var(--game-wordbank-width) + var(--game-wordbank-gutters) - var(--game-ctrl-hint-right) - var(--game-ctrl-hint-width));
    --game-ctrl-score-width: clamp(95.577px, calc(95.577px + ((100vw - 1280px) * 0.070072)), 118px);
    --game-ctrl-score-height: clamp(49.154px, calc(49.154px + ((100vw - 1280px) * 0.04866875)), 64.728px);
    --game-ctrl-score-top: clamp(27px, calc(54px - ((100vw - 1280px) * 0.084375)), 54px);
    --game-ctrl-score-wrong-left: clamp(155px, calc(162.58px - ((100vw - 1280px) * 0.0236875)), 162.58px);
    --game-ctrl-score-correct-left: clamp(0px, calc(19px - ((100vw - 1280px) * 0.059375)), 19px);
    --game-ctrl-score-border: clamp(3px, calc(3px + ((100vw - 1280px) * 0.0022)), 3.704px);
    --game-ctrl-score-gap: clamp(10px, calc(10px + ((100vw - 1280px) * 0.015625)), 15px);
    --game-ctrl-score-pad-y: clamp(6px, calc(6px + ((100vw - 1280px) * 0.0125)), 10px);
    --game-ctrl-score-pad-x: clamp(10px, calc(10px + ((100vw - 1280px) * 0.015625)), 15px);
    --game-ctrl-score-font: clamp(44px, calc(44px + ((100vw - 1280px) * 0.03125)), 54px);
    --game-ctrl-wrong-icon-w: clamp(24px, calc(24px + ((100vw - 1280px) * 0.0253125)), 32.1px);
    --game-ctrl-correct-icon-w: clamp(24px, calc(24px + ((100vw - 1280px) * 0.02916875)), 33.334px);
    --game-ctrl-score-icon-h: clamp(28px, calc(28px + ((100vw - 1280px) * 0.0318375)), 38.188px);
    --game-wordbank-fit-height: min(
      var(--game-wordbank-height),
      calc(var(--game-panel-height) - var(--game-ctrl-bar-height) - 4px)
    );
    --game-wordbank-scrollbar-fit-height: max(
      280px,
      calc(var(--game-wordbank-fit-height) - (var(--game-wordbank-scrollbar-top) * 2))
    );
  }

  .game-panel {
    width: calc(var(--game-wordbank-width) + var(--game-wordbank-gutters));
  }

  .controls-bar {
    position: relative;
    display: block;
    min-height: var(--game-ctrl-bar-height);
    height: var(--game-ctrl-bar-height);
    padding: 0;
  }

  .controls-bar .pixel-back-btn {
    position: absolute;
    left: auto;
    right: var(--game-ctrl-back-right);
    top: var(--game-ctrl-back-top);
    width: var(--game-ctrl-back-width);
    height: var(--game-ctrl-back-height);
    min-height: var(--game-ctrl-back-height);
  }

  .controls-bar .pixel-back-btn-text--desktop {
    inset: 24.62% 4.53% 29.23% 11.59%;
    font-family: 'MosesText_Inter', 'Rubik', Arial, sans-serif;
    font-size: var(--game-ctrl-back-font-size);
    line-height: var(--game-ctrl-back-line-height);
  }

  .controls-bar .hint-tile--desktop {
    position: absolute;
    left: auto;
    right: var(--game-ctrl-hint-right);
    top: var(--game-ctrl-hint-top);
    width: 70px;
    height: 66px;
    transform: scale(var(--game-ctrl-hint-scale));
    transform-origin: top right;
  }

  .controls-bar .score-tile {
    position: absolute;
    width: var(--game-ctrl-score-width);
    height: var(--game-ctrl-score-height);
    border-width: var(--game-ctrl-score-border);
    gap: var(--game-ctrl-score-gap);
    padding: var(--game-ctrl-score-pad-y) var(--game-ctrl-score-pad-x);
  }

  .controls-bar .score-tile--wrong {
    left: var(--game-ctrl-score-wrong-left);
    top: var(--game-ctrl-score-top);
  }

  .controls-bar .score-tile--correct {
    left: var(--game-ctrl-score-correct-left);
    top: var(--game-ctrl-score-top);
  }

  .controls-bar .score-value {
    font-size: var(--game-ctrl-score-font);
  }

  .controls-bar .score-tile--wrong .score-icon {
    width: var(--game-ctrl-wrong-icon-w);
    height: var(--game-ctrl-score-icon-h);
  }

  .controls-bar .score-tile--correct .score-icon {
    width: var(--game-ctrl-correct-icon-w);
    height: var(--game-ctrl-score-icon-h);
  }

  .word-bank-area {
    width: var(--game-wordbank-width);
    height: var(--game-wordbank-fit-height);
    min-height: var(--game-wordbank-fit-height);
    max-height: var(--game-wordbank-fit-height);
    margin-left: var(--game-wordbank-margin-left);
    margin-right: var(--game-wordbank-margin-right);
  }

  .word-bank {
    grid-template-columns: minmax(108px, 184.43px) minmax(82px, 138.86px) minmax(88px, 149.66px);
    justify-content: start;
    row-gap: var(--game-wordbank-row-gap);
    column-gap: var(--game-wordbank-column-gap);
    padding: var(--game-wordbank-pad-top) var(--game-wordbank-pad-right) var(--game-wordbank-pad-top) var(--game-wordbank-pad-left);
  }

  .word-btn {
    font-size: var(--game-wordbank-font-size);
    line-height: var(--game-wordbank-line-height);
    padding: 0;
  }

  .word-bank-scrollbar {
    top: var(--game-wordbank-scrollbar-top);
    right: 7px;
    width: var(--game-wordbank-scrollbar-width);
    height: var(--game-wordbank-scrollbar-fit-height);
    --deco-scrollbar-track-left: var(--game-wordbank-track-left);
    --deco-scrollbar-track-width: var(--game-wordbank-track-width);
    --deco-scrollbar-thumb-width: var(--game-wordbank-scrollbar-width);
    --deco-scrollbar-thumb-min-height: var(--game-wordbank-thumb-min-height);
  }

  .word-bank-scrollbar .deco-scrollbar-track,
  .word-bank-scrollbar .deco-scrollbar-track::before,
  .word-bank-scrollbar .deco-scrollbar-thumb {
    border-radius: 0;
  }

  .word-bank-scrollbar .deco-scrollbar-thumb {
    background: #e6e7e8;
    border: 1px solid #121212;
    box-shadow: none;
  }
}

.page-game:not(.page-game--horizontal-word-bank) .word-bank-scrollbar .deco-scrollbar-thumb::before {
  display: block;
}

.page-game:not(.page-game--horizontal-word-bank) .word-bank-scrollbar .deco-scrollbar-grip-line {
  display: none !important;
}

/* Shared header contract: game page keeps the approved 1280 desktop offsets and scales inward from there. */
.page-game {
  --header-content-max-width: 100%;
  --header-content-inline-gutter: 16px;
  --header-left-pad: 22px;
  --header-right-pad: 21px;
}

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

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

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

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

@media (min-width: 768px) and (max-width: 999px) and (orientation: portrait) {
  .page-game {
    --pm-screen-left: 178.48px;
    --pm-screen-top: 28.46px;
    --pm-screen-width: 258.5px;
    --pm-screen-bottom: 514.27px;
    --pm-screen-height: calc(var(--pm-screen-bottom) - var(--pm-screen-top));
    --pm-panel-left: 190.49px;
    --pm-panel-width: 245.59px;
    --pm-title-left: 200.64px;
    --pm-title-width: 226.2px;
    --pm-subtitle-left: 195.1px;
    --pm-subtitle-width: 233.58px;
    --pm-upper-top: 83px;
    --pm-upper-title-top-gap: 6.9px;
    --pm-upper-title-bottom-gap: 7.66px;
    --pm-panels-gap: 8px;
    --pm-lower-bottom-inset: 7px;
    --pm-lower-bottom: calc(var(--pm-screen-bottom) - var(--pm-lower-bottom-inset));
    --pm-lower-min-height: 55px;
    --pm-lower-content-top-gap: 9px;
    --pm-lower-content-bottom-gap: 0px;
  }

  .page-game .pm-yediot-logo {
    inset: auto;
    left: calc(var(--pm-panel-left) - var(--pm-screen-left));
    top: 11px;
    width: var(--pm-panel-width);
    height: auto;
    aspect-ratio: 248 / 32;
    z-index: 6;
  }

  .page-game .pm-logo-rule {
    left: calc(var(--pm-panel-left) - var(--pm-screen-left));
    right: auto;
    width: var(--pm-panel-width);
    top: 45px;
    height: 2px;
    min-height: 2px;
    max-height: 2px;
    z-index: 6;
  }

  .page-game .pm-screen-shell {
    border-radius: 22px 22px 8px 8px;
  }

  .page-game .pm-article-title,
  .page-game .pm-article-subtitle {
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
  }

  .page-game .pm-screen-bg {
    width: 100%;
    height: 100%;
  }
}

@media (min-width: 744px) and (max-width: 767px) and (orientation: portrait) {
  .page-game .pm-yediot-logo {
    inset: auto;
    left: calc(var(--pm-panel-left) - var(--pm-screen-left));
    top: 11px;
    width: var(--pm-panel-width);
    height: auto;
    z-index: 6;
  }

  .page-game .pm-logo-rule {
    left: calc(var(--pm-panel-left) - var(--pm-screen-left));
    right: auto;
    width: var(--pm-panel-width);
    top: 45px;
    height: 2px;
    min-height: 2px;
    max-height: 2px;
    z-index: 6;
  }

  .page-game .pm-article-title {
    z-index: 5;
  }
}