/* עולם 1: המחברת של אמא — המראה המשחקי, המראה היחיד של האתר (מ־2026-10-26). נטען מעל style.css בכל העמודים.
   מפה של משחק פלטפורמה: שמיים בפסים, דשא, שביל חול, בלוקים, וקופסאות טקסט עם פינות פיקסל. */

:root {
  --sky-1: #5fbdf0;
  --sky-2: #86cff5;
  --sky-3: #b1e2f8;
  --grass: #6cc24a;
  --grass-2: #5bb03f;
  --grass-dark: #3d8a33;
  --sand: #f2c46d;
  --sand-2: #c9903c;
  --line: #20142e;
  --text: #20142e;
  --text-2: #5a4a6e;
  --box: #fff8ec;
  --box-2: #f7e6c0;
  --coin: #ffc93c;
  --coin-2: #e0961c;
  --leaf: #5cb84a;
  --brick: #b65a2c;
  --dirt: #6b3f22;
  --dirt-2: #57321a;
  --wood: #9a6a3a;
  --drop: rgba(32, 20, 46, 0.32);
  --page: #cdeefc;

  /* שמות ישנים, כדי שכל הרכיבים המשותפים יקבלו את העולם החדש */
  --ground: var(--page);
  --surface: var(--box);
  --dough: var(--box-2);
  --dough-2: #ead39e;
  --ink: var(--text);
  --ink-2: var(--text-2);
  --crust: var(--wood);
  --red: #e5392b;
  --red-ink: #b8231a;
  --red-deep: #8c1c12;
  --red-wash: #ffe3a3;
  --hair: rgba(32, 20, 46, 0.16);
  --hair-strong: var(--line);
  --tick: rgba(32, 20, 46, 0.25);
  --tick-red: rgba(229, 57, 43, 0.4);
  --clock: var(--coin);
  --gold: #b86e00;
  --gold-wash: #ffe9a8;
  --on-ink: #fff8ec;
  --shadow: 0 6px 0 0 var(--drop);

  /* מסגרת פיקסל: קו עבה מכל צד, פינות חתוכות, ובסיס כהה מתחת */
  --px: 3px;
  --frame: 0 calc(-1 * var(--px)) 0 0 var(--line), 0 var(--px) 0 0 var(--line), calc(-1 * var(--px)) 0 0 0 var(--line), var(--px) 0 0 0 var(--line);
  --frame-drop: var(--frame), 0 calc(var(--px) * 3) 0 0 var(--drop);
  --frame-press: var(--frame), 0 var(--px) 0 0 var(--drop);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --sky-1: #121842; --sky-2: #1a2152; --sky-3: #242c66;
    --grass: #2f6d3c; --grass-2: #285e34; --grass-dark: #1b4426;
    --sand: #b08c52; --sand-2: #7d6236;
    --line: #0a0716; --text: #f4eefc; --text-2: #c2b5da;
    --box: #2a2346; --box-2: #362d5a;
    --coin: #ffcf4a; --coin-2: #d9921a;
    --dirt: #3b2414; --dirt-2: #2c1a0e; --wood: #7a5230;
    --drop: rgba(0, 0, 0, 0.5);
    --page: #171b40;
    --dough-2: #4a3f73;
    --red: #ff5a45; --red-ink: #ff8f7d; --red-wash: #4d2a52;
    --hair: rgba(244, 238, 252, 0.14);
    --gold: #ffcf4a; --gold-wash: #4a3a17;
    --on-ink: #fff8ec;
  }
}
:root[data-theme='dark'] {
  --sky-1: #121842; --sky-2: #1a2152; --sky-3: #242c66;
  --grass: #2f6d3c; --grass-2: #285e34; --grass-dark: #1b4426;
  --sand: #b08c52; --sand-2: #7d6236;
  --line: #0a0716; --text: #f4eefc; --text-2: #c2b5da;
  --box: #2a2346; --box-2: #362d5a;
  --coin: #ffcf4a; --coin-2: #d9921a;
  --dirt: #3b2414; --dirt-2: #2c1a0e; --wood: #7a5230;
  --drop: rgba(0, 0, 0, 0.5);
  --page: #171b40;
  --dough-2: #4a3f73;
  --red: #ff5a45; --red-ink: #ff8f7d; --red-wash: #4d2a52;
  --hair: rgba(244, 238, 252, 0.14);
  --gold: #ffcf4a; --gold-wash: #4a3a17;
  --on-ink: #fff8ec;
}

/* ---------- בסיס ---------- */
.clean-only { display: none !important; }
::selection { background: var(--coin); color: var(--line); }
:focus-visible { outline: 3px solid var(--coin); outline-offset: 4px; border-radius: 0; box-shadow: 0 0 0 7px var(--line); }
* { scrollbar-color: var(--wood) transparent; }
.spr { display: block; image-rendering: pixelated; }
h1, h2, h3 { letter-spacing: 0; }

/* כפתור אייקון: בלוק פיקסלים קטן */
.icon-btn {
  border: 0; border-radius: 0;
  background: var(--box); color: var(--text);
  box-shadow: var(--frame-drop);
  transition: transform 90ms, box-shadow 90ms, background-color 160ms;
}
.icon-btn:hover { background: var(--box-2); }
.icon-btn:active { transform: translateY(6px); box-shadow: var(--frame-press); }
.icon-btn[aria-pressed='true'] { color: var(--red); background: var(--box); }
.icon-btn .i { stroke-width: 2.4; stroke-linecap: square; stroke-linejoin: miter; }

/* כפתור ראשי: הכפתור האדום של הקונסולה */
.primary {
  border-radius: 0;
  background: var(--red); color: #fff8ec;
  font-family: var(--f-display); font-weight: 900; font-size: 1.3rem;
  box-shadow: var(--frame), 0 9px 0 0 var(--red-deep);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
  transition: transform 90ms, box-shadow 90ms;
}
.primary:active { transform: translateY(6px); box-shadow: var(--frame), 0 3px 0 0 var(--red-deep); }
.chip {
  border: 0; border-radius: 0; height: 40px;
  background: var(--box); color: var(--text);
  box-shadow: var(--frame-drop);
  transition: transform 90ms, box-shadow 90ms, background-color 160ms;
}
.chip:hover { background: var(--box-2); }
.chip:active { transform: translateY(6px); box-shadow: var(--frame-press); }
.chip .i { color: var(--red); stroke-width: 2.4; }

/* ---------- סרגל הסטטוס: שורת הודעות של משחק ---------- */
.status { background: var(--line); color: #fff8ec; font-weight: 600; }
.status .i { color: var(--coin); }
.status__clock { color: var(--coin); }

/* ---------- עמוד הבית: שמיים ---------- */
.page-home { background: var(--grass); }
.skybox { position: relative; overflow: hidden; isolation: isolate; }
.sky { position: absolute; inset: 0; z-index: -1; background: linear-gradient(var(--s1) 0 38%, var(--s2) 38% 66%, var(--s3) 66%); --s1: var(--sky-1); --s2: var(--sky-2); --s3: var(--sky-3); }
:root[data-sky='dawn'] .sky { --s1: #8f8fd9; --s2: #f4a7b9; --s3: #ffd6a0; }
:root[data-sky='dusk'] .sky { --s1: #4e3f8f; --s2: #d9667a; --s3: #f6a85c; }
:root[data-sky='night'] .sky { --s1: #0f1438; --s2: #171e4c; --s3: #212a62; }
.sky__orb { position: absolute; left: var(--orb-x, 70%); top: var(--orb-y, 20%); translate: -50% -50%; transition: left 2s, top 2s; }
.sky__moon, :root[data-sky='night'] .sky__sun { display: none; }
:root[data-sky='night'] .sky__moon { display: block; }
.sky__cloud { position: absolute; opacity: 0.95; animation: drift 90s linear infinite; }
.sky__cloud.c1 { top: 18%; animation-duration: 110s; animation-delay: -30s; }
.sky__cloud.c2 { top: 46%; animation-duration: 80s; animation-delay: -60s; opacity: 0.8; }
.sky__cloud.c3 { top: 8%; animation-duration: 140s; animation-delay: -95s; }
@keyframes drift { from { transform: translateX(110vw); } to { transform: translateX(-30vw); } }
:root[data-sky='night'] .sky__cloud { opacity: 0.18; }
.sky__stars { position: absolute; top: 0; left: 0; width: 3px; height: 3px; background: #fff8ec; display: none;
  box-shadow: 12vw 22px #fff8ec, 23vw 70px #fff8ec, 34vw 34px #fff8ec, 46vw 90px #ffe9a8, 58vw 18px #fff8ec, 66vw 64px #fff8ec, 77vw 40px #ffe9a8, 88vw 84px #fff8ec, 94vw 26px #fff8ec, 6vw 110px #fff8ec, 52vw 140px #fff8ec, 81vw 150px #fff8ec, 30vw 160px #ffe9a8, 70vw 120px #fff8ec; }
:root[data-sky='night'] .sky__stars { display: block; animation: twinkle 2.4s steps(2) infinite; }
@keyframes twinkle { 50% { opacity: 0.55; } }

/* HUD */
.page-home .top { position: relative; padding-block: 14px; }
.trophy {
  height: 44px; border: 0; border-radius: 0;
  background: var(--box); color: var(--text);
  box-shadow: var(--frame-drop);
  font-size: 1.05rem; gap: 8px; padding-inline: 10px 12px;
}
.trophy:hover { background: var(--box-2); }
.trophy .spr { width: 24px; height: 24px; }
.hud-cookies { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding-inline: 10px 12px; background: var(--box); color: var(--text); box-shadow: var(--frame-drop); font-weight: 700; font-size: 1.05rem; margin-inline-start: 10px; }

/* הלוגו */
.page-home .masthead { position: relative; padding-block: 14px 0; text-align: center; }
.page-home .masthead h1 {
  font-size: clamp(3rem, 14vw, 6rem); font-weight: 900; line-height: 0.98;
  color: var(--coin);
  -webkit-text-stroke: 0.16em var(--line); paint-order: stroke fill;
  text-shadow: 0 0.09em 0 var(--line);
}
.page-home .masthead h1 span + span { color: #fff8ec; font-size: 0.78em; margin-top: 0.06em; }
.world {
  margin: 18px auto 0; width: fit-content;
  padding: 6px 14px; background: #c9302a; color: #fff8ec;
  font-weight: 700; font-size: 1rem; box-shadow: var(--frame-drop);
}

/* גבעות מדורגות בין השמיים לדשא */
.hills { position: relative; height: 64px; margin-top: 18px; }
.hills::before, .hills::after { content: ''; position: absolute; inset-inline: 0; bottom: 0; }
.hills::before {
  height: 64px; background: var(--grass-dark);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 64' shape-rendering='crispEdges'%3E%3Cpath d='M0 64V40h8v-8h8v-8h16v-8h24v8h16v8h8v8h8v8h24v-8h8v-8h16v-8h8v-8h24v8h8v8h16v8h8v8h16v24z'/%3E%3C/svg%3E") repeat-x bottom / 240px 64px;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 64' shape-rendering='crispEdges'%3E%3Cpath d='M0 64V40h8v-8h8v-8h16v-8h24v8h16v8h8v8h8v8h24v-8h8v-8h16v-8h8v-8h24v8h8v8h16v8h8v8h16v24z'/%3E%3C/svg%3E") repeat-x bottom / 240px 64px;
}
.hills::after {
  height: 28px; background: var(--grass);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 28' shape-rendering='crispEdges'%3E%3Cpath d='M0 28V12h4V8h8V4h12v4h8v4h8V8h8V4h8v4h4v4h4v16z'/%3E%3C/svg%3E") repeat-x bottom / 64px 28px;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 28' shape-rendering='crispEdges'%3E%3Cpath d='M0 28V12h4V8h8V4h12v4h8v4h8V8h8V4h8v4h4v4h4v16z'/%3E%3C/svg%3E") repeat-x bottom / 64px 28px;
}

/* ---------- המפה ---------- */
.page-home main {
  padding-top: 56px; /* הרווח שהשאירה רשת המתכונים הריקה של המראה הנקי (עד 2026-10-26), כדי שהמפה תישאר באותו מקום */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' fill-opacity='.09' d='M10 20h3v-3h3v3h3v3H10zM60 12h3V9h3v3h3v3h-9zM38 52h3v-3h3v3h3v3h-9zM78 66h3v-3h3v3h3v3h-9zM16 80h3v-3h3v3h3v3h-9z'/%3E%3C/svg%3E");
  background-size: 96px 96px;
}
.map {
  position: relative;
  display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
  grid-auto-rows: minmax(176px, auto);
  padding-block: 18px 30px;
}
.map__path { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.map__path path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.map__road-edge { stroke: var(--sand-2); stroke-width: 34; }
.map__road { stroke: var(--sand); stroke-width: 24; }
.map__road-dash { stroke: var(--sand-2); stroke-width: 4; stroke-dasharray: 4 18; opacity: 0.55; stroke-linecap: square; }
.cell { position: relative; z-index: 1; display: grid; justify-items: center; align-content: center; gap: 6px; padding: 10px 4px; }

/* שלב */
.lvl__pad {
  position: relative; display: grid; place-items: center;
  width: 108px; height: 108px; border-radius: 50%;
  background: var(--box-2); border: 4px solid var(--line);
  box-shadow: 0 8px 0 0 var(--drop), inset 0 -10px 0 0 rgba(32, 20, 46, 0.12);
  text-decoration: none;
  transition: transform 140ms var(--ease);
}
.lvl__pad:hover { transform: translateY(-4px); }
.lvl__pad:active { transform: translateY(3px); }
.lvl__spr { display: block; }
.lvl__spr .spr { width: 72px; height: 72px; }
.lvl__photo { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.lvl.is-clear .lvl__pad { background: var(--coin); }
.lvl__n {
  position: absolute; top: -8px; inset-inline-start: -8px;
  min-width: 34px; height: 34px; display: grid; place-items: center; padding-inline: 4px;
  background: var(--coin); color: var(--line);
  font-family: var(--f-display); font-weight: 900; font-size: 1.15rem; line-height: 1;
  box-shadow: var(--frame);
}
.lvl.is-clear .lvl__n { background: var(--leaf); color: #fff8ec; }
.lvl__name {
  margin-top: 10px; max-width: 100%;
  padding: 5px 10px 6px; background: var(--box); color: var(--text);
  font-family: var(--f-display); font-weight: 700; font-size: 1.02rem; line-height: 1.15; text-align: center;
  box-shadow: var(--frame-drop);
  text-wrap: balance;
}
.lvl__flag { position: absolute; top: 4px; inset-inline-end: calc(50% - 78px); display: flex; align-items: end; gap: 2px; }
.lvl__flag b { font-family: var(--f-display); font-weight: 900; font-size: 0.95rem; color: #fff8ec; -webkit-text-stroke: 4px var(--line); paint-order: stroke fill; }
.lvl__fav {
  position: absolute; top: 88px; inset-inline-end: calc(50% - 74px);
  width: 40px; height: 40px; padding: 0; border: 0; background: none;
  display: grid; place-items: center;
}
.lvl__fav .spr { width: 24px; height: 22px; filter: grayscale(1) brightness(1.4); opacity: 0.7; transition: filter 200ms, opacity 200ms; }
.lvl__fav[aria-pressed='true'] .spr { filter: none; opacity: 1; }
.lvl__fav.is-pop .spr { animation: pop 380ms var(--ease); }
@keyframes pop { 40% { transform: scale(1.5); } }
.lvl__week {
  order: 9; position: relative; z-index: 2; margin-top: 4px;
  padding: 3px 10px; background: #c9302a; color: #fff8ec; font-weight: 700; font-size: 0.82rem;
  box-shadow: var(--frame); animation: bob-s 900ms steps(2) infinite;
}
@keyframes bob-s { 50% { transform: translateY(-4px); } }
.lvl.is-week .lvl__pad { outline: 4px dashed var(--coin); outline-offset: 6px; }

/* במסך רחב השלבים עולים ויורדים, והשביל מתפתל ביניהם */
@media (min-width: 720px) {
  .map { grid-auto-rows: minmax(210px, auto); }
  .lvl { align-content: start; padding-top: 6px; }
  .lvl.is-low { padding-top: 62px; }
  .lvl.is-low .lvl__flag { top: 60px; }
  .lvl.is-low .lvl__fav { top: 144px; }
  .lvl:not(.is-low) .lvl__fav { top: 84px; }
}

/* חפצים */
.prop { border: 0; background: none; padding: 10px 4px; color: inherit; text-decoration: none; cursor: pointer; }
span.prop { cursor: default; }
/* במסך רחב החפצים יושבים באותה שורה כמו השלבים, אז הם יורדים אל מתחת לשביל */
@media (min-width: 720px) { .prop { align-content: end; padding-bottom: 6px; } }
.prop .spr { filter: drop-shadow(0 5px 0 var(--drop)); transition: transform 140ms var(--ease); }
.prop__figs { display: flex; align-items: end; justify-content: center; gap: 2px; line-height: 0; }
.prop:hover .spr { transform: translateY(-3px); }
.prop__sign {
  padding: 3px 9px 4px; background: #8a5c30; color: #fff8ec;
  font-weight: 700; font-size: 0.82rem; line-height: 1.2; text-align: center;
  box-shadow: var(--frame);
}
.prop--block .spr { filter: drop-shadow(0 5px 0 var(--drop)); }
/* המכה עצמה (קפיצה, והחלפה לבלוק משומש בשיא) ב־js/map.js bumpBlock: WAAPI, שגובר על אנימציית הרמז */
@keyframes bump { 50% { transform: translateY(-12px); } }
.prop--block:not(.is-used) .spr { animation: hint 2.6s steps(1) infinite; }
@keyframes hint { 0%, 88% { transform: none; } 92% { transform: translateY(-4px); } 96% { transform: none; } }
.prop.is-wiggle .spr { animation: wiggle 420ms steps(4); }
@keyframes wiggle { 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
/* הדמות נכנסת לצינור (js/map.js warpPipe): הצינור "בולע" אותה, מתכווץ קצת ומתנפח בחזרה */
.prop--pipe .spr { transform-origin: 50% 100%; }
.prop--pipe.is-gulp .spr { animation: gulp 420ms steps(4); }
/* רק לרוחב: הפתח נשאר במקום, כדי שקו החיתוך של הדמות יישאר על השפה */
@keyframes gulp { 30% { transform: scaleX(1.12); } 65% { transform: scaleX(0.95); } }
.prop--pipe .prop__sign { font-size: 0.78rem; background: var(--line); }
.coin-pop { position: absolute; z-index: 2; top: 0; left: 50%; translate: -50% 0; pointer-events: none; animation: coin-jump 600ms forwards; }
/* עולה מהר מהבלוק, נעצר בשיא, ונופל קצת בחזרה כשהוא נעלם. שם משלו: coin-up של מונה המטבעות (למטה) דרס אותו */
@keyframes coin-jump {
  0% { transform: translateY(0); animation-timing-function: cubic-bezier(0.2, 0.9, 0.4, 1); }
  45% { transform: translateY(calc(-1 * var(--rise, 50px))); opacity: 1; animation-timing-function: ease-in; }
  100% { transform: translateY(calc(-0.6 * var(--rise, 50px))); opacity: 0; }
}
.coin-pop .spr { animation: spin 300ms steps(4) infinite; }
@keyframes spin { 50% { transform: scaleX(0.2); } }

/* בניין המשחקים בסוף השביל (SC.building ב־js/sprites.js). התא נשאר .castle (השם בקוד לא השתנה).
   למטה מקום למדרכה: השביל מגיע מהצד ונגמר בדלת המסתובבת (js/map.js drawPath) */
.castle { padding-top: 34px; padding-bottom: 38px; }
.castle__btn { position: relative; display: grid; justify-items: center; border: 0; background: none; padding: 0; color: inherit; text-decoration: none; cursor: pointer; }
@keyframes shake { 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
/* בלי transform או filter על .bld: הדלת צריכה לעלות מעל הדמות (z-index במפה עצמה) */
.bld { position: relative; display: block; width: var(--bld-w); height: var(--bld-h); line-height: 0; }
.bld > .spr--office { display: block; filter: drop-shadow(0 6px 0 var(--drop)); }
/* החלונות: דולקים ביום רק חלק, בערב ובלילה כמעט כולם. אחד או שניים מהבהבים כמו נורה שעומדת להישרף */
.bw rect { fill: #ffe08a; }
.bw .bw__t { fill: #f4b746; }
.bw { opacity: 0; }
.bw.is-on, :root[data-sky='night'] .bw.is-eve, :root[data-sky='dusk'] .bw.is-eve { opacity: 1; }
.bw.is-fl { animation: bw-fl 5.2s steps(1) infinite; }
.bw.is-fl + .bw.is-fl, .bw.is-fl ~ .bw.is-fl { animation-duration: 3.7s; animation-delay: -1.3s; }
@keyframes bw-fl { 0%, 60%, 63%, 67%, 100% { opacity: 1; } 61%, 65%, 68% { opacity: 0.12; } }
/* השלט מעל הלובי: אותיות מוארות על פס כהה */
.bld__sign {
  position: absolute; display: grid; place-items: center; padding: 0; background: none; box-shadow: none;
  color: #ffd76e; font-size: 0.66rem; font-weight: 900; line-height: 1; white-space: nowrap; letter-spacing: 0.02em;
}
/* הדלת המסתובבת מעל הלובי: מאחורי הדמות, ורק כשהיא נכנסת (is-front) מעליה. רואים ציור אחד מתוך ארבעה (SC.turnDoor) */
.rdoor { position: absolute; z-index: 2; line-height: 0; pointer-events: none; }
/* אותה דלת מעל הדמות (z 4 מול 3): שקופה, ומופיעה בהדרגה כשהדמות נכנסת (js/map.js enterDoor) */
.rdoor--over { z-index: 4; opacity: 0; }
.rd > g { display: none; }
.rd[data-f='0'] > g[data-f='0'], .rd[data-f='1'] > g[data-f='1'], .rd[data-f='2'] > g[data-f='2'], .rd[data-f='3'] > g[data-f='3'] { display: inline; }
/* נכנסים: הסימן של מפת האוצר (z-index 5) לא מרים את כל התא מעל הדמות */
.castle.is-entering, .castle.is-entering .castle__btn { z-index: auto; }
/* בלילה החזית כהה יותר, והלובי והחלונות זורחים */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .spr--office [data-c='1'] { fill: #c95f1c; }
  :root:not([data-theme='light']) .spr--office [data-c='2'] { fill: #923f0c; }
  :root:not([data-theme='light']) .spr--office [data-c='3'] { fill: #df7f35; }
  :root:not([data-theme='light']) .spr--office [data-c='4'] { fill: #e8a965; }
  :root:not([data-theme='light']) .spr--office [data-c='5'] { fill: #18213c; }
  :root:not([data-theme='light']) .spr--office [data-c='6'] { fill: #34507c; }
  :root:not([data-theme='light']) .spr--office [data-c='8'] { fill: #f6cf7d; }
  :root:not([data-theme='light']) .spr--office [data-c='0'] { fill: #fff0c4; }
  :root:not([data-theme='light']) .spr--office [data-c='I'] { fill: #9c8459; }
  :root:not([data-theme='light']) .spr--office [data-c='L'] { fill: #c2a571; }
}
:root[data-theme='dark'] .spr--office [data-c='1'] { fill: #c95f1c; }
:root[data-theme='dark'] .spr--office [data-c='2'] { fill: #923f0c; }
:root[data-theme='dark'] .spr--office [data-c='3'] { fill: #df7f35; }
:root[data-theme='dark'] .spr--office [data-c='4'] { fill: #e8a965; }
:root[data-theme='dark'] .spr--office [data-c='5'] { fill: #18213c; }
:root[data-theme='dark'] .spr--office [data-c='6'] { fill: #34507c; }
:root[data-theme='dark'] .spr--office [data-c='8'] { fill: #f6cf7d; }
:root[data-theme='dark'] .spr--office [data-c='0'] { fill: #fff0c4; }
:root[data-theme='dark'] .spr--office [data-c='I'] { fill: #9c8459; }
:root[data-theme='dark'] .spr--office [data-c='L'] { fill: #c2a571; }
@media (prefers-reduced-motion: reduce) { .bw.is-fl { animation: none; } }
/* תנועה מופחתת: במקום הדלת המסתובבת, הדף דועך מהר (js/map.js, js/castle.js) */
body.is-leaving { opacity: 0; }
.page-home, .page-arcade { transition: opacity 180ms; }
/* הדעיכה הזאת היא בדיוק מה שמחליף את התנועה, אז היא לא נכללת באיפוס הכללי של תנועה מופחתת (style.css: 1ms לכל מעבר) */
@media (prefers-reduced-motion: reduce) { body.page-home, body.page-arcade { transition: opacity 180ms !important; } }

/* העוגייה */
.hero-cookie {
  position: absolute; z-index: 3; left: 0; top: 0; margin: -96px 0 0 -23px;
  width: 46px; height: 52px; padding: 0; border: 0; background: none;
  transform: translate(-200px, -200px);
}
.hero-cookie .spr { width: 46px; height: 52px; filter: drop-shadow(0 4px 0 var(--drop)); }
/* כל הגיבור קופץ יחד (הדמות והתחפושת), כדי שהכובע לא יזוז על הראש */
.hero-cookie { animation: hero-idle 1.1s steps(2) infinite; }
@keyframes hero-idle { 50% { translate: 0 -3px; } }
@keyframes idle { 50% { transform: translateY(-3px); } }
.hero-cookie.is-flip .spr { scale: -1 1; }
.hero-cookie.is-walking, .hero-cookie.is-warp, .hero-cookie.is-dancing { animation: none; }
/* הריקוד (js/chars.js heroDance): כובע ומשקפיים לא יכולים לעקוב אחרי הפריימים, אז הם יורדים עד שהריקוד נגמר */
.hero-cookie.is-dancing > .dress, .hero-cookie.is-dancing > .hero-kip { visibility: hidden; }
/* רוקדים מעל המספר והדגל של השלב (ידיים ורגליים יוצאות מהקופסה), ומתחת לבועת הדיבור. במצב דיסקו הסיבוב עוצר בזמן הריקוד */
.hero-cookie.is-dancing { z-index: 4; }
body.is-disco .hero-cookie.is-dancing .spr { animation: none; }
.hero-cookie.is-jump { animation: jump-c 380ms var(--ease); }
@keyframes jump-c { 45% { translate: 0 -26px; rotate: -10deg; } }
@keyframes jump { 45% { transform: translateY(-26px) rotate(-10deg); } }
.hero-cookie.is-dive { animation: dive-c 220ms steps(4) forwards; }
@keyframes dive-c { to { translate: 0 30px; scale: 0.5; opacity: 0; } }
@keyframes dive { to { transform: translateY(30px) scale(0.5); opacity: 0; } }

/* בועת דיבור */
.bubble {
  position: absolute; z-index: 5; left: var(--x, 50%);
  width: max-content; max-width: min(280px, calc(100% - 16px));
  padding: 10px 14px; background: var(--box); color: var(--text);
  font-weight: 700; font-size: 1rem; line-height: 1.35; text-align: center;
  box-shadow: var(--frame-drop);
  transform: translate(-50%, -100%) scale(0.6); opacity: 0; pointer-events: none;
  transition: transform 180ms var(--ease), opacity 120ms;
}
.bubble.is-on { transform: translate(-50%, calc(-100% - 14px)); opacity: 1; }
.bubble::after {
  content: ''; position: absolute; bottom: -12px; left: calc(50% + var(--tail, 0px) - 6px);
  width: 12px; height: 9px; background: var(--box);
  box-shadow: -3px 0 0 0 var(--line), 3px 0 0 0 var(--line), 0 3px 0 0 var(--line);
}
.spark { position: absolute; z-index: 4; pointer-events: none; translate: -50% -50%; animation: spark 520ms steps(5) forwards; }
@keyframes spark { to { transform: translate(var(--dx), var(--dy)); opacity: 0; } }

/* ---------- תחתית: מתחת לאדמה ---------- */
.foot {
  width: 100%; margin: 0;
  padding: 28px max(var(--gutter), calc((100% - 1120px) / 2)) calc(36px + env(safe-area-inset-bottom));
  border-top: 10px solid var(--grass-dark);
  background: var(--dirt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 24' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' fill-opacity='.18' d='M0 0h48v2H0zM0 12h48v2H0zM10 2h2v10h-2zM34 14h2v10h-2z'/%3E%3C/svg%3E");
  background-size: 48px 24px;
  color: #f2ddc0;
}
.foot__credit { color: var(--coin); font-weight: 900; font-size: 1.3rem; }
.foot__links a, .foot__links button { color: #f2ddc0; text-decoration-color: rgba(242, 221, 192, 0.4); }
.foot__links a:hover, .foot__links button:hover { color: #fff8ec; }

/* ---------- עמוד מתכון: שלב ---------- */
.page-recipe, .page-ach { background: var(--page); }
.rbar { background: var(--page); }
.rbar.is-stuck { border-bottom: 0; box-shadow: 0 3px 0 0 var(--line); background: var(--box); }
.rbar__in { gap: 12px; height: 66px; }
.rbar__title { font-weight: 900; }

.hero { border-radius: 0; box-shadow: var(--frame-drop); overflow: visible; }
.hero img { width: 100%; height: 100%; object-fit: cover; }
.hero .ph {
  overflow: hidden;
  background: linear-gradient(var(--sky-1) 0 34%, var(--sky-2) 34% 60%, var(--sky-3) 60% 76%, var(--grass) 76% 80%, var(--grass-dark) 80% 82%, var(--dirt) 82%);
}
.hero .ph .grad { display: none; }
.ph__spr { position: absolute; left: 50%; bottom: 17%; translate: -50% 0; }
.ph__spr .spr { width: clamp(120px, 42vw, 190px); height: auto; filter: drop-shadow(0 8px 0 var(--drop)); animation: idle 1.4s steps(2) infinite; }
.ph__cloud { position: absolute; top: 12%; opacity: 0.9; animation: drift 70s linear infinite; }

.r-head h1 { color: #fff8ec; -webkit-text-stroke: 0.15em var(--line); paint-order: stroke fill; text-shadow: 0 0.08em 0 var(--line); line-height: 1.12; }
.r-title { display: flex; align-items: center; gap: 14px; }
.r-lvl { flex: none; min-width: 48px; height: 48px; display: grid; place-items: center; background: var(--coin); color: var(--line); font-family: var(--f-display); font-weight: 900; font-size: 1.6rem; box-shadow: var(--frame-drop); }
.r-head p { color: var(--text-2); font-weight: 600; }

.facts { border: 0; gap: 14px; margin-bottom: 34px; }
.facts > div { background: var(--box); box-shadow: var(--frame-drop); padding: 9px 12px 10px; }
.facts > div + div { border: 0; }
.facts dt { color: var(--text-2); font-weight: 600; }

.sect-title h2 { font-weight: 900; font-size: 1.75rem; }
.sect-title small { font-weight: 600; }

/* מכפיל: ארבעה כפתורי כוח */
.cup__label b { color: var(--red-ink); }
.cup__scale { height: auto; border: 0; border-radius: 0; background: none; overflow: visible; }
.cup__scale::before, .cup__fill, .cup__edge, .cup__ticks { display: none; }
.cup__track { position: static; container-type: normal; }
.cup__opts { position: static; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding-bottom: 8px; }
.cup__opt {
  position: static; transform: none; height: 84px; border-radius: 0;
  display: grid; place-items: center; align-content: center; gap: 4px; padding: 6px 4px;
  background: var(--box); color: var(--text); font-family: var(--f-display); font-weight: 900; font-size: 1.25rem;
  box-shadow: var(--frame-drop); transition: transform 90ms, box-shadow 90ms, background-color 160ms;
}
.cup__opt:hover { color: var(--text); background: var(--box-2); }
.cup__pw { display: flex; justify-content: center; height: 26px; }
.cup__pw .spr { width: auto; height: 26px; margin-inline: -4px; }
.cup__opt:not([aria-checked='true']) .cup__pw { filter: saturate(0.55); }
.cup__opt[aria-checked='true'] .cup__pw { animation: idle 700ms steps(2) infinite; }
.cup__opt[aria-checked='true'] { background: var(--coin); color: var(--line); transform: translateY(6px); box-shadow: var(--frame-press); }

/* מצרכים: קופסת טקסט */
.ing { background: var(--box); box-shadow: var(--frame-drop); padding: 6px 16px 10px; margin-top: 10px; }
.ing__group { color: var(--red-ink); font-weight: 900; padding-top: 16px; }
.ing__row { border-bottom: 2px dashed var(--hair); }
.ing__row:last-child { border-bottom: 0; }
.mark { width: 22px; height: 22px; margin-top: 1px; border: 0; border-radius: 0; background: var(--box-2); box-shadow: inset 0 0 0 3px var(--line); }
.mark .i { width: 16px; height: 16px; color: var(--line); stroke-width: 3; stroke-linecap: square; stroke-linejoin: miter; }
.ing__row.is-done .mark, .check:has(input:checked) .mark { background: var(--coin); border-color: var(--line); }
.ing__row.is-done .ing__text { color: var(--text-2); text-decoration-color: var(--red); text-decoration-thickness: 3px; }
.is-scaled .amt { color: var(--red-ink); }
@keyframes flash { from { background: var(--coin); } to { background: transparent; } }

/* שלבים */
.srail { display: none; }
.steps-wrap { padding: 18px 16px 4px; background: var(--box); box-shadow: var(--frame-drop); }
.step__num {
  width: 40px; height: 40px; border: 0; border-radius: 0;
  background: var(--coin); color: var(--line); font-weight: 900; font-size: 1.2rem;
  box-shadow: var(--frame);
}
.step { grid-template-columns: 40px 1fr; padding-bottom: 24px; }
.step.is-done .step__num { background: var(--leaf); color: #fff8ec; box-shadow: var(--frame); }
.step.is-done .step__text { color: var(--text-2); }
.step__text { padding-top: 6px; }

/* הטיפ של אמא: דף מהמחברת, עם קו שוליים אדום */
.tip {
  position: relative; border-radius: 0;
  padding: 10px 14px 12px 14px; padding-inline-start: 26px;
  background: #fffdf6 repeating-linear-gradient(transparent 0 25px, #bcd3f0 25px 26px);
  color: #2b1b12; line-height: 26px;
  box-shadow: var(--frame-drop);
}
.tip::before { content: ''; position: absolute; inset-block: 0; inset-inline-start: 14px; width: 2px; background: #e5392b; opacity: 0.7; }
.tip b { color: #b8231a; font-weight: 900; line-height: 26px; }

/* אפיתי */
.baked { border-top: 0; padding-top: 40px; }
.baked__btn {
  height: 62px; padding-inline: 36px; border: 0; border-radius: 0;
  background: #3f9a35; color: #fff8ec;
  font-weight: 900; font-size: 1.6rem;
  box-shadow: var(--frame), 0 9px 0 0 #2b6b25;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
  transition: transform 90ms, box-shadow 90ms;
}
.baked__btn:hover { background: #3f9a35; color: #fff8ec; filter: brightness(1.06); }
.baked__btn:active { transform: translateY(6px); box-shadow: var(--frame), 0 3px 0 0 #2b6b25; }
.baked__count { font-weight: 600; }
.baked__count .grad i { width: 6px; height: 6px; border-radius: 0; background: var(--hair); }
.baked__count .grad i.on { background: var(--coin); box-shadow: 0 0 0 1.5px var(--line); }
.crumb { border-radius: 0 !important; }

/* שלב הושלם */
.clear {
  position: fixed; z-index: 95; left: 50%; top: 38%;
  translate: -50% -50%;
  padding: 18px 26px 20px; background: var(--line); color: var(--coin);
  font-family: var(--f-display); font-weight: 900; font-size: clamp(2.2rem, 10vw, 3.6rem); line-height: 1; white-space: nowrap;
  box-shadow: 0 -4px 0 0 var(--coin), 0 4px 0 0 var(--coin), -4px 0 0 0 var(--coin), 4px 0 0 0 var(--coin), 0 14px 0 0 var(--drop);
  pointer-events: none;
  animation: clear 1700ms var(--ease) forwards;
}
.clear small { display: block; margin-top: 8px; color: #fff8ec; font-family: var(--f-ui); font-size: 1.05rem; font-weight: 700; text-align: center; }
@keyframes clear { 0% { transform: scale(0.3) rotate(-6deg); opacity: 0; } 14% { transform: scale(1.12) rotate(2deg); opacity: 1; } 22% { transform: scale(1) rotate(-1deg); } 82% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-30px); } }

/* פס תחתון */
.bottom { background: var(--box); border-top: 0; box-shadow: 0 -3px 0 0 var(--line); padding-top: 14px; padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
.bottom .primary { height: 54px; }

/* ---------- טיימרים: מחסניות ---------- */
.timer { border-radius: 0; background: var(--line); color: #fff8ec; box-shadow: 0 -3px 0 0 var(--coin), 0 3px 0 0 var(--coin), -3px 0 0 0 var(--coin), 3px 0 0 0 var(--coin), 0 9px 0 0 var(--drop); }
.timer__fill { background: var(--coin); opacity: 0.3; }
.timer__time { color: var(--coin); }
.timer__btn { border-radius: 0; background: rgba(255, 248, 236, 0.12); }
.timer.is-done { background: var(--red); color: #fff8ec; animation: ring 700ms steps(2) infinite; }
.timer.is-done .timer__time { color: #fff8ec; }

/* ---------- מצב מטבח: קריא מרחוק, עם נורת התקדמות ---------- */
.kitchen { background: var(--box); }
.kitchen__top { background: var(--line); color: #fff8ec; padding-block: 12px; }
.kitchen__wake { color: var(--coin); }
.krail { display: none; }
.kchase { position: absolute; z-index: 2; top: 62px; inset-inline: var(--gutter); display: flex; gap: 6px; padding-top: 12px; }
.kchase i {
  flex: 1; height: 30px; display: grid; place-items: center;
  background: var(--box-2); color: var(--text-2); box-shadow: 0 0 0 3px var(--line);
  font-style: normal; font-family: var(--f-display); font-weight: 900; font-size: 0.95rem;
  transition: background-color 200ms;
}
.kchase i.is-done { background: var(--leaf); color: #fff8ec; }
.kchase i.is-now { background: var(--coin); color: var(--line); animation: chase 640ms steps(2) infinite; }
@keyframes chase { 50% { background: var(--red); color: #fff8ec; } }
.kchase .spr { width: 14px; height: auto; }
.kslide { padding-top: 128px; }
.kslide__n { color: var(--coin); -webkit-text-stroke: 0.13em var(--line); paint-order: stroke fill; text-shadow: 0 0.06em 0 var(--line); }
.kslide__n small { -webkit-text-stroke: 0; text-shadow: none; color: var(--text-2); }
.kslide__t { color: var(--text); }
.kslide__tip b { color: var(--red-ink); }
.kslide--done h2 { color: var(--leaf); -webkit-text-stroke: 0.12em var(--line); paint-order: stroke fill; text-shadow: 0 0.06em 0 var(--line); }
.kitchen__actions .icon-btn { background: var(--box-2); }
.k-act { font-weight: 700; color: var(--text-2); }

/* ---------- גיליונות: קופסת דיאלוג של משחק ---------- */
.sheet { border-radius: 0; background: var(--box); color: var(--text); box-shadow: 0 -4px 0 0 var(--line); }
.sheet::backdrop { background: rgba(16, 10, 30, 0.6); }
.sheet__head h2 { font-weight: 900; font-size: 1.6rem; }
.sheet__opt { border-bottom: 2px dashed var(--hair); font-weight: 600; }
.check { border-bottom: 2px dashed var(--hair); }
.sheet__done { color: var(--leaf); font-weight: 900; }
.card-form__code { border: 0; border-radius: 0; background: var(--box-2); color: var(--text); box-shadow: var(--frame); }
.card-form .primary { margin-block-end: 9px; }
.card-form__err { color: var(--red-ink); font-weight: 700; }
.card-form__label { color: var(--text-2); }
.mx { border: 0; border-radius: 0; background: var(--box-2); box-shadow: var(--frame); }
.mx.is-got { background: var(--gold-wash); box-shadow: var(--frame), inset 0 0 0 3px var(--coin); }
.mx.is-got .mx__art { animation: idle 900ms steps(2) infinite; }
.mx__word { color: var(--coin); -webkit-text-stroke: 0.12em var(--line); paint-order: stroke fill; }
.mx__count { font-family: var(--f-display); font-size: 1.2rem; }

/* הדברים של מקסים שמסתתרים באתר */
/* לבובו יושב מאחורי השיח; רק קצות האוזניים מציצות, ומדי פעם הוא קופץ החוצה */
.bushwrap { position: relative; display: inline-block; line-height: 0; }
.bushwrap > .spr { position: relative; z-index: 1; }
.maxim-peek { position: absolute; z-index: 0; border: 0; padding: 0; background: none; cursor: pointer; line-height: 0; }
.peek-labubu { bottom: 6px; left: 54%; translate: 0 0; transition: translate 380ms var(--ease); }
.peek-labubu.is-up { translate: 0 -32px; }
.peek-labubu.is-got { translate: 0 -34px; }
.peek-labubu.is-got .spr { animation: idle 700ms steps(2) infinite; }
/* המטריושקה עומדת ליד השער של הטירה, צמודה לבסיס שלה; הבובות הקטנות יוצאות החוצה */
/* עכשיו ליד הדלת המסתובבת של בניין המשחקים, על המדרכה מימין לה; הבובות הקטנות יוצאות ימינה (ltr), לא לתוך הדלת */
/* z-index 6: גם כשהבניין מסומן במפת האוצר (has-tmark מרים אותו ל־5), היא לפניו */
.matry { position: absolute; bottom: 30px; left: calc(50% + 31px); direction: ltr; display: flex; align-items: flex-end; gap: 3px; z-index: 6; }
.matry .spr { animation: none; }
.matry__kid { display: inline-block; animation: matry-pop 380ms var(--ease) both; }
@keyframes matry-pop { from { translate: 14px 0; scale: 0.4; opacity: 0; } }
/* הגמגום: השלט מהבהב באדום, והטקסט נשאר בהיר וקריא */
.shop-glitch { animation: glitch 120ms steps(2) 6; background: var(--red) !important; color: var(--on-ink) !important; }
@keyframes glitch { 50% { translate: 2px 0; opacity: 0.55; } }
.maxim-word { all: unset; cursor: pointer; border-bottom: 3px dotted var(--coin); }
.maxim-word:focus-visible { outline: 3px solid var(--coin); }
.inst__n { border: 0; border-radius: 0; background: var(--coin); color: var(--line); box-shadow: var(--frame); }
.inst__note { border-radius: 0; box-shadow: var(--frame); }
.inst__ico { border-radius: 0; }
.inst__row .chip { border-radius: 0; height: 52px; }

/* הודעות */
.toast { border-radius: 0; background: var(--box); color: var(--text); box-shadow: var(--frame-drop); font-weight: 700; }

/* הישג חדש: באנר שצועק לפי הנדירות */
.ach-toast {
  border-radius: 0; padding: 10px 16px 10px 10px; overflow: visible;
  background: var(--line); color: #fff8ec;
  box-shadow: 0 -3px 0 0 var(--coin), 0 3px 0 0 var(--coin), -3px 0 0 0 var(--coin), 3px 0 0 0 var(--coin), 0 10px 0 0 var(--drop);
}
.ach-toast { top: 18px; gap: 14px; padding: 12px 18px 12px 12px; }
.ach-toast.is-legend { background: #3b1f6e; padding-block: 16px; }
.ach-toast__txt { display: grid; gap: 2px; }
.ach-toast .boom {
  display: block; font-family: var(--f-display); font-weight: 900; font-size: 2rem; line-height: 1;
  color: var(--coin); -webkit-text-stroke: 0.14em var(--line); paint-order: stroke fill;
  transform-origin: center right;
}
.ach-toast__name { font-weight: 700; font-size: 1rem; line-height: 1.25; }
.ach-toast.is-on .boom { animation: boom 600ms var(--ease); }
.ach-toast.is-legend .boom { font-size: 3.6rem; color: #ffcf4a; }
.ach-toast.is-legend.is-on { animation: shake 420ms steps(6) 420ms; }
@keyframes boom { 0% { scale: 0.2; } 60% { scale: 1.35; } 100% { scale: 1; } }

/* ---------- תגי הישג: בלוקים ---------- */
.pb { display: block; flex: none; }
.pb__line { fill: var(--line); }
.pb__face { fill: #9b96b0; }
.pb__shade { fill: rgba(0, 0, 0, 0.18); }
.pb__shine { fill: rgba(255, 255, 255, 0.35); }
.pb__rivet { fill: rgba(32, 20, 46, 0.35); }
.pb__glyph { font-family: var(--f-display); font-weight: 900; fill: #5f5a78; }
.pb.is-on .pb__face { fill: var(--coin); }
.pb.is-on .pb__glyph { fill: var(--line); }
.pb.is-legend .pb__face { fill: #7a4bd1; }
.pb.is-legend .pb__glyph { fill: #ffcf4a; }
.pb.is-legend .pb__rivet { fill: #ffcf4a; }
.pb.is-hidden .pb__face { fill: #2a2346; }
.pb.is-hidden .pb__glyph { fill: #fff8ec; }
.pb.is-hidden .pb__rivet, .pb.is-hidden .pb__shine { fill: rgba(255, 255, 255, 0.12); }

/* ---------- עמוד ההישגים: חדר הגביעים ---------- */
.ach-head h1 { color: var(--coin); -webkit-text-stroke: 0.15em var(--line); paint-order: stroke fill; text-shadow: 0 0.08em 0 var(--line); }
.ach-progress .grad { height: auto; gap: 5px; flex-wrap: wrap; }
.ach-progress .grad i { width: 14px; height: 14px; border-radius: 0; background: var(--box-2); box-shadow: 0 0 0 2px var(--line); }
.ach-progress .grad i.on { background: var(--coin); }
.ach-progress .grad i:nth-child(odd) { height: 14px; }
.tool { border: 0; border-radius: 0; background: var(--box); box-shadow: var(--frame-drop); }
.tool .primary { font-size: 1.05rem; }
.switch { border-radius: 0; background: var(--box-2); box-shadow: var(--frame); }
.switch::after { border-radius: 0; background: var(--line); box-shadow: none; }
.switch[aria-checked='true'] { background: var(--leaf); }
/* "הפסיקו לטרלל" היא רק בדיחה: העמוד רועד, והמתג חוזר (js/achievements-page.js) */
.page-ach main.is-no { animation: shake 420ms steps(6); }
@media (prefers-reduced-motion: reduce) { .page-ach main.is-no { animation: none; } }
.ach { gap: 10px; }
.ach h3 { font-weight: 900; }
.ach.is-locked .pb { opacity: 0.85; }
.ach { position: relative; }
.ach__legend { position: absolute; top: 4px; left: calc(50% - 64px); rotate: -12deg; padding: 1px 8px; background: #6438bf; color: #ffcf4a; box-shadow: var(--frame); z-index: 1; }
/* הישג צוות: מדבקה כחולה בצד השני של הבלוק (צבעים קבועים, כמו "אגדי", כדי שלא יתהפכו בלילה) */
.ach__team { position: absolute; top: 4px; right: calc(50% - 64px); rotate: 12deg; padding: 1px 8px; background: #1d6fb8; color: #fff; box-shadow: var(--frame); z-index: 1; }
.ach:target .pb { animation: bump 300ms steps(3) 3; }

/* סודות: "רמז סודי" מטושטש קצת, וכפתור צהוב לקנות את הרמז במטבעות (js/achievements-page.js) */
.ach-coins { display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 0; padding: 6px 14px 6px 10px; background: var(--box); color: var(--text); box-shadow: var(--frame-drop); font: 900 1.25rem var(--f-display); }
.ach-coins .spr { width: 24px; height: auto; }
.ach-coins.is-bump .spr { animation: bump 240ms steps(3); }
.ach__secret { font-weight: 700; letter-spacing: 0.04em; color: var(--text-2); }
.ach__secret bdi::before, .ach__secret bdi::after { content: '·'; padding-inline: 4px; color: var(--coin); }
.hint-buy {
  display: inline-flex; align-items: center; gap: 5px; height: 40px; margin-top: 2px; padding-inline: 10px 12px;
  border: 0; background: var(--coin); color: #20142e; cursor: pointer;
  font: 900 0.95rem/1 var(--f-display); white-space: nowrap;
  box-shadow: var(--frame), 0 6px 0 0 var(--coin-2);
  transition: transform 90ms, box-shadow 90ms;
}
.hint-buy .spr { width: 18px; height: auto; }
.hint-buy:hover { filter: brightness(1.06); }
.hint-buy:active { transform: translateY(4px); box-shadow: var(--frame), 0 2px 0 0 var(--coin-2); }
.hint-buy[aria-disabled='true'] { filter: grayscale(0.75); opacity: 0.75; }
/* רמז שנקנה עכשיו: הבלוק קופץ והרמז נחשף משמאל לימין, כמו מסך של משחק */
.ach.is-revealed .pb { animation: bump 300ms steps(3) 2; }
.ach.is-revealed p { animation: reveal 700ms steps(7) both; }
@keyframes reveal { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0); } }
@media (prefers-reduced-motion: reduce) { .ach.is-revealed .pb, .ach.is-revealed p, .ach-coins.is-bump .spr { animation: none; } }

.cert {
  border: 0; outline: 0; border-radius: 0;
  background: var(--box); box-shadow: 0 -4px 0 0 var(--coin), 0 4px 0 0 var(--coin), -4px 0 0 0 var(--coin), 4px 0 0 0 var(--coin), 0 0 0 10px var(--line), 0 18px 0 6px var(--drop);
  margin: 10px 10px 46px;
}
.cert__ticks { display: none; }
.cert h2 { color: var(--coin); -webkit-text-stroke: 0.14em var(--line); paint-order: stroke fill; }
.cert__sign { border-top: 3px dashed var(--line); }

/* ---------- המכתב: דף מהמחברת שנכתב מול העיניים ---------- */
.letter, .letter::backdrop { background: linear-gradient(var(--sky-1) 0 30%, var(--sky-2) 30% 55%, var(--sky-3) 55% 78%, var(--grass) 78%); }
.letter__env .spr { animation: env 1.2s steps(2) infinite; filter: drop-shadow(0 6px 0 var(--drop)); }
@keyframes env { 50% { transform: translateY(-6px) rotate(-4deg); } }
.letter__paper {
  border-top: 0; color: #2b1b12;
  padding: 26px 22px 24px; padding-inline-start: 38px;
  background: #fffdf6 repeating-linear-gradient(transparent 0 33px, #bcd3f0 33px 34px);
  background-position: 0 6px;
  box-shadow: var(--frame-drop);
}
.letter__paper::before { top: 0; bottom: 0; height: auto; inset-inline: auto; inset-inline-start: 24px; width: 2px; background: #e5392b; opacity: 0.7; }
.letter__paper h2 { color: #b8231a; line-height: 34px; margin-bottom: 0; }
.letter__type p { line-height: 34px; font-size: 1.15rem; font-weight: 600; }
.letter__type p + p { margin-top: 0; }
.letter__type p.is-typing::after { content: ''; display: inline-block; width: 0.55em; height: 1em; margin-inline-start: 2px; vertical-align: -0.12em; background: #2b1b12; animation: caret 500ms steps(2) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.letter__sign { color: #2b1b12; line-height: 34px; margin-top: 0; }
.letter__draft { border: 0; background: var(--red); color: #fff8ec; box-shadow: var(--frame); }
.letter__go { opacity: 0.35; transition: opacity 300ms, transform 90ms, box-shadow 90ms; }
.letter.is-done .letter__go { opacity: 1; }

/* ---------- בדיחות ---------- */
.font-menu { border: 0; border-radius: 0; background: var(--box); box-shadow: var(--frame-drop); }
.font-menu button { border-radius: 0; }
.arrow-joke { color: var(--red); }
.arrow-joke svg { stroke-width: 4.5; filter: drop-shadow(0 2px 0 var(--line)); }
.arrow-joke span { direction: rtl; background: var(--box); color: var(--text); box-shadow: var(--frame); border-radius: 0; }
.storm { background: var(--sky-2); }
.storm__num { color: var(--coin); -webkit-text-stroke: 0.06em var(--line); paint-order: stroke fill; text-shadow: 0 0.04em 0 var(--line); }
.palm { fill: var(--coin); stroke: var(--line); stroke-width: 3; }
.storm-mini { border-radius: 0; box-shadow: var(--frame); }

@media (prefers-reduced-motion: reduce) {
  .sky__cloud, .ph__cloud, .hero-cookie, .ph__spr .spr, .prop--block .spr, .lvl__week { animation: none !important; }
}

/* חלון הראווה: מילה נעולה = שורת בלוקים של סימן שאלה. וגיליון רחב מקבל מסגרת פיקסלים בצדדים */
.mx__qs { display: flex; gap: 3px; justify-content: center; }
.mx:not(.is-got) .mx__qs { filter: none; opacity: 1; }
@media (min-width: 521px) {
  .sheet { box-shadow: 0 -4px 0 0 var(--line), -4px 0 0 0 var(--line), 4px 0 0 0 var(--line); }
}

/* קלוד במפה: עובד כל הזמן; והטרמינל במסגרת פיקסלים */
.prop--clawd .spr { animation: idle 700ms steps(2) infinite; }
.cl { border-radius: 0; box-shadow: var(--frame); }

/* ---------- הבדיחות על הצוות (js/team.js) ---------- */
.prop--printer.is-printing .spr { animation: shake 260ms steps(3) infinite; }
.prop.is-stretch .spr { animation: stretch 520ms steps(4); }
@keyframes stretch { 30% { scale: 1.5 0.65; } 60% { scale: 0.8 1.25; } }
.prop.is-hop .spr, .crown-btn.is-hop .spr { animation: hop-p 420ms steps(3); }
@keyframes hop-p { 50% { translate: 0 -14px; } }

/* פעולות קטנות במקום לחיצה אחת (js/team.js, js/maxim.js): הרמז על החפץ עצמו.
   זוהר = מסגרת פיקסלים (ארבעה drop-shadow בלי טשטוש). בתנועה מופחתת הזוהר קבוע, בלי הבהוב (למטה) */
/* הבראאי: הגריל והבשר נפרדים. בהתחלה הגריל כבוי (פחמים אפורים); הנגיעה הראשונה מדליקה אותו (להבות מתרוממות).
   אחר כך הבשר מאדים, זוהר, רוחש ("טשששש!") ומעלה עשן כשצריך להפוך, ונשרף כשהופכים מוקדם */
.braai { position: relative; display: inline-block; line-height: 0; }
.braai:not(.is-lit) > .spr { filter: grayscale(1) brightness(0.8) drop-shadow(0 5px 0 var(--drop)); }
.braai__meat { position: absolute; left: 15%; top: 12.5%; width: 70%; line-height: 0; transform-origin: 50% 100%; }
.prop .braai__meat .spr { width: 100%; height: auto; filter: none; }
.prop .braai__meat.is-side .spr { filter: saturate(1.25) brightness(0.88); }
/* הזמן להפוך: הבשר משנה צבע לאדום־כתום בוהק, עם מסגרת שמהבהבת */
.braai.is-hot .braai__meat .spr { filter: sepia(1) saturate(5) hue-rotate(-28deg) brightness(1.2) drop-shadow(3px 0 0 #ffc93c) drop-shadow(-3px 0 0 #ffc93c) drop-shadow(0 -3px 0 #ffc93c); animation: hot 220ms steps(1) infinite; }
@keyframes hot { 50% { filter: sepia(1) saturate(6) hue-rotate(-38deg) brightness(1.35) drop-shadow(3px 0 0 #ff7a1f) drop-shadow(-3px 0 0 #ff7a1f) drop-shadow(0 -3px 0 #ff7a1f); } }
/* האש: ריבועי פיקסלים של 4 פיקסלים מעל הרשת (box-shadow), מאחורי הבשר. בלי scale, כדי שתישאר פיקסלים.
   רגיל: להבות קטנות שמרצדות (רואים אותן בצדדים); רוחש: גבוהות יותר; הדלקה: קופצות גבוה מעל הבשר ויורדות למקום */
.braai__fire { position: absolute; left: 50%; top: calc(31% - 4px); width: 4px; height: 4px; margin-left: -2px; display: none; pointer-events: none; box-shadow: -32px 0px #e5392b, -32px -4px #ffc93c, -28px 0px #e5392b, -28px -4px #ff7a1f, -28px -8px #ffc93c, -24px 0px #e5392b, -24px -4px #ffc93c, -20px 0px #e5392b, -16px 0px #e5392b, -16px -4px #ffc93c, -12px 0px #e5392b, -8px 0px #e5392b, -8px -4px #ffc93c, -4px 0px #e5392b, 0px 0px #e5392b, 0px -4px #ffc93c, 4px 0px #e5392b, 8px 0px #e5392b, 8px -4px #ffc93c, 12px 0px #e5392b, 16px 0px #e5392b, 16px -4px #ffc93c, 20px 0px #e5392b, 24px 0px #e5392b, 24px -4px #ffc93c, 28px 0px #e5392b, 28px -4px #ff7a1f, 28px -8px #ffc93c, 32px 0px #e5392b, 32px -4px #ffc93c; }
.braai.is-lit .braai__fire { display: block; animation: flick 300ms steps(1) infinite; }
@keyframes flick { 50% { box-shadow: -32px 0px #e5392b, -32px -4px #ff7a1f, -32px -8px #ffc93c, -28px 0px #e5392b, -28px -4px #ffc93c, -24px 0px #e5392b, -24px -4px #ff7a1f, -24px -8px #ffc93c, -20px 0px #e5392b, -20px -4px #ffc93c, -16px 0px #e5392b, -12px 0px #e5392b, -12px -4px #ffc93c, -8px 0px #e5392b, -4px 0px #e5392b, -4px -4px #ffc93c, 0px 0px #e5392b, 4px 0px #e5392b, 4px -4px #ffc93c, 8px 0px #e5392b, 12px 0px #e5392b, 12px -4px #ffc93c, 16px 0px #e5392b, 20px 0px #e5392b, 20px -4px #ffc93c, 24px 0px #e5392b, 24px -4px #ff7a1f, 24px -8px #ffc93c, 28px 0px #e5392b, 28px -4px #ffc93c, 32px 0px #e5392b, 32px -4px #ff7a1f, 32px -8px #ffc93c; } }
.braai.is-hot .braai__fire { box-shadow: -32px 0px #e5392b, -32px -4px #ff7a1f, -32px -8px #ffc93c, -32px -12px #ffc93c, -28px 0px #e5392b, -28px -4px #ff7a1f, -28px -8px #ff7a1f, -28px -12px #ffc93c, -28px -16px #ffc93c, -24px 0px #e5392b, -24px -4px #ff7a1f, -24px -8px #ffc93c, -24px -12px #ffc93c, -20px 0px #e5392b, -20px -4px #ff7a1f, -20px -8px #ffc93c, -16px 0px #e5392b, -16px -4px #ff7a1f, -16px -8px #ffc93c, -12px 0px #e5392b, -12px -4px #ffc93c, -8px 0px #e5392b, -8px -4px #ff7a1f, -8px -8px #ffc93c, -4px 0px #e5392b, -4px -4px #ffc93c, 0px 0px #e5392b, 0px -4px #ff7a1f, 0px -8px #ffc93c, 4px 0px #e5392b, 4px -4px #ffc93c, 8px 0px #e5392b, 8px -4px #ff7a1f, 8px -8px #ffc93c, 12px 0px #e5392b, 12px -4px #ffc93c, 16px 0px #e5392b, 16px -4px #ff7a1f, 16px -8px #ffc93c, 20px 0px #e5392b, 20px -4px #ff7a1f, 20px -8px #ffc93c, 24px 0px #e5392b, 24px -4px #ff7a1f, 24px -8px #ffc93c, 24px -12px #ffc93c, 28px 0px #e5392b, 28px -4px #ff7a1f, 28px -8px #ff7a1f, 28px -12px #ffc93c, 28px -16px #ffc93c, 32px 0px #e5392b, 32px -4px #ff7a1f, 32px -8px #ffc93c, 32px -12px #ffc93c; animation-name: flick-hot; }
@keyframes flick-hot { 50% { box-shadow: -32px 0px #e5392b, -32px -4px #ff7a1f, -32px -8px #ff7a1f, -32px -12px #ffc93c, -32px -16px #ffc93c, -28px 0px #e5392b, -28px -4px #ff7a1f, -28px -8px #ffc93c, -28px -12px #ffc93c, -24px 0px #e5392b, -24px -4px #ff7a1f, -24px -8px #ff7a1f, -24px -12px #ffc93c, -24px -16px #ffc93c, -20px 0px #e5392b, -20px -4px #ff7a1f, -20px -8px #ffc93c, -16px 0px #e5392b, -16px -4px #ffc93c, -12px 0px #e5392b, -12px -4px #ff7a1f, -12px -8px #ffc93c, -8px 0px #e5392b, -8px -4px #ffc93c, -4px 0px #e5392b, -4px -4px #ff7a1f, -4px -8px #ffc93c, 0px 0px #e5392b, 0px -4px #ffc93c, 4px 0px #e5392b, 4px -4px #ff7a1f, 4px -8px #ffc93c, 8px 0px #e5392b, 8px -4px #ffc93c, 12px 0px #e5392b, 12px -4px #ff7a1f, 12px -8px #ffc93c, 16px 0px #e5392b, 16px -4px #ffc93c, 20px 0px #e5392b, 20px -4px #ff7a1f, 20px -8px #ffc93c, 24px 0px #e5392b, 24px -4px #ff7a1f, 24px -8px #ff7a1f, 24px -12px #ffc93c, 24px -16px #ffc93c, 28px 0px #e5392b, 28px -4px #ff7a1f, 28px -8px #ffc93c, 28px -12px #ffc93c, 32px 0px #e5392b, 32px -4px #ff7a1f, 32px -8px #ff7a1f, 32px -12px #ffc93c, 32px -16px #ffc93c; } }
.braai.is-igniting .braai__fire { animation: ignite 760ms steps(1) both; }
@keyframes ignite {
  0% { box-shadow: -32px 0px #e5392b, -32px -4px #ffc93c, -28px 0px #e5392b, -28px -4px #ff7a1f, -28px -8px #ffc93c, -24px 0px #e5392b, -24px -4px #ffc93c, -20px 0px #e5392b, -16px 0px #e5392b, -16px -4px #ffc93c, -12px 0px #e5392b, -8px 0px #e5392b, -8px -4px #ffc93c, -4px 0px #e5392b, 0px 0px #e5392b, 0px -4px #ffc93c, 4px 0px #e5392b, 8px 0px #e5392b, 8px -4px #ffc93c, 12px 0px #e5392b, 16px 0px #e5392b, 16px -4px #ffc93c, 20px 0px #e5392b, 24px 0px #e5392b, 24px -4px #ffc93c, 28px 0px #e5392b, 28px -4px #ff7a1f, 28px -8px #ffc93c, 32px 0px #e5392b, 32px -4px #ffc93c; }
  15% { box-shadow: -32px 0px #e5392b, -32px -4px #ff7a1f, -32px -8px #ffc93c, -28px 0px #e5392b, -28px -4px #ff7a1f, -28px -8px #ffc93c, -28px -12px #ffc93c, -24px 0px #e5392b, -24px -4px #ff7a1f, -24px -8px #ff7a1f, -24px -12px #ffc93c, -24px -16px #ffc93c, -20px 0px #e5392b, -20px -4px #e5392b, -20px -8px #ff7a1f, -20px -12px #ff7a1f, -20px -16px #ffc93c, -20px -20px #fff3b0, -16px 0px #e5392b, -16px -4px #ff7a1f, -16px -8px #ff7a1f, -16px -12px #ffc93c, -16px -16px #ffc93c, -12px 0px #e5392b, -12px -4px #e5392b, -12px -8px #ff7a1f, -12px -12px #ff7a1f, -12px -16px #ffc93c, -12px -20px #fff3b0, -8px 0px #e5392b, -8px -4px #e5392b, -8px -8px #ff7a1f, -8px -12px #ff7a1f, -8px -16px #ff7a1f, -8px -20px #ffc93c, -8px -24px #fff3b0, -4px 0px #e5392b, -4px -4px #e5392b, -4px -8px #ff7a1f, -4px -12px #ff7a1f, -4px -16px #ffc93c, -4px -20px #fff3b0, 0px 0px #e5392b, 0px -4px #e5392b, 0px -8px #ff7a1f, 0px -12px #ff7a1f, 0px -16px #ff7a1f, 0px -20px #ff7a1f, 0px -24px #ffc93c, 0px -28px #fff3b0, 4px 0px #e5392b, 4px -4px #e5392b, 4px -8px #ff7a1f, 4px -12px #ff7a1f, 4px -16px #ffc93c, 4px -20px #fff3b0, 8px 0px #e5392b, 8px -4px #e5392b, 8px -8px #ff7a1f, 8px -12px #ff7a1f, 8px -16px #ff7a1f, 8px -20px #ffc93c, 8px -24px #fff3b0, 12px 0px #e5392b, 12px -4px #e5392b, 12px -8px #ff7a1f, 12px -12px #ff7a1f, 12px -16px #ffc93c, 12px -20px #fff3b0, 16px 0px #e5392b, 16px -4px #ff7a1f, 16px -8px #ff7a1f, 16px -12px #ffc93c, 16px -16px #ffc93c, 20px 0px #e5392b, 20px -4px #e5392b, 20px -8px #ff7a1f, 20px -12px #ff7a1f, 20px -16px #ffc93c, 20px -20px #fff3b0, 24px 0px #e5392b, 24px -4px #ff7a1f, 24px -8px #ff7a1f, 24px -12px #ffc93c, 24px -16px #ffc93c, 28px 0px #e5392b, 28px -4px #ff7a1f, 28px -8px #ffc93c, 28px -12px #ffc93c, 32px 0px #e5392b, 32px -4px #ff7a1f, 32px -8px #ffc93c; }
  30% { box-shadow: -32px 0px #e5392b, -32px -4px #ff7a1f, -32px -8px #ff7a1f, -32px -12px #ffc93c, -32px -16px #ffc93c, -28px 0px #e5392b, -28px -4px #e5392b, -28px -8px #ff7a1f, -28px -12px #ff7a1f, -28px -16px #ff7a1f, -28px -20px #ffc93c, -28px -24px #fff3b0, -24px 0px #e5392b, -24px -4px #e5392b, -24px -8px #ff7a1f, -24px -12px #ff7a1f, -24px -16px #ff7a1f, -24px -20px #ff7a1f, -24px -24px #ffc93c, -24px -28px #fff3b0, -20px 0px #e5392b, -20px -4px #e5392b, -20px -8px #ff7a1f, -20px -12px #ff7a1f, -20px -16px #ff7a1f, -20px -20px #ff7a1f, -20px -24px #ff7a1f, -20px -28px #ff7a1f, -20px -32px #ffc93c, -20px -36px #fff3b0, -16px 0px #e5392b, -16px -4px #e5392b, -16px -8px #ff7a1f, -16px -12px #ff7a1f, -16px -16px #ff7a1f, -16px -20px #ff7a1f, -16px -24px #ffc93c, -16px -28px #fff3b0, -12px 0px #e5392b, -12px -4px #e5392b, -12px -8px #ff7a1f, -12px -12px #ff7a1f, -12px -16px #ff7a1f, -12px -20px #ff7a1f, -12px -24px #ff7a1f, -12px -28px #ff7a1f, -12px -32px #ff7a1f, -12px -36px #ffc93c, -12px -40px #fff3b0, -8px 0px #e5392b, -8px -4px #e5392b, -8px -8px #ff7a1f, -8px -12px #ff7a1f, -8px -16px #ff7a1f, -8px -20px #ff7a1f, -8px -24px #ff7a1f, -8px -28px #ffc93c, -8px -32px #fff3b0, -4px 0px #e5392b, -4px -4px #e5392b, -4px -8px #ff7a1f, -4px -12px #ff7a1f, -4px -16px #ff7a1f, -4px -20px #ff7a1f, -4px -24px #ff7a1f, -4px -28px #ff7a1f, -4px -32px #ff7a1f, -4px -36px #ff7a1f, -4px -40px #ffc93c, -4px -44px #fff3b0, 0px 0px #e5392b, 0px -4px #e5392b, 0px -8px #ff7a1f, 0px -12px #ff7a1f, 0px -16px #ff7a1f, 0px -20px #ff7a1f, 0px -24px #ff7a1f, 0px -28px #ff7a1f, 0px -32px #ffc93c, 0px -36px #fff3b0, 4px 0px #e5392b, 4px -4px #e5392b, 4px -8px #ff7a1f, 4px -12px #ff7a1f, 4px -16px #ff7a1f, 4px -20px #ff7a1f, 4px -24px #ff7a1f, 4px -28px #ff7a1f, 4px -32px #ff7a1f, 4px -36px #ff7a1f, 4px -40px #ffc93c, 4px -44px #fff3b0, 8px 0px #e5392b, 8px -4px #e5392b, 8px -8px #ff7a1f, 8px -12px #ff7a1f, 8px -16px #ff7a1f, 8px -20px #ff7a1f, 8px -24px #ff7a1f, 8px -28px #ffc93c, 8px -32px #fff3b0, 12px 0px #e5392b, 12px -4px #e5392b, 12px -8px #ff7a1f, 12px -12px #ff7a1f, 12px -16px #ff7a1f, 12px -20px #ff7a1f, 12px -24px #ff7a1f, 12px -28px #ff7a1f, 12px -32px #ff7a1f, 12px -36px #ffc93c, 12px -40px #fff3b0, 16px 0px #e5392b, 16px -4px #e5392b, 16px -8px #ff7a1f, 16px -12px #ff7a1f, 16px -16px #ff7a1f, 16px -20px #ff7a1f, 16px -24px #ffc93c, 16px -28px #fff3b0, 20px 0px #e5392b, 20px -4px #e5392b, 20px -8px #ff7a1f, 20px -12px #ff7a1f, 20px -16px #ff7a1f, 20px -20px #ff7a1f, 20px -24px #ff7a1f, 20px -28px #ff7a1f, 20px -32px #ffc93c, 20px -36px #fff3b0, 24px 0px #e5392b, 24px -4px #e5392b, 24px -8px #ff7a1f, 24px -12px #ff7a1f, 24px -16px #ff7a1f, 24px -20px #ff7a1f, 24px -24px #ffc93c, 24px -28px #fff3b0, 28px 0px #e5392b, 28px -4px #e5392b, 28px -8px #ff7a1f, 28px -12px #ff7a1f, 28px -16px #ff7a1f, 28px -20px #ffc93c, 28px -24px #fff3b0, 32px 0px #e5392b, 32px -4px #ff7a1f, 32px -8px #ff7a1f, 32px -12px #ffc93c, 32px -16px #ffc93c; }
  50% { box-shadow: -32px 0px #e5392b, -32px -4px #ff7a1f, -32px -8px #ffc93c, -32px -12px #ffc93c, -28px 0px #e5392b, -28px -4px #e5392b, -28px -8px #ff7a1f, -28px -12px #ff7a1f, -28px -16px #ffc93c, -28px -20px #fff3b0, -24px 0px #e5392b, -24px -4px #e5392b, -24px -8px #ff7a1f, -24px -12px #ff7a1f, -24px -16px #ff7a1f, -24px -20px #ffc93c, -24px -24px #fff3b0, -20px 0px #e5392b, -20px -4px #e5392b, -20px -8px #ff7a1f, -20px -12px #ff7a1f, -20px -16px #ffc93c, -20px -20px #fff3b0, -16px 0px #e5392b, -16px -4px #e5392b, -16px -8px #ff7a1f, -16px -12px #ff7a1f, -16px -16px #ff7a1f, -16px -20px #ff7a1f, -16px -24px #ffc93c, -16px -28px #fff3b0, -12px 0px #e5392b, -12px -4px #e5392b, -12px -8px #ff7a1f, -12px -12px #ff7a1f, -12px -16px #ff7a1f, -12px -20px #ffc93c, -12px -24px #fff3b0, -8px 0px #e5392b, -8px -4px #e5392b, -8px -8px #ff7a1f, -8px -12px #ff7a1f, -8px -16px #ff7a1f, -8px -20px #ff7a1f, -8px -24px #ff7a1f, -8px -28px #ffc93c, -8px -32px #fff3b0, -4px 0px #e5392b, -4px -4px #e5392b, -4px -8px #ff7a1f, -4px -12px #ff7a1f, -4px -16px #ff7a1f, -4px -20px #ffc93c, -4px -24px #fff3b0, 0px 0px #e5392b, 0px -4px #e5392b, 0px -8px #ff7a1f, 0px -12px #ff7a1f, 0px -16px #ff7a1f, 0px -20px #ff7a1f, 0px -24px #ffc93c, 0px -28px #fff3b0, 4px 0px #e5392b, 4px -4px #e5392b, 4px -8px #ff7a1f, 4px -12px #ff7a1f, 4px -16px #ff7a1f, 4px -20px #ffc93c, 4px -24px #fff3b0, 8px 0px #e5392b, 8px -4px #e5392b, 8px -8px #ff7a1f, 8px -12px #ff7a1f, 8px -16px #ff7a1f, 8px -20px #ff7a1f, 8px -24px #ff7a1f, 8px -28px #ffc93c, 8px -32px #fff3b0, 12px 0px #e5392b, 12px -4px #e5392b, 12px -8px #ff7a1f, 12px -12px #ff7a1f, 12px -16px #ff7a1f, 12px -20px #ffc93c, 12px -24px #fff3b0, 16px 0px #e5392b, 16px -4px #e5392b, 16px -8px #ff7a1f, 16px -12px #ff7a1f, 16px -16px #ff7a1f, 16px -20px #ff7a1f, 16px -24px #ffc93c, 16px -28px #fff3b0, 20px 0px #e5392b, 20px -4px #e5392b, 20px -8px #ff7a1f, 20px -12px #ff7a1f, 20px -16px #ffc93c, 20px -20px #fff3b0, 24px 0px #e5392b, 24px -4px #e5392b, 24px -8px #ff7a1f, 24px -12px #ff7a1f, 24px -16px #ff7a1f, 24px -20px #ffc93c, 24px -24px #fff3b0, 28px 0px #e5392b, 28px -4px #e5392b, 28px -8px #ff7a1f, 28px -12px #ff7a1f, 28px -16px #ffc93c, 28px -20px #fff3b0, 32px 0px #e5392b, 32px -4px #ff7a1f, 32px -8px #ffc93c, 32px -12px #ffc93c; }
  70% { box-shadow: -32px 0px #e5392b, -32px -4px #ff7a1f, -32px -8px #ffc93c, -28px 0px #e5392b, -28px -4px #ff7a1f, -28px -8px #ffc93c, -28px -12px #ffc93c, -24px 0px #e5392b, -24px -4px #ff7a1f, -24px -8px #ffc93c, -24px -12px #ffc93c, -20px 0px #e5392b, -20px -4px #ff7a1f, -20px -8px #ffc93c, -16px 0px #e5392b, -16px -4px #ff7a1f, -16px -8px #ff7a1f, -16px -12px #ffc93c, -16px -16px #ffc93c, -12px 0px #e5392b, -12px -4px #ff7a1f, -12px -8px #ffc93c, -8px 0px #e5392b, -8px -4px #ff7a1f, -8px -8px #ffc93c, -8px -12px #ffc93c, -4px 0px #e5392b, -4px -4px #ff7a1f, -4px -8px #ffc93c, 0px 0px #e5392b, 0px -4px #ff7a1f, 0px -8px #ff7a1f, 0px -12px #ffc93c, 0px -16px #ffc93c, 4px 0px #e5392b, 4px -4px #ff7a1f, 4px -8px #ffc93c, 8px 0px #e5392b, 8px -4px #ff7a1f, 8px -8px #ffc93c, 8px -12px #ffc93c, 12px 0px #e5392b, 12px -4px #ff7a1f, 12px -8px #ffc93c, 16px 0px #e5392b, 16px -4px #ff7a1f, 16px -8px #ff7a1f, 16px -12px #ffc93c, 16px -16px #ffc93c, 20px 0px #e5392b, 20px -4px #ff7a1f, 20px -8px #ffc93c, 24px 0px #e5392b, 24px -4px #ff7a1f, 24px -8px #ffc93c, 24px -12px #ffc93c, 28px 0px #e5392b, 28px -4px #ff7a1f, 28px -8px #ffc93c, 28px -12px #ffc93c, 32px 0px #e5392b, 32px -4px #ff7a1f, 32px -8px #ffc93c; }
  85%, 100% { box-shadow: -32px 0px #e5392b, -32px -4px #ffc93c, -28px 0px #e5392b, -28px -4px #ff7a1f, -28px -8px #ffc93c, -24px 0px #e5392b, -24px -4px #ffc93c, -20px 0px #e5392b, -16px 0px #e5392b, -16px -4px #ffc93c, -12px 0px #e5392b, -8px 0px #e5392b, -8px -4px #ffc93c, -4px 0px #e5392b, 0px 0px #e5392b, 0px -4px #ffc93c, 4px 0px #e5392b, 8px 0px #e5392b, 8px -4px #ffc93c, 12px 0px #e5392b, 16px 0px #e5392b, 16px -4px #ffc93c, 20px 0px #e5392b, 24px 0px #e5392b, 24px -4px #ffc93c, 28px 0px #e5392b, 28px -4px #ff7a1f, 28px -8px #ffc93c, 32px 0px #e5392b, 32px -4px #ffc93c; }
}
/* "טשששש!" ליד הבשר כשהוא רוחש: בצד, בגובה הבשר, כדי שבועת הדיבור שמעל הגריל לא תסתיר אותו */
.braai__sizzle {
  position: absolute; z-index: 3; top: 0; left: 100%; margin-left: -4px; display: none; pointer-events: none; white-space: nowrap; rotate: -8deg;
  font: 900 0.9rem/1 var(--f-display); color: #fff8ec; -webkit-text-stroke: 4px #20142e; paint-order: stroke fill;
}
.braai.is-hot .braai__sizzle { display: block; animation: sizzle 220ms steps(2) infinite; }
@keyframes sizzle { 50% { translate: 2px -2px; } }
.braai__meat.is-burnt .spr { filter: brightness(0.28) saturate(0.4) !important; animation: none !important; }
.braai__smoke { position: absolute; left: 42%; top: 2%; width: 4px; height: 4px; display: none; pointer-events: none; }
.braai.is-hot .braai__smoke { display: block; background: #fff8ec; box-shadow: 14px -6px 0 0 #efe8f2, -12px -10px 0 0 #fff8ec; animation: smoke 450ms steps(3) infinite; }
@keyframes smoke { to { translate: 0 -14px; opacity: 0.2; } }
.braai__puff { position: absolute; z-index: 2; left: 50%; top: 8%; translate: -50% -50%; line-height: 0; pointer-events: none; animation: puff 740ms steps(5) forwards; }
.prop .braai__puff .spr { filter: brightness(0.22); }
@keyframes puff { from { scale: 0.5; } to { translate: -50% -150%; scale: 1.3; opacity: 0; } }
/* הסקווישי: נמעך לאט כל זמן שמחזיקים, ורוד כשהוא מעוך עד הסוף, ועולה בחזרה לאט */
.prop--squishy { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.prop--squishy .spr { transform-origin: 50% 100%; transition: scale 1.4s cubic-bezier(0.2, 0.7, 0.3, 1); touch-action: none; } /* אצבע שזזה קצת לא גוללת ולא מבטלת את הלחיצה */
.prop--squishy.is-hold .spr { scale: 1.32 0.52; transition: scale 1.2s steps(6, jump-start); } /* jump-start: נמעך מהרגע שהאצבע נוגעת, גם בנגיעה קצרה */
.prop--squishy.is-full .spr { filter: drop-shadow(3px 0 0 #f6a0b9) drop-shadow(-3px 0 0 #f6a0b9) drop-shadow(0 -3px 0 #f6a0b9) drop-shadow(0 5px 0 var(--drop)); }
.prop--squishy.is-wobble .spr { animation: wobble-s 420ms steps(4); transition: scale 120ms; }
@keyframes wobble-s { 30% { rotate: -7deg; } 70% { rotate: 7deg; } }
/* הסליים: גוררים אותו. בלי גלילה כשהאצבע עליו; החוט הדביק (span.goo) נמשך מהנקודה שתפסו עד היד */
.prop--slime .spr { position: relative; z-index: 3; touch-action: none; cursor: grab; } /* מעל החוט: החוט יוצא מהקצה של הסליים */
.prop--slime.is-drag { z-index: 6; }
.prop--slime.is-drag .spr { cursor: grabbing; transition: none; }
.goo { position: absolute; z-index: 2; left: 0; top: 0; width: 0; height: 0; pointer-events: none; transform-origin: 0 0;
  filter: drop-shadow(2px 0 0 #20142e) drop-shadow(-2px 0 0 #20142e) drop-shadow(0 2px 0 #20142e) drop-shadow(0 -2px 0 #20142e); }
.goo i { position: absolute; width: var(--s); height: var(--s); translate: -50% -50%; background: #f6a0b9; }
.goo i.is-hi { background: #ffc8da; }
.goo__blob { position: absolute; width: 20px; height: 16px; translate: -50% -50%; background: #f6a0b9; box-shadow: inset -4px -3px 0 0 #c46a9a, inset 4px 2px 0 0 #ffd6e4; }
.goo.is-far i, .goo.is-far .goo__blob { background: #ff8fb5; }
/* הלמה: רק הציור והשלט תופסים נגיעות, כי היא קופצת ממקום למקום (כל הכפתור זז) */
/* justify-self: הכפתור ברוחב הלמה והשלט ולא ברוחב כל המשבצת: כשהוא קופץ, אין קופסה ריקה רחבה שבורחת מהמסך */
.prop--llama { pointer-events: none; justify-self: center; }
.prop--llama .llamawrap, .prop--llama .prop__sign { pointer-events: auto; }
.llamawrap { position: relative; display: inline-block; line-height: 0; }
.prop--llama.is-flip .llamawrap { scale: -1 1; }
.prop--llama.is-away { z-index: 4; }
.prop--llama.is-gone { visibility: hidden; }
.llama-pack { position: absolute; left: 50%; top: 30%; line-height: 0; animation: matry-pop 380ms var(--ease) both; }
.prop .llama-pack .spr { filter: none; }
/* הטלפון מצלצל: רועד וזוהר */
.prop--voip.is-ring .spr { animation: shake 180ms steps(3) infinite; filter: drop-shadow(3px 0 0 #ffc93c) drop-shadow(-3px 0 0 #ffc93c) drop-shadow(0 -3px 0 #ffc93c) drop-shadow(0 5px 0 var(--drop)); }
/* הכתר נוצץ (שתי שניות): קרני פיקסלים מאחוריו, מסגרת בהירה עבה, ארבעה ניצוצות גדולים שמהבהבים והכתר קופץ קצת.
   ככה רואים אותו גם על הגג בטלפון. נגיעה בלי נצנוץ: רק נדנוד (ובועה "רק כשהוא נוצץ") */
.crown-btn.is-wiggle > .spr { animation: wiggle 420ms steps(4); }
.crown-btn.is-shine > .spr { animation: crown-bob 400ms steps(2) infinite; filter: brightness(1.3) drop-shadow(3px 0 0 #fff3b0) drop-shadow(-3px 0 0 #fff3b0) drop-shadow(0 -3px 0 #fff3b0) drop-shadow(0 3px 0 #ffc93c); }
@keyframes crown-bob { 50% { translate: 0 -3px; } }
.crown__rays {
  position: absolute; z-index: -1; left: 50%; top: 55%; width: 4px; height: 4px; translate: -50% -50%; display: none; pointer-events: none;
  color: #fff3b0;
  box-shadow: 0 -22px, 0 -26px, 0 -30px, 0 22px, 0 26px, -26px 0, -30px 0, -34px 0, 26px 0, 30px 0, 34px 0,
    -20px -18px, -24px -22px, 20px -18px, 24px -22px, -20px 18px, 20px 18px;
}
.crown-btn.is-shine .crown__rays { display: block; animation: crown-rays 400ms steps(2) infinite; }
@keyframes crown-rays { 50% { scale: 1.25; color: #ffc93c; } }
.crown__tw { position: absolute; top: -14px; left: -14px; display: none; line-height: 0; pointer-events: none; }
.crown__tw--2 { top: 6px; left: auto; right: -16px; }
.crown__tw--3 { top: -18px; left: auto; right: -6px; }
.crown__tw--4 { top: auto; bottom: -10px; left: -16px; }
.crown-btn.is-shine .crown__tw { display: block; animation: twinkle-c 360ms steps(2) infinite; }
.crown-btn.is-shine .crown__tw--2 { animation-delay: 180ms; }
.crown-btn.is-shine .crown__tw--3 { animation-delay: 90ms; }
.crown-btn.is-shine .crown__tw--4 { animation-delay: 270ms; }
@keyframes twinkle-c { 50% { scale: 0.3; } }
/* לבובו מציץ: מסגרת צהובה */
.peek-labubu.is-up .spr { filter: drop-shadow(2px 0 0 #ffc93c) drop-shadow(-2px 0 0 #ffc93c) drop-shadow(0 -2px 0 #ffc93c); }
/* הכיפה הפוכה (neta-flip): הפוכה ועקומה. רק scale ו־rotate, כי translate כבר ממקם אותה על הראש */
.hero-kip.is-upside { rotate: 14deg; scale: 1.35; margin-top: -3px; } /* קצת גדולה יותר, שיראו בטלפון שהיא קערה על הראש */
.hero-kip.is-upside .spr { scale: 1 -1; }
@media (prefers-reduced-motion: reduce) {
  .braai.is-hot .braai__meat .spr, .braai.is-hot .braai__smoke, .braai__puff, .braai.is-lit .braai__fire, .braai.is-hot .braai__sizzle, .prop--voip.is-ring .spr, .crown-btn.is-shine .crown__tw, .crown-btn.is-shine .crown__rays, .crown-btn.is-shine > .spr, .prop--squishy.is-wobble .spr { animation: none; }
  .peek-labubu { transition: none; }
  .prop--squishy .spr, .prop--squishy.is-hold .spr { transition: none; }
  .prop--squishy.is-hold .spr { scale: 1.15 0.8; }
  .prop--squishy.is-hold.is-full .spr { scale: 1.32 0.52; }
}
.prop--pink .spr { filter: hue-rotate(285deg) saturate(1.2) drop-shadow(0 5px 0 var(--drop)); }
.prop--pink .coin-pop .spr { filter: none; } /* הבלוק ורוד, המטבע שיוצא ממנו זהב */
.hero-cookie.is-no { animation: shake-c 360ms steps(6); }
@keyframes shake-c { 20% { translate: -5px 0; } 40% { translate: 5px 0; } 60% { translate: -4px 0; } 80% { translate: 3px 0; } }
.hero-cookie.is-love .spr { animation: love 700ms steps(4); }
@keyframes love { 50% { filter: drop-shadow(0 0 0 #f6a0b9) brightness(1.15); scale: 1.12; } }
/* הכיפה קטנה ושטוחה על הקודקוד. הסגנון של העוגייה מגדיל כל ציור שבתוכה, אז קובעים לה גודל משלה */
.hero-kip { position: absolute; top: 1px; left: 50%; translate: -50% 0; line-height: 0; pointer-events: none; z-index: 1; }
.hero-cookie .hero-kip .spr, .hall__hero .hero-kip .spr { width: 18px !important; height: auto !important; animation: none !important; filter: none; }
/* הכתר על הגג של בניין המשחקים, בצד השמאלי (מימין המזגן והאנטנה) */
.crown-btn { position: absolute; z-index: 6; top: 46px; left: calc(50% - 48px); border: 0; padding: 0; background: none; line-height: 0; cursor: pointer; }
.crown-btn .spr { filter: drop-shadow(0 2px 0 var(--drop)); }

/* כדורגל בעוגיות רעידת אדמה */
/* השער רחוק במגרש (קטן וגבוה יותר על הדשא), מאחורי העוגייה. כשהכדור נכנס הוא עובר מאחורי הרשת */
.ph__goal { position: absolute; z-index: 0; left: 4%; bottom: 24%; line-height: 0; transform-origin: 50% 100%; }
.ph__spr { z-index: 1; }
.ph__goal.is-in { z-index: 2; }
/* השוער הולך מצד לצד לפני הרשת (js/team.js), והתמונה היא כפתור בעיטה */
.ph__keeper { position: absolute; left: 50%; bottom: 0; translate: -50% 0; line-height: 0; }
.ph__keeper .spr { filter: drop-shadow(0 3px 0 rgba(20, 10, 30, 0.3)); }
.hero .ph[role='button'] { cursor: pointer; }
/* הכדור זז קצת הצידה, כדי שהשער והשוער (שתמיד שם עכשיו) לא יסתתרו מאחוריו */
.hero .ph[role='button'] .ph__spr { left: 64%; }
.hero .ph:focus-visible { outline: 4px solid var(--coin); outline-offset: -4px; }
.ph__gol.is-saved { z-index: 3; color: #fff8ec; } /* מעל הכדור שחוזר */
.ph__gol { position: absolute; inset-inline: 0; top: 14%; text-align: center; font-family: var(--f-display); font-weight: 900; font-size: 2.6rem; color: var(--coin); -webkit-text-stroke: 0.14em var(--line); paint-order: stroke fill; animation: boom 500ms var(--ease) both; } /* score() כבר מתוזמן לרגע הכניסה לרשת, אז בלי השהיה (אחרת נשאר כתם צהוב זעיר) */
.squishy-hide { position: absolute; inset-inline-end: 0; bottom: -4px; border: 0; padding: 0; background: none; line-height: 0; cursor: pointer; opacity: 0.85; }
.r-head { position: relative; }
.is-squish-once .spr { animation: squash 500ms steps(3); }
@keyframes squash { 30% { scale: 1.3 0.6; } }

/* הישג חינם שבורח */
.troll-zone { position: relative; height: 92px; margin: 14px 0 4px; }
.troll { position: absolute; top: 18px; left: calc(50% - 95px); padding: 10px 16px; border: 0; background: var(--coin); color: var(--line); box-shadow: var(--frame-drop); font-family: var(--f-display); font-weight: 900; font-size: 1.05rem; transition: left 160ms steps(3), top 160ms steps(3); }

/* הכותרת שמתחלפת להטבות איתי */
.sheet__head h2.is-glitch { animation: glitch 120ms steps(2) 6; }
.cookie-bar { border-radius: 0; background: var(--box); box-shadow: var(--frame-drop); }

/* ---------- מטבעות ודוכן הפרסים (js/shop.js) ---------- */
.hud-coins { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 44px; padding-inline: 10px 12px; border: 0; background: var(--box); color: var(--text); box-shadow: var(--frame-drop); font: 700 1.05rem var(--f-ui); margin-inline-start: 10px; cursor: pointer; }
.hud-coins .spr { width: 22px; height: auto; }
.hud-coins.is-bump .spr, .trophy.is-bump .spr { animation: bump 240ms steps(3); }
.coin-float { position: absolute; top: -6px; inset-inline-start: 50%; color: var(--coin); -webkit-text-stroke: 0.12em var(--line); paint-order: stroke fill; font-family: var(--f-display); font-weight: 900; animation: coin-up 900ms var(--ease) forwards; pointer-events: none; }
@keyframes coin-up { to { translate: 0 -26px; opacity: 0; } }

/* תחפושות על הדמות: בגודל משלהן (הסגנון של הדמות מגדיל כל ציור בתוכה), וקופצות יחד איתה */
.dress { position: absolute; z-index: 2; left: 50%; translate: -50% 0; line-height: 0; pointer-events: none; }
.hero-cookie .dress .spr { width: 26px !important; height: auto !important; animation: none !important; filter: none !important; }
.hero-cookie .dress--hat { top: -16px; }
.hero-cookie .dress--phones { top: -2px; }
.hero-cookie .dress--phones .spr { width: 50px !important; }
.hero-cookie .dress--cap { top: -6px; }
.hero-cookie .dress--face { top: 15px; }
.hero-cookie .dress--face .spr { width: 30px !important; }
.hero-cookie:has(.dress--hat) .hero-kip, .hall__hero:has(.dress--hat) .hero-kip { display: none; }
/* הכיפה הפוכה (neta-flip): הכובע יורד בינתיים, כדי שיראו אותה. חוזר כשנטע מתקנת אותה (is-fixing עד סוף הסיבוב) */
:is(.hero-cookie, .hall__hero, .shop-me):has(.hero-kip.is-upside, .hero-kip.is-fixing) .dress--hat { display: none; }
:is(.hero-cookie, .hall__hero, .shop-me):has(.hero-kip.is-upside, .hero-kip.is-fixing) .hero-kip:is(.is-upside, .is-fixing) { display: block; }
.is-gold > .spr { filter: sepia(1) saturate(4) hue-rotate(-12deg) brightness(1.12) drop-shadow(0 4px 0 var(--drop)) !important; }

/* מפת האוצר (js/shop.js): "!" גדול שפועם, וחץ פיקסלים שקופץ מעל המקום. צבעים קבועים: אותו סימן על דשא, בלילה ובאולם */
.has-tmark { z-index: 5; }
.tmark {
  position: absolute; z-index: 9; translate: -50% -100%; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding-bottom: 2px; pointer-events: none; line-height: 0;
}
.tmark__bang {
  display: grid; place-items: center; width: 38px; height: 38px; padding-top: 2px;
  background: #e5392b; color: #fff8ec; font: 900 1.9rem/1 var(--f-display);
  box-shadow: 0 -3px 0 0 #20142e, 0 3px 0 0 #20142e, -3px 0 0 0 #20142e, 3px 0 0 0 #20142e, 0 8px 0 0 rgba(20, 10, 30, 0.4), 0 0 0 7px rgba(255, 201, 60, 0.55);
  animation: tmark-pulse 760ms steps(2) infinite;
}
.tmark__arrow { animation: tmark-bounce 520ms steps(2) infinite; }
.tmark__arrow .spr { width: 30px; height: auto; filter: drop-shadow(0 3px 0 rgba(20, 10, 30, 0.4)); }
.tmark.is-below { translate: -50% 0; flex-direction: column-reverse; padding: 2px 0 0; }
.tmark.is-below .tmark__arrow .spr { rotate: 180deg; }
.tmark.is-below .tmark__arrow { animation-name: tmark-bounce-up; }
.tmark.is-found { animation: tmark-found 460ms steps(4) forwards; }
/* בצד של המקום (js/shop.js place: מעליו היה מכסה שם של שלב): החץ ליד הציור ומצביע אליו, וה־! אחריו */
.tmark.is-side { direction: ltr; flex-direction: row-reverse; translate: 0 -50%; padding: 0; }
.tmark.is-side.is-left { flex-direction: row; translate: -100% -50%; }
.tmark.is-side .tmark__arrow .spr { rotate: 90deg; }
.tmark.is-side.is-left .tmark__arrow .spr { rotate: -90deg; }
.tmark.is-side .tmark__arrow { animation-name: tmark-bounce-l; }
.tmark.is-side.is-left .tmark__arrow { animation-name: tmark-bounce-r; }
@keyframes tmark-bounce-l { 50% { translate: -7px 0; } }
@keyframes tmark-bounce-r { 50% { translate: 7px 0; } }
@keyframes tmark-pulse { 50% { scale: 1.18; box-shadow: 0 -3px 0 0 #20142e, 0 3px 0 0 #20142e, -3px 0 0 0 #20142e, 3px 0 0 0 #20142e, 0 8px 0 0 rgba(20, 10, 30, 0.4), 0 0 0 12px rgba(255, 201, 60, 0.35); } }
@keyframes tmark-bounce { 50% { translate: 0 7px; } }
@keyframes tmark-bounce-up { 50% { translate: 0 -7px; } }
@keyframes tmark-found { 40% { scale: 1.4; opacity: 1; } 100% { scale: 0.2; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tmark__bang, .tmark__arrow, .tmark.is-found { animation: none; } }

/* ספירה לאחור לפני 18:07 (מכונת הזמן, js/jokes.js): מספר פיקסלים ענק באמצע המסך */
.count67 { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; pointer-events: none; background: radial-gradient(circle, rgba(20, 10, 30, 0.38) 0 34%, transparent 62%); }
.count67 b {
  font: 900 clamp(11rem, 62vw, 22rem)/1 var(--f-display); color: #ffc93c;
  -webkit-text-stroke: 0.06em #20142e; paint-order: stroke fill; text-shadow: 0 0.06em 0 #20142e, 0 0.12em 0 rgba(20, 10, 30, 0.35);
  animation: count-pop 900ms steps(6) forwards;
}
.count67 b.is-1 { color: #e5392b; }
@keyframes count-pop { 0% { scale: 2.2; opacity: 0; } 20% { scale: 0.9; opacity: 1; } 32% { scale: 1.06; } 44%, 80% { scale: 1; opacity: 1; } 100% { scale: 0.8; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .count67 b { animation: none; } }

/* מצב דיסקו */
.disco-lights { position: fixed; inset: 0; z-index: 6; pointer-events: none; opacity: 0; mix-blend-mode: screen; transition: opacity 400ms;
  background: radial-gradient(circle at 20% 30%, #ff4fa3 0 8%, transparent 22%), radial-gradient(circle at 75% 25%, #4fd1ff 0 7%, transparent 20%), radial-gradient(circle at 50% 70%, #ffd84f 0 9%, transparent 24%), radial-gradient(circle at 85% 80%, #8f6bff 0 7%, transparent 20%); }
body.is-disco .disco-lights { opacity: 0.5; animation: disco 1.6s steps(4) infinite; }
/* האורות זזים בתוך המסך (background-position) ולא כל השכבה (translate), שלא תבלוט מהקצה */
@keyframes disco { 25% { filter: hue-rotate(90deg); background-position: 12px 0; } 50% { filter: hue-rotate(180deg); background-position: 0 24px; } 75% { filter: hue-rotate(270deg); background-position: -12px 0; } }
body.is-disco #map .prop .spr, body.is-disco #map .lvl__pad { animation: disco-bob 520ms steps(2) infinite; }
body.is-disco .hero-cookie .spr { animation: disco-spin 1s steps(4) infinite; }
@keyframes disco-bob { 50% { translate: 0 -5px; } }
@keyframes disco-spin { 50% { scale: -1 1; translate: 0 -6px; } }

/* הגיליון של הדוכן */
.shop-bal { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 6px; font: 900 2rem var(--f-display); color: var(--coin); -webkit-text-stroke: 0.1em var(--line); paint-order: stroke fill; }
.shop-intro { margin: 0 0 14px; color: var(--text-2); text-align: center; }
.shop-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.shop-item { display: grid; justify-items: center; align-content: start; gap: 6px; padding: 12px 10px; text-align: center; background: var(--box-2); box-shadow: var(--frame); }
.shop-item.is-mine { background: var(--gold-wash); }
.shop-item__art { height: 44px; display: grid; place-items: center; }
.shop-item b { font-family: var(--f-display); font-size: 1.05rem; }
.shop-item small { color: var(--text-2); font-size: 0.86rem; line-height: 1.35; }
.shop-item .primary, .shop-item .chip { width: 100%; height: 44px; font-size: 1rem; }
.shop-item [aria-disabled='true'], .shop-item [disabled] { filter: grayscale(0.7); opacity: 0.7; }
.shop-item [disabled] { font-size: 0.9rem; cursor: default; }
/* שלט "רמזים": לא נקנה כאן, רק מפנה לעמוד ההישגים */
.shop-item--info { background: var(--box); outline: 3px dashed var(--coin); outline-offset: -9px; }
.shop-item a.chip { display: grid; place-items: center; text-decoration: none; color: var(--text); font-size: 0.95rem; }
.shop-time { grid-column: 1 / -1; width: 100%; margin-top: 4px; }
.shop-time__row { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 6px; }
/* בראש הדוכן: הדמות שלכם (בגודל של הטירה) עם מה שמודדים, ולידה היתרה */
.shop-top { display: flex; align-items: flex-end; justify-content: center; gap: 22px; margin: 0 0 10px; padding-top: 40px; }
.shop-top .shop-bal { margin: 0 0 10px; }
.shop-me { position: relative; display: inline-block; line-height: 0; flex: none; }
.shop-me > .spr { filter: drop-shadow(0 5px 0 var(--drop)); }
.shop-me.is-hop { animation: hop-p 420ms steps(3); }
.shop-me .dress .spr { width: 32px !important; height: auto !important; animation: none !important; filter: none !important; }
.shop-me .dress--hat { top: -20px; }
.shop-me .dress--phones { top: -3px; }
.shop-me .dress--phones .spr { width: 62px !important; }
.shop-me .dress--cap { top: -8px; }
.shop-me .dress--face { top: 18px; }
.shop-me .dress--face .spr { width: 38px !important; }
.shop-me.is-char > .spr--char:not(.spr--fig) { width: 46px; height: 74px; }
.shop-me.is-char .dress--hat { top: -19px; }
.shop-me.is-char .dress--cap { top: -3px; }
.shop-me.is-char .dress--phones { top: 5px; }
.shop-me.is-char .dress--face { top: 26px; }
.shop-me.is-char .dress--face .spr { width: 34px !important; }
.shop-me .hero-kip { top: 2px; }
.shop-me .hero-kip .spr { width: 22px !important; height: auto !important; filter: none; }
.shop-me:has(.dress--hat) .hero-kip { display: none; }
/* הציור והשם של תחפושת הם כפתור מדידה */
.shop-item__try { display: grid; justify-items: center; gap: 6px; width: 100%; min-height: 44px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.shop-item__try:hover .shop-item__art .spr { animation: hop-p 420ms steps(3); }
.shop-item.is-try { box-shadow: var(--frame), 0 0 0 6px var(--coin); }
@media (prefers-reduced-motion: reduce) { .shop-me.is-hop, .shop-item__try:hover .shop-item__art .spr { animation: none; } }
.shop-time__row .chip { width: auto; height: 38px; padding-inline: 10px; font-size: 0.9rem; text-decoration: none; color: inherit; display: inline-grid; place-items: center; }

/* ---------- דמויות הצוות (js/chars.js) ---------- */
.hero-cookie.is-char .spr:not(.dress .spr):not(.hero-kip .spr) { width: 37px; height: 60px; }
/* דמות מצוירת (בלי תמונה) גבוהה מהקופסה: מרימים אותה כדי שהרגליים יעמדו על השביל */
.hero-cookie.is-char:not(.is-fig) > .spr { margin-top: -8px; }
.hero-cookie.is-char .dress--hat { top: -16px; }
.hero-cookie.is-char .dress--cap { top: -4px; }
.hero-cookie.is-char .dress--phones { top: 4px; }
.hero-cookie.is-char .dress--face { top: 21px; }
.hero-cookie.is-char .dress--face .spr { width: 28px !important; }
.hero-cookie.is-char .hero-kip { top: 2px; }
.chars-intro { margin: 0 0 12px; color: var(--text-2); text-align: center; }
.chars-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (min-width: 480px) { .chars-grid { grid-template-columns: repeat(4, 1fr); } }
.char-pick { width: 100%; display: grid; justify-items: center; gap: 4px; padding: 10px 4px 8px; border: 0; background: var(--box-2); color: var(--text); box-shadow: var(--frame); font: inherit; cursor: pointer; }
.char-pick__art { height: 64px; display: grid; place-items: end center; line-height: 0; }
.char-pick b { font-family: var(--f-display); font-size: 0.98rem; }
.char-pick.is-on { background: var(--coin); color: var(--line); }
.char-pick:hover .spr, .char-pick.is-on .spr { animation: idle 600ms steps(2) infinite; }

/* ההודעה שהסוף נפתח */
.finale-ready { position: fixed; inset: auto; margin: 0; border: 0; top: 50%; left: 50%; translate: -50% -50%; z-index: 120;
  padding: 18px 22px; background: var(--coin); color: var(--line); box-shadow: var(--frame-drop); text-decoration: none;
  font: 900 1.5rem var(--f-display); animation: boom 600ms var(--ease); }

.spr--fig { image-rendering: pixelated; background-repeat: no-repeat; background-position: 0 0; }

/* תחפושות על דמות מ־Gemini: לפי נקודות הראש שלה (js/chars.js: --fx מרכז, --ft קודקוד, --fe עיניים, --fw רוחב הראש).
   :is(...).is-fig.is-fig כדי לגבור על הגדלים הקבועים של העוגייה (גם אלה שב־arcade.css) */
:is(.hero-cookie, .hall__hero, .shop-me).is-fig.is-fig .dress,
:is(.hero-cookie, .hall__hero, .shop-me).is-fig.is-fig .hero-kip { left: var(--fx); }
:is(.hero-cookie, .hall__hero, .shop-me).is-fig.is-fig.is-flip .dress,
:is(.hero-cookie, .hall__hero, .shop-me).is-fig.is-fig.is-flip .hero-kip { left: var(--fxf); }
/* כובע מסיבה: יושב על הקודקוד */
:is(.hero-cookie, .hall__hero, .shop-me).is-fig.is-fig .dress--party { top: calc(var(--ft) + var(--fw) * 0.14); translate: -50% -100%; }
:is(.hero-cookie, .hall__hero, .shop-me).is-fig.is-fig .dress--party .spr { width: calc(var(--fw) * 0.62) !important; }
/* כובע שף: יורד קצת על המצח */
:is(.hero-cookie, .hall__hero, .shop-me).is-fig.is-fig .dress--chef { top: calc(var(--ft) + var(--fw) * 0.3); translate: -50% -100%; }
:is(.hero-cookie, .hall__hero, .shop-me).is-fig.is-fig .dress--chef .spr { width: calc(var(--fw) * 0.98) !important; }
/* מצחייה: הכיפה של הכובע לא במרכז הציור (המצחייה בולטת לצד), אז מזיזים */
:is(.hero-cookie, .hall__hero, .shop-me).is-fig.is-fig .dress--cap { top: calc(var(--ft) + var(--fw) * 0.34); translate: -42% -100%; }
:is(.hero-cookie, .hall__hero, .shop-me).is-fig.is-fig .dress--cap .spr { width: calc(var(--fw) * 1.18) !important; }
/* אוזניות: הקשת מעל הראש, האוזניות בגובה האוזניים (קצת מתחת לעיניים) */
:is(.hero-cookie, .hall__hero, .shop-me).is-fig.is-fig .dress--phones { top: calc(var(--ft) - var(--fw) * 0.06); translate: -50% 0; }
:is(.hero-cookie, .hall__hero, .shop-me).is-fig.is-fig .dress--phones .spr { width: calc(var(--fw) * 1.6) !important; }
/* משקפי שמש: על העיניים */
:is(.hero-cookie, .hall__hero, .shop-me).is-fig.is-fig .dress--shades { top: var(--fe); translate: -50% -45%; }
:is(.hero-cookie, .hall__hero, .shop-me).is-fig.is-fig .dress--shades .spr { width: calc(var(--fw) * 0.86) !important; }
/* כיפה: על הקודקוד, קצת מאחור */
:is(.hero-cookie, .hall__hero, .shop-me).is-fig.is-fig .hero-kip { top: calc(var(--ft) + var(--fw) * 0.1); translate: -50% -70%; }
:is(.hero-cookie, .hall__hero, .shop-me).is-fig.is-fig .hero-kip .spr { width: calc(var(--fw) * 0.5) !important; }

/* טלפון (עד 480): המונים מתכווצים, כדי שכפתורי הגופן, ההשתקה והמצב החשוך יישארו במסך */
@media (max-width: 480px) {
  .page-home .top .trophy, .hud-cookies, .hud-coins { padding-inline: 5px 7px; gap: 3px; font-size: 0.95rem; }
  .hud-cookies, .hud-coins { margin-inline-start: 3px; }
  .page-home .top { gap: 6px; }
}

/* ---------- מסך הצוות: מסך בחירת שחקנים. כל אחד בקופסה, עומד על בלוק דשא; אתם בקופסה הרחבה למעלה ---------- */
.page-team { background: var(--page); }
.team__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; padding-top: 8px; }
@media (min-width: 720px) { .team__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 22px; } }
@media (min-width: 1040px) { .team__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mate, .mate:last-child, .mate.is-me {
  position: relative; grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: start; text-align: center;
  margin: 0; padding: 14px 10px 16px; gap: 10px;
  border: 0; border-radius: 0; background: var(--box); box-shadow: var(--frame-drop);
}
.mate.is-me { grid-column: 1 / -1; grid-template-columns: 64px minmax(0, 1fr); justify-items: start; align-items: end; text-align: start; gap: 12px 16px; padding: 16px 16px 18px; background: var(--gold-wash); }
/* הבלוק שהדמות עומדת עליו */
.mate__fig { width: 64px; height: 68px; padding-bottom: 12px; position: relative; }
.mate__fig::after { content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 12px; background: linear-gradient(var(--grass) 0 4px, var(--dirt) 4px); box-shadow: var(--frame); }
.mate__fig .spr { position: relative; z-index: 1; }
.mate__name { justify-content: center; font-weight: 900; font-size: 1.35rem; }
.mate.is-me .mate__name { justify-content: start; font-size: 1.6rem; }
.mate__you { position: absolute; top: -12px; inset-inline-end: 12px; rotate: 4deg; padding: 3px 10px 4px; border-radius: 0; background: var(--red); color: #fff8ec; font-family: var(--f-display); font-weight: 900; font-size: 0.9rem; box-shadow: var(--frame); }
.mate__stat { display: grid; justify-items: center; gap: 2px; margin-top: 6px; color: var(--text-2); font-weight: 600; font-size: 0.9rem; }
.mate.is-me .mate__stat { justify-items: start; font-size: 1rem; }
.mate__stat > span { display: inline-flex; align-items: center; gap: 6px; }
.mate__stat .spr { display: block; }
.mate__stat > span + span::before { content: none; }
.mate__stat b { color: var(--text); font-weight: 900; }
.mate__badges, .mate.is-me .mate__badges { grid-column: 1 / -1; justify-content: center; gap: 8px; }
.mate.is-me .mate__badges { justify-content: start; }
@media (min-width: 720px) { .mate.is-me { grid-template-columns: 64px auto minmax(0, 1fr); } .mate.is-me .mate__badges { grid-column: 3; align-self: center; } }
.mate__badges .pb { filter: drop-shadow(0 3px 0 var(--drop)); }
/* כהה בשני המצבים: --line ולא --box, שבמצב כהה הוא בדיוק הצבע של האריח */
.mate__more { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 40px; padding: 4px 10px; border: 0; border-radius: 0; background: var(--line); color: var(--on-ink); font-weight: 700; font-size: 0.85rem; line-height: 1.2; text-wrap: balance; box-shadow: var(--frame); }
.mate__more .num { color: var(--coin); font-weight: 900; }
.team-msg { margin-top: 8px; padding: 28px 18px 30px; background: var(--box); box-shadow: var(--frame-drop); font-weight: 700; }
.team-msg .primary { margin-block-end: 9px; }
/* במפה: הצוות מחכה ליד בניין המשחקים (רק במכשיר מקושר), בצד ימין שלו. משמאל יורד השביל, ולמטה מימין עומדת המטריושקה:
   בטלפון הם עומדים קצת למעלה (רחוק יותר על הדשא), כדי שהבובות ייכנסו מתחתיהם */
.castle { position: relative; }
.team-sign { position: absolute; bottom: 74px; inset-inline-start: 0; display: grid; justify-items: center; gap: 6px; color: inherit; text-decoration: none; }
/* במסך רחב התא רחב מאוד: נשארים ליד הבניין (ברוחב 126), אחרי הבובות, ולא בקצה המסך */
@media (min-width: 720px) { .team-sign { inset-inline-start: auto; bottom: 30px; left: calc(50% + 150px); } }
.team-sign .prop__figs .fig-slot + .fig-slot { margin-inline-start: -14px; }
.team-sign .spr { filter: drop-shadow(0 5px 0 var(--drop)); transition: transform 140ms var(--ease); }
.team-sign:hover .spr { transform: translateY(-3px); }

/* ואם עדיין אין מקום (מסך צר, אלפי מטבעות): js/map.js fitTop מוריד דברים לפי הסדר, עד שהכל נכנס בשורה אחת:
   קודם ה"/60" של הגביע, אחר כך מונה העוגיות שנאפו (רק תצוגה, הדגלים במפה אומרים את אותו דבר), ובסוף מצמצם רווחים */
.page-home .top.fit-no-of .trophy__of, .page-home .top.fit-no-cookies .hud-cookies { display: none; }
.page-home .top.fit-squeeze { gap: 4px; }
.page-home .top.fit-squeeze :is(.trophy, .hud-coins) { padding-inline: 4px 5px; gap: 2px; font-size: 0.88rem; margin-inline-start: 0; }

/* כפתור ההשתקה: רמקול בפיקסלים */
.mute-btn .spr, .ar-btn[data-mute-toggle] .spr { width: 28px; height: 24px; }