/* ============================================================
   בעל הבית · שכבת עיצוב משחק
   מסגרת אפליקציה: גובה מסך נעול, גלילה רק בתוך אזור התוכן,
   HUD קבוע למעלה, ניווט משחק קבוע למטה.
   ============================================================ */
:root{
  --bg:#FFF3E2;
  --bg-deep:#F6E7CE;
  --card:#FFFFFF;
  --ink:#241F19;
  --muted:#6E6357;
  --line:rgba(36,31,25,.10);
  --green:#2F8F5B;
  --green-d:#1F6B42;
  --green-hi:#43B876;
  --gold:#E9A83B;
  --gold-d:#C9861B;
  --tomato:#E2563F;
  --sky:#2E86C7;
  --coin:linear-gradient(180deg,#FFD978,#E9A83B);
  --shadow:0 10px 30px rgba(80,58,26,.12);
  --shadow-sm:0 4px 14px rgba(80,58,26,.10);
  --r-lg:22px;
  --r-md:16px;
  --nav-h:66px;
  --hud-h:64px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{height:100%}
body{
  margin:0;
  font-family:'Noto Sans Hebrew','Segoe UI',system-ui,sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.5;
  overflow:hidden;
  overscroll-behavior:none;
  -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;
  user-select:none;
  touch-action:manipulation;
}
h1,h2,h3{margin:0;line-height:1.2}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
button{font-family:inherit;font-size:inherit;color:inherit;cursor:pointer;touch-action:manipulation}
img,svg{max-width:100%}
[hidden]{display:none !important}
:focus-visible{outline:3px solid var(--sky);outline-offset:2px;border-radius:8px}

/* רקע במה לדסקטופ, המשחק עצמו עמודת טלפון ממורכזת */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(90% 60% at 85% 0%,#FFE0AC 0%,rgba(255,224,172,0) 55%),
    radial-gradient(80% 60% at 10% 100%,#D8EEDF 0%,rgba(216,238,223,0) 55%),
    repeating-linear-gradient(45deg,rgba(233,168,59,.05) 0 22px,transparent 22px 44px),
    var(--bg-deep);
}

/* ============ מסגרת האפליקציה ============ */
.app{
  position:relative;
  height:100dvh;
  max-width:520px;
  margin-inline:auto;
  display:flex;
  flex-direction:column;
  background:var(--bg);
  overflow:hidden;
}
@media (min-width:560px){
  .app{
    height:min(920px,100dvh);
    margin-block:calc((100dvh - min(920px,100dvh))/2);
    border-radius:28px;
    box-shadow:0 30px 80px rgba(60,40,10,.28),0 0 0 1px rgba(36,31,25,.06);
  }
}

/* ============ HUD עליון ============ */
/* הכסף הוא הכוכב: גדול, ממורכז באמצע ההדר. התגיות בצד, הסאונד בצד השני */
.hud{
  flex:none;
  min-height:var(--hud-h);
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:6px;
  padding:10px 14px 8px;
  background:linear-gradient(180deg,#FFF8EC,#FFF3E2);
  border-block-end:1px solid var(--line);
  position:relative;
  z-index:20;
}
.hud-main{
  grid-column:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  min-width:0;
}
/* תא ברוחב קבוע לסכום: הספרות אחידות ברוחב והתא לא מתכווץ,
   כך שמעבר מאלף למיליון או למיליארד לא מזיז אף אלמנט סמוך */
.hud-money{
  font-size:clamp(1.5rem,7vw,2rem);
  font-weight:800;
  color:var(--green-d);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  line-height:1.12;
  white-space:nowrap;
  display:block;
  min-inline-size:8ch;
  text-align:center;
}
.hud-money.bump{animation:moneyPop .25s ease}
.hud-rate{
  font-size:.82rem;
  font-weight:600;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  white-space:nowrap;
  display:block;
  min-inline-size:9ch;
  text-align:center;
}
.hud-tags{
  grid-column:1;
  justify-self:start;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  min-width:0;
}
.hud .sound-btn{grid-column:3;justify-self:end}
/* תגית מחיר המכירה יושבת בפינה התחתונה של הסצנה, כדי שהשלט של העסק
   יקבל את מרכז החלק העליון ושתי התגיות לא יתנגשו */
.price-chip{
  position:absolute;
  bottom:10px;
  inset-inline-end:10px;
  z-index:9;
  box-shadow:0 3px 10px rgba(80,58,26,.18);
  pointer-events:none;
}
/* בזמן קומבו התגית מציגה את המחיר האמיתי לכל מכירה, ולכן מודגשת */
.price-chip.is-combo{
  border-color:rgba(47,143,91,.45);
  background:#EDF8F1;
  box-shadow:0 3px 10px rgba(31,107,66,.22);
}
.price-chip.is-combo b{color:var(--green-d)}
.hud-city{
  font-size:.86rem;
  font-weight:800;
  color:var(--green-d);
  background:#E7F3EB;
  border-radius:999px;
  padding:3px 12px;
  white-space:nowrap;
}
.hud-mini{
  background:#fff;
  border:1px solid var(--line);
  border-radius:999px;
  padding:5px 12px;
  font-size:.78rem;
  color:var(--muted);
  box-shadow:var(--shadow-sm);
  white-space:nowrap;
}
.hud-mini b{color:var(--ink)}
.sound-btn{
  flex:none;
  width:38px;height:38px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  font-size:1.05rem;
  line-height:1;
  box-shadow:0 2px 0 rgba(36,31,25,.08);
  transition:transform .1s ease;
}
.sound-btn:active{transform:translateY(1px)}

/* ============ הבמה, תמיד בהישג אגודל ============ */
.stage{
  flex:none;
  position:relative;
  padding:10px 14px 0;
  z-index:5;
}
/* כל תיבת התפאורה היא אזור מכירה לחיץ, ולא רק האייקון שמתחתיה */
.scene-box{
  position:relative;
  height:clamp(140px,24dvh,215px);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--shadow);
  background:var(--bg-deep);
  cursor:pointer;
  touch-action:manipulation;
  -webkit-user-select:none;
  user-select:none;
}
/* שלט העסק על תפאורה מצוירת, נושא את השם שהשחקן בחר */
.scene-sign{
  position:absolute;
  top:9px;
  inset-inline:0;
  z-index:9;
  margin-inline:auto;
  width:max-content;
  max-inline-size:min(78%,260px);
  display:flex;
  align-items:center;
  gap:8px;
  padding:5px 13px;
  border-radius:12px;
  background:linear-gradient(180deg,#FFFDF6,#FFF3DC);
  border:2px solid rgba(201,134,27,.5);
  box-shadow:0 4px 12px rgba(80,58,26,.28);
  pointer-events:none;
}
.scene-sign-name{
  font-size:.92rem;
  font-weight:900;
  color:var(--green-d);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
}
.scene-sign-open{
  flex:none;
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:.6rem;
  font-weight:800;
  color:#fff;
  background:var(--green);
  border-radius:999px;
  padding:2px 7px;
}
@media (max-width:340px){
  .scene-sign-name{font-size:.82rem}
  .scene-sign{max-inline-size:86%}
}
.scene-box.bump{animation:sceneBump .18s ease}
.scene{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.scene-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 62%;
  transition:filter .8s ease;
  animation:kenburns 26s ease-in-out infinite alternate;
  transform-origin:55% 62%;
}

/* ============ רצועת הפריטים שנרכשו ============
   כל שדרוג שנקנה מונח כאייקון על התפאורה, בסלוט קבוע לפי סדר הרכישה.
   הרצועה נעוצה לתחתית הסצנה, מעל תגית המחיר וכפתור המכירה, ומטפסת
   כלפי מעלה כשנגמר המקום. הכל בתכונות לוגיות בלבד. */
.scene-items{
  position:absolute;
  z-index:8;
  inset-inline:9px;
  /* הגובה נמדד בקוד: הרצועה מונחת מעל תגית המחיר ומעל כפתור המכירה
     שנכנס לתחתית הסצנה, כך שאף אייקון לא נחבא מאחוריהם */
  inset-block-end:var(--items-bottom,46px);
  inline-size:fit-content;
  max-inline-size:calc(100% - 18px);
  margin-inline:auto;
  display:flex;
  flex-wrap:wrap-reverse;
  align-content:flex-end;
  align-items:flex-start;
  justify-content:center;
  gap:clamp(2px,.9vw,5px);
  padding-block:4px;
  padding-inline:clamp(6px,2vw,10px);
  border-radius:999px;
  background:rgba(255,255,255,.74);
  border:1px solid rgba(255,255,255,.92);
  box-shadow:0 4px 14px rgba(60,42,14,.2);
  pointer-events:none;
}
.scene-items:empty{display:none}
.scene-item{
  flex:0 0 auto;
  inline-size:var(--item-size,clamp(19px,6vw,30px));
  block-size:var(--item-size,clamp(19px,6vw,30px));
  object-fit:contain;
  object-position:bottom center;
  opacity:1;
  filter:drop-shadow(0 1px 2px rgba(38,25,8,.35));
}
/* אנימציית ההופעה רצה רק על פריט שהרגע נקנה, והיא תוספת בלבד:
   ברירת המחדל של הפריט היא גלוי, כך שגם אם האנימציה לא רצה הוא נראה מיד */
.scene-item.is-new{animation:itemPop .46s cubic-bezier(.18,1.1,.4,1)}
@keyframes itemPop{
  0%{opacity:0;transform:translateY(9px) scale(.35)}
  55%{opacity:1;transform:translateY(-3px) scale(1.14)}
  100%{opacity:1;transform:none}
}

/* שכבת החיים מעל האיור: שמש נושמת, עננים, ציפורים, נצנוצים על הדוכן */
.scene-fx{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.fx-sun{
  position:absolute;
  top:-18%;
  right:-6%;
  width:58%;
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,216,122,.5) 0%,rgba(255,216,122,.18) 42%,transparent 65%);
  animation:sunPulse 6s ease-in-out infinite;
}
.fx-cloud{
  position:absolute;
  background:rgba(255,255,255,.75);
  border-radius:50%;
  filter:blur(7px);
}
.fx-c1{top:4%;width:26%;height:9%;animation:cloudDrift 70s linear infinite}
.fx-c2{top:14%;width:18%;height:7%;opacity:.6;animation:cloudDrift 95s linear -40s infinite}
.fx-bird{
  position:absolute;
  width:22px;
  height:11px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M1 9 Q6 2 12 8 Q18 2 23 9' fill='none' stroke='%234A4238' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.fx-b1{top:11%;animation:birdFly 26s linear 3s infinite}
.fx-b2{top:18%;width:16px;animation:birdFly 34s linear 17s infinite}
.fx-spark{
  position:absolute;
  width:7px;height:7px;
  border-radius:50%;
  background:radial-gradient(circle,#FFF3C4 0%,#FFD978 55%,transparent 75%);
  animation:sparkle 2.4s ease-in-out infinite;
}
.fx-s1{top:30%;left:44%}
.fx-s2{top:26%;left:56%;animation-delay:.8s}
.fx-s3{top:38%;left:50%;animation-delay:1.6s}

/* הבזק חגיגי בסצנה כשקונים שדרוג */
.scene-box.cheer::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 55%,rgba(255,216,122,.55),transparent 60%);
  animation:cheerFlash .5s ease-out forwards;
  pointer-events:none;
}
/* שלט המבנה נעלם כשנדלק השילוט המואר, כדי שהשם לא יופיע פעמיים על אותה חזית */
.scene .sign-plain{transition:opacity .45s ease}
.scene.has-g3 .sign-plain{opacity:0}
.layer{opacity:0;transform:translateY(8px);transition:opacity .55s ease,transform .55s ease}
.scene.has-g0 .layer-g0,.scene.has-g1 .layer-g1,.scene.has-g2 .layer-g2,
.scene.has-g3 .layer-g3,.scene.has-g4 .layer-g4,.scene.has-g5 .layer-g5,
.scene.has-g6 .layer-g6,.scene.has-g7 .layer-g7,
.scene.has-c1 .layer-cust1,.scene.has-c2 .layer-cust2,.scene.has-c3 .layer-cust3{opacity:1;transform:none}

.tap{
  display:grid;
  place-items:center;
  margin:-46px auto 0;
  width:clamp(96px,26vw,120px);
  aspect-ratio:1;
  border:0;
  border-radius:50%;
  padding:0;
  background:radial-gradient(circle at 50% 32%,#FFFFFF,#FFEECD 78%);
  box-shadow:
    0 6px 0 #D9B980,
    0 14px 26px rgba(120,84,30,.30),
    0 0 0 5px rgba(255,255,255,.95),
    0 0 0 7px rgba(47,143,91,.22);
  position:relative;
  z-index:6;
  transition:transform .08s ease;
}
.tap:active{transform:translateY(4px) scale(.97);box-shadow:0 2px 0 #D9B980,0 8px 18px rgba(120,84,30,.26),0 0 0 5px rgba(255,255,255,.95),0 0 0 7px rgba(47,143,91,.22)}
.tap.is-hit{animation:tapShake .2s ease}
.tap-art{display:grid;place-items:center;width:76%}
.tap-art svg{width:100%;height:auto}
.tap-art img{
  width:118%;
  height:auto;
  border-radius:50%;
  pointer-events:none;
}
.tap-emoji{font-size:clamp(42px,11vw,54px);line-height:1}
.tap-hint{
  display:block;
  text-align:center;
  margin-top:6px;
  font-size:.78rem;
  font-weight:700;
  color:var(--muted);
}
/* ============ מד הקומבו של המכירה האקטיבית ============ */
/* תגית המכפיל יושבת על כפתור המכירה עצמו, כדי שהיא תמיד בשדה הראייה של האגודל */
.tap-combo{
  position:absolute;
  top:-8px;
  inset-inline-end:-10px;
  min-width:36px;
  padding:3px 9px;
  border-radius:999px;
  background:linear-gradient(180deg,var(--green-hi),var(--green-d));
  color:#fff;
  font-size:.86rem;
  font-weight:900;
  line-height:1.25;
  font-variant-numeric:tabular-nums;
  box-shadow:0 3px 10px rgba(31,107,66,.38),0 0 0 3px rgba(255,255,255,.95);
  z-index:7;
  pointer-events:none;
}
.tap-combo.is-high{background:linear-gradient(180deg,#FFD978,var(--gold-d));color:#3B2A08}
.tap-combo.is-up{animation:comboPop .38s ease}

.combo{
  position:relative;
  z-index:9;   /* מעל הטקסטים הצפים, כדי שהמד יישאר קריא גם באמצע רצף לחיצות */
  margin:8px auto 0;
  max-width:360px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:7px 12px 9px;
  box-shadow:var(--shadow-sm);
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.combo-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-block-end:6px;
}
.combo-badge{
  flex:none;
  border-radius:999px;
  padding:3px 11px;
  font-size:.78rem;
  font-weight:800;
  color:var(--muted);
  background:#F2EADC;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  transition:background .2s ease,color .2s ease;
}
.combo-next{
  font-size:.72rem;
  font-weight:700;
  color:var(--muted);
  text-align:end;
  min-width:0;
  font-variant-numeric:tabular-nums;
}
.combo-bar{
  height:8px;
  border-radius:999px;
  background:#F0E7D8;
  overflow:hidden;
}
.combo-fill{
  display:block;
  height:100%;
  width:0;
  border-radius:999px;
  background:linear-gradient(90deg,var(--green),var(--green-hi));
  transition:width .16s ease,background .2s ease;
}
/* רצף שהתחיל אבל עוד לא הגיע לקומבו */
.combo[data-state="hot"] .combo-badge{background:#E7F3EB;color:var(--green-d)}
/* קומבו פעיל */
.combo[data-state="on"]{border-color:rgba(47,143,91,.4);box-shadow:0 0 0 3px rgba(47,143,91,.12),var(--shadow-sm)}
.combo[data-state="on"] .combo-badge{background:linear-gradient(180deg,var(--green-hi),var(--green));color:#fff}
.combo[data-state="on"] .combo-next{color:var(--green-d)}
/* דרגות גבוהות עוברות לזהב */
.combo[data-state="on"][data-tier="high"]{border-color:rgba(201,134,27,.45);box-shadow:0 0 0 3px rgba(233,168,59,.16),var(--shadow-sm)}
.combo[data-state="on"][data-tier="high"] .combo-badge{background:linear-gradient(180deg,#FFD978,var(--gold-d));color:#3B2A08}
.combo[data-state="on"][data-tier="high"] .combo-next{color:var(--gold-d)}
.combo[data-state="on"][data-tier="high"] .combo-fill{background:linear-gradient(90deg,var(--gold-d),#FFD978)}
/* הקומבו נשבר, רמז אדום שנשאר קריא גם בלי אנימציה */
.combo[data-state="broken"]{border-color:rgba(226,86,63,.5);background:#FFF4F1;box-shadow:0 0 0 3px rgba(226,86,63,.12),var(--shadow-sm)}
.combo[data-state="broken"] .combo-badge{background:#FBDDD6;color:#A8331F}
.combo[data-state="broken"] .combo-next{color:#A8331F}
.combo[data-state="broken"] .combo-bar{background:#FBDDD6}
.combo.is-up{animation:comboPop .38s ease}

.floats{position:absolute;inset:0;pointer-events:none;z-index:8;overflow:visible}
.float{
  position:absolute;
  inset-inline-start:0;
  inset-block-start:0;
  translate:var(--fx,0) var(--fy,0);
  font-weight:900;
  font-size:1.02rem;
  color:var(--green-d);
  text-shadow:0 2px 6px rgba(255,255,255,.95);
  animation:floatUp .85s ease-out forwards;
  white-space:nowrap;
  text-align:center;
}
.float .float-unit{display:block;font-size:.7rem;font-weight:700;color:var(--muted)}
.float.is-combo{font-size:1.2rem;color:var(--gold-d)}
.float.is-combo .float-unit{color:var(--gold-d)}
.coin{
  position:fixed;
  z-index:70;
  width:22px;height:22px;
  border-radius:50%;
  background:var(--coin);
  box-shadow:inset 0 -3px 0 rgba(150,95,10,.45),0 2px 6px rgba(120,84,30,.35);
  pointer-events:none;
  display:grid;place-items:center;
  font-size:12px;font-weight:900;color:#8A5B08;
  animation:coinFly .55s cubic-bezier(.3,.6,.4,1) forwards;
}

/* ============ אזור התוכן, הגלילה היחידה ============ */
.content{
  flex:1;
  min-height:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding:12px 14px calc(var(--nav-h) + env(safe-area-inset-bottom,0px) + 18px);
  scrollbar-width:thin;
}

/* פס נתונים קטן */
.sales{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:8px 6px;
  box-shadow:var(--shadow-sm);
  margin-block-end:12px;
}
.sale-stat{display:flex;flex-direction:column;align-items:center;gap:1px;text-align:center;min-width:0}
.sale-stat + .sale-stat{border-inline-start:1px solid var(--line)}
.sale-num{font-size:clamp(.95rem,4vw,1.15rem);font-weight:900;color:var(--green-d);font-variant-numeric:tabular-nums;line-height:1.15}
.sale-cap{font-size:.64rem;font-weight:700;color:var(--muted);line-height:1.25}

.biz-head{text-align:center;margin-block-end:10px}
.biz-name{font-size:1.15rem;font-weight:900;color:var(--green-d)}
.biz-sub{font-size:.78rem;color:var(--muted);margin-top:1px}
.biz-rename{
  margin-top:7px;
  border:1px solid var(--line);
  background:#fff;
  border-radius:999px;
  padding:5px 13px;
  font-size:.72rem;
  font-weight:800;
  color:var(--muted);
  box-shadow:var(--shadow-sm);
  transition:transform .1s ease,color .15s ease;
}
.biz-rename:hover{color:var(--ink)}
.biz-rename:active{transform:translateY(1px)}

.sec-head{margin-block:2px 12px;text-align:center}
.sec-title{font-size:1.2rem;font-weight:900;color:var(--green-d)}
.sec-sub{font-size:.78rem;color:var(--muted);margin-top:3px}

/* לשוניות שדרוגים, דביקות בתוך הגלילה */
.tabs{
  position:sticky;
  top:0;
  z-index:10;
  display:flex;
  gap:6px;
  margin-block:2px 12px;
  background:#F1E0C4;
  border-radius:999px;
  padding:4px;
  box-shadow:var(--shadow-sm);
}
.tab{
  flex:1;
  border:0;
  background:transparent;
  border-radius:999px;
  padding-block:9px;
  font-weight:800;
  font-size:.88rem;
  color:var(--muted);
  transition:background-color .2s ease,color .2s ease,box-shadow .2s ease;
}
.tab.is-active{background:#fff;color:var(--green-d);box-shadow:var(--shadow-sm)}

/* ============ בוסטים ============ */
.boosts{margin-block:2px 12px;display:flex;flex-direction:column;gap:8px}
.boost-live{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:10px;
  padding:9px 12px;
  border-radius:var(--r-md);
  background:linear-gradient(180deg,#FFF6E1,#FFEFCE);
  border:1px solid rgba(201,134,27,.4);
  box-shadow:0 0 0 3px rgba(233,168,59,.14),var(--shadow-sm);
}
.boost-live-ico{font-size:1.2rem;line-height:1}
.boost-live-body{display:flex;flex-direction:column;min-width:0}
.boost-live-title{font-size:.86rem;font-weight:900;color:#8A5B08}
.boost-live-sub{font-size:.7rem;font-weight:700;color:var(--muted)}
.boost-live-time{
  font-size:1rem;
  font-weight:900;
  color:#8A5B08;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  background:#fff;
  border-radius:999px;
  padding:4px 11px;
  box-shadow:var(--shadow-sm);
  white-space:nowrap;
}
.boost-grid{display:flex;flex-direction:column;gap:8px}
.boost-card{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:11px;
  inline-size:100%;
  text-align:start;
  padding:11px 12px;
  border-radius:var(--r-md);
  border:1px solid var(--line);
  background:var(--card);
  box-shadow:var(--shadow-sm);
  cursor:pointer;
  transition:transform .12s ease,box-shadow .2s ease,border-color .2s ease;
}
.boost-card:active{transform:translateY(2px)}
.boost-card:disabled{opacity:.6;cursor:default;transform:none}
.boost-card.is-pay{border-color:rgba(201,134,27,.35);background:linear-gradient(180deg,#FFFDF6,#FFF7E7)}
.boost-card.is-ad{border-color:rgba(46,134,199,.28);background:linear-gradient(180deg,#FCFEFF,#F1F8FD)}
.boost-card.is-on{box-shadow:0 0 0 3px rgba(47,143,91,.14),var(--shadow-sm);border-color:rgba(47,143,91,.42)}
.boost-ico{font-size:1.45rem;line-height:1}
.boost-card-body{display:flex;flex-direction:column;min-width:0}
.boost-card-title{font-size:.92rem;font-weight:900;color:var(--ink)}
.boost-card-sub{font-size:.74rem;color:var(--muted);font-weight:600;margin-top:1px}
.boost-tag{
  border-radius:999px;
  padding:6px 12px;
  font-size:.82rem;
  font-weight:900;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.boost-tag-price{background:linear-gradient(180deg,#FFD978,var(--gold-d));color:#3B2A08;box-shadow:0 2px 0 #A96B10}
.boost-tag-free{background:#E7F3EB;color:var(--green-d);border:1px solid rgba(47,143,91,.3)}
/* תגית הבוסט בהדר, מתחת לשם העיר */
.hud-boost{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:.72rem;
  font-weight:800;
  color:#8A5B08;
  background:linear-gradient(180deg,#FFF0CE,#FFE3A9);
  border-radius:999px;
  padding:2px 9px;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}
.hud-boost b{font-weight:900}
.hud-rate.is-boost{color:#8A5B08;font-weight:800}

/* ============ חלונית קנייה ופרסומת ============ */
.pay-list{
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:6px;
  text-align:start;
  font-size:.82rem;
  color:var(--muted);
  font-weight:600;
}
.pay-list li{position:relative;padding-inline-start:22px}
.pay-list li::before{
  content:"✓";
  position:absolute;
  inset-inline-start:0;
  top:0;
  color:var(--green);
  font-weight:900;
}
.pay-price{margin-top:14px;display:flex;flex-direction:column;align-items:center;gap:1px}
.pay-price b{font-size:1.6rem;font-weight:900;color:var(--green-d);font-variant-numeric:tabular-nums}
.pay-price-note{font-size:.72rem;color:var(--muted);font-weight:700}
.pay-note{margin-top:12px;font-size:.7rem;color:var(--muted);line-height:1.5}
.modal-card.is-ad{max-inline-size:380px}
.ad-slot{
  margin-top:14px;
  position:relative;
  display:grid;
  place-items:center;
  min-block-size:158px;
  border-radius:var(--r-md);
  border:1px dashed rgba(36,31,25,.22);
  background:linear-gradient(160deg,#F3F8FC,#E9F1F7);
  cursor:pointer;
  overflow:hidden;
}
.ad-slot:focus-visible{outline:3px solid rgba(46,134,199,.5);outline-offset:2px}
.ad-slot.is-playing{border-style:solid;border-color:rgba(46,134,199,.35)}
.ad-label{
  position:absolute;
  top:8px;
  inset-inline-start:8px;
  font-size:.62rem;
  font-weight:800;
  color:#5E7B8E;
  background:rgba(255,255,255,.9);
  border-radius:999px;
  padding:2px 8px;
}
.ad-creative{display:flex;flex-direction:column;align-items:center;gap:3px;padding:16px}
.ad-creative-ico{font-size:2.1rem;line-height:1}
.ad-creative-title{font-size:.95rem;font-weight:900;color:#37536A}
.ad-creative-sub{font-size:.72rem;color:#6E8394;font-weight:600}
.ad-bar{
  margin-top:10px;
  block-size:8px;
  border-radius:999px;
  background:#EDE3D0;
  overflow:hidden;
}
.ad-fill{
  display:block;
  block-size:100%;
  inline-size:0%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--green),var(--green-hi));
  transition:inline-size .12s linear;
}
.modal-card.is-ad .modal-sub{margin-top:8px}
.modal-card.is-ad .modal-actions{margin-top:14px}
.modal-card.is-ad .btn-primary{margin-top:0}
.btn-primary:disabled{opacity:.55;box-shadow:none;cursor:default}

/* ============ כרטיסים ============ */
.cards{display:flex;flex-direction:column;gap:10px}
.card{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:12px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:12px;
  box-shadow:var(--shadow-sm);
  animation:cardIn .35s ease both;
}
.card-icon{
  width:46px;height:46px;
  border-radius:14px;
  background:linear-gradient(180deg,#FFF7E6,#F4E8D2);
  border:1px solid rgba(36,31,25,.06);
  display:grid;place-items:center;
  font-size:1.45rem;line-height:1;
  box-shadow:inset 0 -3px 0 rgba(36,31,25,.05);
}
.card-icon-art{
  padding:0;
  background:#fff;
  overflow:hidden;
}
.card-icon-art img{
  width:100%;
  height:100%;
  object-fit:cover;
  pointer-events:none;
}
.card-body{min-width:0}
.card-title{font-size:.95rem;font-weight:800;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.card-desc{font-size:.76rem;color:var(--muted);margin-top:1px}
.card-meta{font-size:.74rem;color:var(--green);font-weight:800;margin-top:3px;font-variant-numeric:tabular-nums}

/* כפתור קנייה עם מילוי התקדמות לעבר המחיר */
.card-buy{
  position:relative;
  overflow:hidden;
  border:0;
  border-radius:13px;
  padding:11px 12px;
  min-width:96px;
  font-weight:800;
  font-size:.85rem;
  color:#9C8F7C;
  background:#EFE7D7;
  box-shadow:inset 0 0 0 1px rgba(36,31,25,.08);
  font-variant-numeric:tabular-nums;
  transition:transform .1s ease,box-shadow .15s ease,color .15s ease;
}
.card-buy .buy-fill{
  position:absolute;
  inset-block:0;
  inset-inline-start:0;
  width:0%;
  background:linear-gradient(180deg,rgba(233,168,59,.38),rgba(233,168,59,.22));
  transition:width .25s ease;
  pointer-events:none;
}
.card-buy .buy-label{position:relative;z-index:1;display:block}
.card-buy.can{
  color:#fff;
  background:linear-gradient(180deg,#3FB374,#26794C);
  box-shadow:0 4px 0 #1C5A37,0 8px 16px rgba(47,143,91,.30);
  animation:readyPulse 1.6s ease-in-out infinite;
}
.card-buy.can .buy-fill{display:none}
.card-buy.can:active{transform:translateY(3px);box-shadow:0 1px 0 #1C5A37;animation:none}
.card-buy:disabled{cursor:default}
.card-buy.is-done{
  background:#E7F3EB;color:var(--green-d);box-shadow:inset 0 0 0 1px rgba(47,143,91,.25);animation:none;
}
.card-buy.is-done .buy-fill{display:none}
/* המתנה בין השתלטות להשתלטות, ספירה לאחור על הכפתור */
.card-buy.is-wait{
  background:#F2E9DA;color:#A8794B;box-shadow:inset 0 0 0 1px rgba(201,162,39,.35);animation:none;
}
.card-buy.is-wait .buy-fill{display:none}
.card-side{display:flex;flex-direction:column;align-items:center;gap:4px}
.card-count{
  min-width:34px;
  text-align:center;
  font-weight:900;
  font-size:.95rem;
  color:var(--gold-d);
  background:#FFF3D8;
  border-radius:999px;
  padding:1px 8px;
  box-shadow:inset 0 0 0 1px rgba(201,134,27,.25);
}
.card-locked{opacity:.85;background:linear-gradient(180deg,#FFFDF7,#FFF4E0);border-style:dashed}
.badge{background:var(--gold);color:#fff;border-radius:999px;padding:2px 9px;font-size:.66rem;font-weight:800}
.pill{color:#fff;border-radius:999px;padding:2px 9px;font-size:.66rem;font-weight:800;background:#8C8272}
.pill-mine{background:var(--green)}
.pill-now{background:var(--gold)}
.pill-lock{background:#B3A895}

/* ============ טריטוריה ============ */
.terr-map{
  background:#FBF3E4;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:8px;
  box-shadow:var(--shadow-sm);
}
.map-svg{display:block;width:100%;height:auto}
.map-name{font-family:'Noto Sans Hebrew',sans-serif;font-size:12px;font-weight:800;fill:#241F19}
.map-owner{font-family:'Noto Sans Hebrew',sans-serif;font-size:9.5px;font-weight:700}
.map-tile.is-mine{filter:drop-shadow(0 3px 6px rgba(47,143,91,.25))}
.rival-row{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.rival-chip{
  display:inline-flex;align-items:center;gap:6px;
  background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:4px 11px;font-size:.74rem;font-weight:700;color:var(--muted);
  box-shadow:var(--shadow-sm);
}
.rival-chip i{width:9px;height:9px;border-radius:50%;display:inline-block}
.rival-chip b{color:var(--ink);font-size:.78rem}
.rival-chip.is-mine{color:var(--green-d);border-color:rgba(47,143,91,.35)}
.rival-chip.is-out{opacity:.45;text-decoration:line-through}
.share{margin-block:10px 14px;height:12px;border-radius:999px;background:#EFE3CE;overflow:hidden;box-shadow:inset 0 1px 3px rgba(36,31,25,.12)}
.share-fill{
  display:block;height:100%;
  background:linear-gradient(90deg,#43B876,#26794C);
  border-radius:999px;transition:width .4s ease;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.12);
}
.card-dist.is-next{border-color:rgba(233,168,59,.65);box-shadow:0 6px 18px rgba(233,168,59,.22)}
.card-dist.is-mine{background:linear-gradient(180deg,#F7FCF8,#EDF7F0)}

/* ============ מפת הארץ ============ */
.israel-box{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  background:#FBF3E4;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:14px;box-shadow:var(--shadow-sm);margin-block-end:14px;
}
.israel{display:block;width:auto;height:clamp(220px,32dvh,300px)}
.il-land{fill:#F0E4CC;stroke:#DCCBA8;stroke-width:2}
.il-water{fill:#BFDCEA}
.pin{fill:#B3A895;transition:fill .3s ease}
.pin-halo{fill:transparent}
.pin-label{font-family:'Noto Sans Hebrew',sans-serif;font-size:11px;font-weight:700;fill:#8A7F6E}
.city-pin.is-done .pin{fill:#2F8F5B}
.city-pin.is-done .pin-label{fill:#227046}
.city-pin.is-now .pin{fill:#E9A83B}
.city-pin.is-now .pin-halo{fill:rgba(233,168,59,.22);animation:pulse 2s ease-in-out infinite}
.city-pin.is-now .pin-label{fill:#B07D19}
/* ערי ההרחבה יושבות צפוף במרכז הארץ, ולכן הן נקודות קטנות בלי כיתוב.
   הכיתוב נדלק רק על העיר שבה נמצאים כרגע, כדי שהמפה לא תתמלא טקסט חופף */
.city-pin-mini .pin-label{opacity:0;font-size:9px}
.city-pin-mini.is-now .pin-label{opacity:1;font-size:10px}
.city-pin-mini .pin{fill:#C6BCAA}
.city-pin-mini.is-done .pin{fill:#3FA36B}
.legend{display:flex;flex-wrap:wrap;gap:11px;justify-content:center}
.legend-item{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;font-weight:700;color:var(--muted)}
.key{width:11px;height:11px;border-radius:50%;display:inline-block}
.key-done{background:#2F8F5B}
.key-now{background:#E9A83B}
.key-lock{background:#B3A895}
.card-city.is-now{border-color:rgba(233,168,59,.55);background:linear-gradient(180deg,#FFFDF6,#FFF6E4)}

/* ============ קפריסין, היעד מעבר לים ============ */
.il-sea{fill:#DCEDF6}
.il-cyprus{fill:#EDE2CB;stroke:#D3C5A6;stroke-width:2;transition:fill .3s ease,stroke .3s ease}
.il-route{fill:none;stroke:#A6C8D9;stroke-width:1.8;stroke-dasharray:4 5;stroke-linecap:round}
.il-sea-tag{font-family:'Noto Sans Hebrew',sans-serif;font-size:10px;font-weight:800;fill:#5E8FA6}
.israel.cy-open .il-cyprus{fill:#F3E7CF;stroke:#C9B896}
.israel.cy-done .il-cyprus{fill:#DFF0E4;stroke:#9CC8AC}
.sea-split{
  display:flex;align-items:center;gap:10px;
  margin-block:16px 2px;
  font-size:.74rem;font-weight:800;color:#3E7FA0;
}
.sea-split::before,.sea-split::after{
  content:"";flex:1;height:2px;border-radius:2px;
  background:repeating-linear-gradient(90deg,#B9DBEA 0 9px,transparent 9px 16px);
}
.card-city.is-abroad{border-color:rgba(29,130,196,.32);background:linear-gradient(180deg,#FCFEFF,#EEF7FC)}
.card-city.is-abroad.card-locked{background:linear-gradient(180deg,#FBFDFF,#EFF6FA)}
.card-city.is-abroad.is-now{border-color:rgba(233,168,59,.55);background:linear-gradient(180deg,#FFFDF6,#FFF6E4)}

.game-foot{
  margin-top:22px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.foot-note{font-size:.72rem;color:var(--muted);flex:1 1 180px}
.btn-ghost{
  background:transparent;color:var(--muted);
  border:1px solid var(--line);border-radius:999px;
  padding:8px 16px;font-size:.82rem;font-weight:700;
}
.btn-ghost:hover{background:#fff;color:var(--ink)}

/* ============ ניווט תחתון של משחק ============ */
.bottomnav{
  position:absolute;
  inset-inline:0;
  bottom:0;
  z-index:30;
  display:flex;
  gap:4px;
  padding:6px 10px calc(6px + env(safe-area-inset-bottom,0px));
  background:rgba(255,248,236,.96);
  backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
}
.view-btn{
  flex:1;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1px;
  border:0;
  background:transparent;
  border-radius:14px;
  padding:6px 4px 5px;
  font-weight:800;
  font-size:.7rem;
  color:var(--muted);
  transition:background-color .15s ease,color .15s ease,transform .1s ease;
}
.view-btn:active{transform:scale(.95)}
.view-ico{font-size:1.35rem;line-height:1.15;filter:grayscale(.6);transition:filter .15s ease,transform .15s ease}
.view-btn.is-active{color:var(--green-d);background:#E9F4ED}
.view-btn.is-active .view-ico{filter:none;transform:scale(1.12)}
.dot{
  position:absolute;
  top:4px;
  inset-inline-end:calc(50% - 22px);
  width:10px;height:10px;
  border-radius:50%;
  background:var(--tomato);
  box-shadow:0 0 0 2px #FFF8EC;
  animation:pulse 1.4s ease-in-out infinite;
}

/* ============ מסך פתיחה ============ */
.intro{
  position:absolute;
  inset:0;
  z-index:40;
  display:grid;
  place-items:center;
  padding:clamp(18px,6vw,44px);
  text-align:center;
  background:
    radial-gradient(120% 80% at 80% 0%,#FFE6BC 0%,rgba(255,230,188,0) 60%),
    radial-gradient(90% 70% at 0% 100%,#DFF1E4 0%,rgba(223,241,228,0) 60%),
    var(--bg);
  overflow-y:auto;
}
.intro-inner{width:min(440px,100%)}
.intro-art{
  width:clamp(120px,30vw,150px);
  height:auto;
  margin-block-end:14px;
  filter:drop-shadow(0 14px 24px rgba(120,84,30,.18));
  animation:bob 3.2s ease-in-out infinite;
}
.intro-title{
  font-size:clamp(2.5rem,11vw,3.6rem);
  font-weight:900;
  color:var(--green-d);
  text-shadow:0 3px 0 #D8EBDD;
}
.intro-logo{
  width:clamp(190px,52vw,250px);
  height:auto;
  margin-block-end:10px;
  border-radius:18px;
  box-shadow:0 14px 30px rgba(120,84,30,.20);
  animation:bob 3.2s ease-in-out infinite;
}
.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}
.intro-lead{margin-top:12px;font-size:clamp(.95rem,4vw,1.08rem);color:var(--muted)}
.chips{margin-block:18px 24px;display:flex;flex-wrap:wrap;gap:9px;justify-content:center}
.chip{
  background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:7px 14px;font-size:.8rem;font-weight:700;color:var(--muted);
  box-shadow:var(--shadow-sm);
}
.btn-primary{
  border:0;
  border-radius:999px;
  padding:16px 44px;
  font-weight:900;
  font-size:1.1rem;
  color:#fff;
  background:linear-gradient(180deg,#3FB374,#26794C);
  box-shadow:0 6px 0 #1C5A37,0 16px 30px rgba(47,143,91,.35);
  transition:transform .1s ease,box-shadow .1s ease;
}
.btn-primary:active{transform:translateY(4px);box-shadow:0 2px 0 #1C5A37,0 8px 18px rgba(47,143,91,.3)}

/* ============ חלוניות ============ */
.modal{
  position:fixed;inset:0;z-index:60;
  display:grid;place-items:center;padding:20px;
  background:rgba(36,31,25,.5);
  backdrop-filter:blur(4px);
}
.modal-card{
  position:relative;
  width:min(380px,100%);
  background:var(--card);
  border-radius:var(--r-lg);
  padding:24px;
  text-align:center;
  box-shadow:0 24px 60px rgba(60,40,15,.3);
  animation:popIn .3s cubic-bezier(.2,1.4,.4,1) both;
  overflow:hidden;
}
.modal-title{font-size:1.35rem;font-weight:900;color:var(--green-d)}
.modal-text{margin-top:9px;color:var(--muted)}
.modal-text b{color:var(--ink);font-size:1.15rem}
.modal-sub{margin-top:5px;font-size:.78rem;color:var(--muted)}
.modal .btn-primary{margin-top:18px;padding:13px 32px;font-size:1rem}
.modal-actions{display:flex;flex-direction:column;gap:8px;align-items:center}
.modal-actions .btn-ghost{margin-top:0}

/* ======== חלונית שם העסק ======== */
.name-ico{font-size:2.2rem;line-height:1;margin-block-end:6px}
.name-input{
  margin-top:14px;
  inline-size:100%;
  border:2px solid rgba(47,143,91,.35);
  border-radius:14px;
  background:#FFFDF7;
  padding:12px 14px;
  font-family:inherit;
  font-size:1.02rem;
  font-weight:800;
  color:var(--ink);
  text-align:center;
  -webkit-user-select:text;
  user-select:text;
}
.name-input::placeholder{color:var(--muted);font-weight:600;opacity:.7}
.name-input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 4px rgba(47,143,91,.15)}
.name-picks{margin-top:10px;display:flex;flex-wrap:wrap;gap:7px;justify-content:center}
.name-pick{
  border:1px solid var(--line);
  background:#fff;
  border-radius:999px;
  padding:6px 12px;
  font-size:.76rem;
  font-weight:700;
  color:var(--muted);
  box-shadow:var(--shadow-sm);
  transition:transform .1s ease,color .15s ease,border-color .15s ease;
}
.name-pick:hover{color:var(--green-d);border-color:rgba(47,143,91,.4)}
.name-pick:active{transform:translateY(1px)}
.name-input + .name-picks + .modal-actions{margin-top:16px}
.win-crown{font-size:2.6rem;line-height:1;margin-block-end:4px;animation:bob 2.4s ease-in-out infinite}
.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.confetti i{
  position:absolute;
  top:-12px;
  width:9px;height:14px;
  border-radius:2px;
  opacity:.95;
  animation:confFall var(--cd,1.6s) ease-in var(--cdel,0s) forwards;
}

/* ============ הודעות ============ */
.toasts{
  position:absolute;
  inset-inline:0;
  bottom:calc(var(--nav-h) + env(safe-area-inset-bottom,0px) + 10px);
  z-index:50;
  display:flex;flex-direction:column;align-items:center;gap:7px;
  pointer-events:none;padding-inline:16px;
}
.toast{
  background:#241F19;color:#FFF6E9;
  border-radius:999px;padding:9px 17px;
  font-size:.82rem;font-weight:700;
  box-shadow:var(--shadow);
  animation:toastIn .3s ease both;
  max-width:100%;text-align:center;
}

/* ============ אנימציות ============ */
@keyframes floatUp{
  0%{opacity:0;transform:translateY(0) scale(.85)}
  20%{opacity:1;transform:translateY(-14px) scale(1.08)}
  100%{opacity:0;transform:translateY(-64px) scale(1)}
}
@keyframes coinFly{
  0%{transform:translate(0,0) scale(1);opacity:1}
  70%{opacity:1}
  100%{transform:translate(var(--dx,0),var(--dy,0)) scale(.4);opacity:0}
}
@keyframes tapShake{
  0%{transform:scale(.95) rotate(0)}
  40%{transform:scale(1.04) rotate(-2deg)}
  70%{transform:scale(.99) rotate(1.5deg)}
  100%{transform:scale(1) rotate(0)}
}
@keyframes moneyPop{0%{transform:scale(1)}45%{transform:scale(1.09)}100%{transform:scale(1)}}
@keyframes sceneBump{0%{transform:scale(1)}40%{transform:scale(1.012)}100%{transform:scale(1)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes cardIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes popIn{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}
@keyframes toastIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes readyPulse{
  0%,100%{box-shadow:0 4px 0 #1C5A37,0 8px 16px rgba(47,143,91,.30)}
  50%{box-shadow:0 4px 0 #1C5A37,0 8px 24px rgba(47,143,91,.55)}
}
@keyframes confFall{
  0%{transform:translateY(0) rotate(0)}
  100%{transform:translateY(340px) rotate(var(--cr,340deg))}
}
@keyframes kenburns{
  from{transform:scale(1) translate(0,0)}
  to{transform:scale(1.08) translate(-1.5%,1%)}
}
@keyframes sunPulse{
  0%,100%{opacity:.55;transform:scale(1)}
  50%{opacity:.95;transform:scale(1.06)}
}
@keyframes cloudDrift{
  from{left:-30%}
  to{left:112%}
}
@keyframes birdFly{
  0%{left:-6%;transform:translateY(0);opacity:0}
  4%{opacity:.85}
  25%{transform:translateY(-9px)}
  50%{transform:translateY(3px)}
  75%{transform:translateY(-7px)}
  96%{opacity:.85}
  100%{left:104%;transform:translateY(-2px);opacity:0}
}
@keyframes sparkle{
  0%,100%{opacity:0;transform:scale(.5)}
  50%{opacity:1;transform:scale(1.25)}
}
@keyframes comboPop{
  0%{transform:scale(1)}
  45%{transform:scale(1.09)}
  100%{transform:scale(1)}
}
@keyframes cheerFlash{
  0%{opacity:0}
  25%{opacity:1}
  100%{opacity:0}
}

/* ============ מסכים גבוהים במיוחד ============ */
@media (min-height:820px){
  .scene-box{height:clamp(180px,26dvh,240px)}
  .tap{width:clamp(110px,28vw,134px)}
}

/* ============ תנועה מופחתת ============ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .layer{opacity:0;transform:none}
  .scene.has-g0 .layer-g0,.scene.has-g1 .layer-g1,.scene.has-g2 .layer-g2,
  .scene.has-g3 .layer-g3,.scene.has-g4 .layer-g4,.scene.has-g5 .layer-g5,
  .scene.has-g6 .layer-g6,.scene.has-g7 .layer-g7,
  .scene.has-c1 .layer-cust1,.scene.has-c2 .layer-cust2,.scene.has-c3 .layer-cust3{opacity:1}
  .tap:active{transform:none}
  .scene-img{animation:none}
  .scene-fx{display:none}
  /* הפריטים שנרכשו נשארים גלויים במלואם, רק בלי אנימציית ההופעה */
  .scene-item,.scene-item.is-new{animation:none!important;opacity:1;transform:none}
  /* מד הקומבו נשאר גלוי ומדויק גם בלי תנועה: הצבע, הטקסט ורוחב הפס מעבירים הכל */
  .combo,.combo-fill,.tap-combo{animation:none;transition:none}
  .combo.is-up,.tap-combo.is-up{transform:none}
}

/* ============ טבלת השיאים ============ */
.hud-btns{grid-column:3;justify-self:end;display:flex;align-items:center;gap:8px}
.hud .sound-btn{grid-column:auto}
.lb-btn{position:relative}
.lb-btn .dot{position:absolute;inset-block-start:5px;inset-inline-end:5px}
.modal-card.is-lb{width:min(430px,100%);text-align:start}
.modal-card.is-lb .modal-title,.modal-card.is-lb .modal-text{text-align:center}
.lb-me{
  margin-top:16px;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:12px 14px;
  border-radius:16px;
  background:linear-gradient(180deg,#EDF8F1,#E2F1E8);
  border:1px solid rgba(47,143,91,.28);
}
.lb-me-rank{font-size:1.22rem;font-weight:900;color:var(--green-d);text-align:center}
.lb-me-cap{font-size:.78rem;font-weight:600;color:var(--muted);text-align:center}
.lb-list{margin-top:14px;display:flex;flex-direction:column;gap:6px;list-style:none;padding:0}
.lb-row{
  display:grid;
  grid-template-columns:2.1rem minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:9px 12px;
  border-radius:13px;
  background:#fff;
  border:1px solid var(--line);
}
.lb-row.is-me{border-color:rgba(47,143,91,.5);background:#F3FAF5}
.lb-rank{font-weight:900;color:var(--muted);font-variant-numeric:tabular-nums;text-align:center}
.lb-row.is-top .lb-rank{color:var(--gold,#E9A83B)}
.lb-nick{font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-city{display:block;font-weight:600;font-size:.78em;color:var(--muted);margin-top:2px}
.lb-time{font-weight:800;color:var(--green-d);font-variant-numeric:tabular-nums;white-space:nowrap}
.lb-empty{padding:18px 10px;text-align:center;color:var(--muted);font-weight:600}
.modal-card.is-lb .modal-sub{text-align:center;margin-top:12px}
.modal-card.is-lb .modal-actions{margin-top:14px}
.nick-state{margin-top:8px;font-size:.8rem;font-weight:700;min-height:1.2em;text-align:center;color:var(--muted)}
.nick-state.is-ok{color:var(--green-d)}
.nick-state.is-bad{color:#C0432E}

/* ======== התחרות ========
   הרצועה יושבת מתחת ל-HUD ונשארת שם כל המשחק, כי הפרס הוא הסיבה
   המרכזית לחזור. הזהב שמור לה בלבד, כדי שלא יתחרה בירוק של המשחק. */
.contest-bar{
  display:flex;align-items:center;gap:10px;width:100%;border:0;
  padding:9px 14px;cursor:pointer;text-align:start;
  background:linear-gradient(90deg,#FFF3D4,#FFE6AE);
  border-block-end:1px solid rgba(201,134,27,.35);
  font-weight:700;color:#5A4413;font-size:14px;
}
.contest-bar:hover{filter:brightness(1.03)}
.contest-bar-tag{flex:none;font-weight:900;color:#8A5F12}
.contest-bar-main{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.contest-bar-cta{
  flex:none;background:#C9861B;color:#fff;border-radius:999px;
  padding:3px 12px;font-size:13px;font-weight:800;
}

.intro-contest{
  display:block;width:100%;border:1px solid rgba(201,134,27,.45);cursor:pointer;
  background:linear-gradient(180deg,#FFF7E4,#FFEDC6);
  border-radius:var(--r-md);padding:12px 14px;margin:0 0 14px;text-align:center;
  box-shadow:var(--shadow-sm);
}
.intro-contest:hover{filter:brightness(1.02)}
.intro-contest-top{display:block;font-weight:800;color:#5A4413;font-size:15px}
.intro-contest-top b{color:#8A5F12}
.intro-contest-sub{display:block;margin-top:3px;color:var(--muted);font-size:13px;font-weight:600}

.modal-card.is-contest{
  width:min(440px,100%);max-height:calc(100dvh - 32px);
  overflow:auto;overscroll-behavior:contain;text-align:start;
}
.modal-card.is-contest .modal-title,
.modal-card.is-contest .modal-text{text-align:center}
.prize{
  text-align:center;border-radius:var(--r-md);padding:16px 14px 18px;margin-bottom:16px;
  background:radial-gradient(120% 100% at 50% 0%,#FFE9BC 0%,#FFF7E6 70%);
  border:1px solid rgba(201,134,27,.35);
}
.prize-kicker{display:block;font-size:13px;font-weight:800;color:#8A5F12;letter-spacing:.02em}
.prize-name{
  display:block;font-size:clamp(38px,11vw,54px);line-height:1.05;font-weight:900;margin:4px 0 6px;
  background:linear-gradient(180deg,#E9A83B,#B36F0C);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.prize-sub{display:block;font-size:13.5px;color:var(--muted);font-weight:600}

.contest-count{
  text-align:center;background:var(--bg);border-radius:var(--r-md);
  padding:10px;margin:0 0 14px;border:1px solid var(--line);
}
.contest-count-cap{display:block;font-size:13px;color:var(--muted);font-weight:700}
.contest-count-val{display:block;font-size:22px;font-weight:900;color:var(--green-d);font-variant-numeric:tabular-nums}

.contest-facts{display:grid;gap:8px;margin:0 0 16px}
.contest-facts li{display:flex;gap:10px;align-items:baseline;font-size:14px}
.contest-facts b{flex:none;width:92px;color:var(--muted);font-weight:800;font-size:13px}
.contest-facts span{color:var(--ink);font-weight:600}

.contest-h3{margin:0 0 8px;font-size:15px;font-weight:900;color:var(--ink)}
.contest-rules{display:grid;gap:7px;margin:0 0 14px}
.contest-rules li{position:relative;padding-inline-start:18px;font-size:13.5px;color:var(--muted);line-height:1.55}
.contest-rules li::before{content:"";position:absolute;inset-inline-start:4px;top:8px;width:6px;height:6px;border-radius:50%;background:var(--gold)}

.intro-guide{display:inline-block;margin-top:14px;color:var(--muted);font-size:14px;font-weight:700}
.intro-guide:hover{color:var(--green-d)}

/* ======== דיווח על תקלה ======== */
.report-row{margin:16px 4px 0;text-align:center}
.report-link{
  background:none;border:0;padding:6px 10px;
  color:var(--muted);font-size:13.5px;font-weight:700;text-decoration:underline;
}
.report-link:hover{color:var(--green-d)}
.modal-card.is-bug{max-width:420px;text-align:start}
.modal-card.is-bug .modal-title,.modal-card.is-bug .modal-text{text-align:center}
.bug-text{
  width:100%;margin:14px 0 10px;padding:12px;
  border:1px solid var(--line);border-radius:var(--r-md);
  font-family:inherit;font-size:15px;line-height:1.5;color:var(--ink);
  background:var(--bg);resize:vertical;
}
.bug-text:focus{outline:2px solid var(--green);outline-offset:1px}
.bug-note{margin:0 0 10px;color:var(--muted);font-size:12.5px;line-height:1.5}
.bug-state{margin:0 0 10px;font-size:13.5px;font-weight:700;color:var(--muted);min-height:19px}
.bug-state.is-good{color:var(--green-d)}
.bug-state.is-bad{color:var(--tomato)}
.bug-close{
  display:block;margin:12px auto 0;background:none;border:0;
  color:var(--muted);font-size:13.5px;font-weight:700;
}

/* ======== שני המימדים וההרשמה ======== */
.mode-box{
  border:1px solid var(--line);border-radius:var(--r-md);
  padding:14px;margin:0 0 14px;text-align:center;background:var(--bg);
}
.mode-title{display:block;font-weight:900;font-size:16px;color:var(--ink)}
.mode-sub{display:block;margin:5px 0 11px;color:var(--muted);font-size:13.5px;line-height:1.55}
.mode-btn{width:100%}

.modal-card.is-join{max-width:430px;text-align:start;max-height:calc(100dvh - 32px);overflow:auto}
.modal-card.is-join .modal-title,.modal-card.is-join .modal-text{text-align:center}
.join-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0 12px}
.join-field{display:flex;flex-direction:column;gap:4px;min-width:0}
.join-field.is-wide{grid-column:1 / -1}
.join-field span{font-size:12.5px;font-weight:800;color:var(--muted)}
.join-field input{
  width:100%;padding:10px 12px;font-family:inherit;font-size:15px;color:var(--ink);
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);
}
.join-field input:focus{outline:2px solid var(--green);outline-offset:1px}
.join-label{display:block;font-size:12.5px;font-weight:800;color:var(--muted);margin-bottom:6px}
.join-plat{display:flex;gap:8px;margin-bottom:12px}
.plat-btn{
  flex:1;padding:11px 8px;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--card);font-weight:800;font-size:14px;color:var(--muted);
}
.plat-btn.is-on{border-color:var(--green);color:var(--green-d);background:#F3FAF5}
.join-warn{margin:0 0 10px;font-size:12.5px;color:var(--muted);line-height:1.55}
.join-state{margin:0 0 8px;font-size:13.5px;font-weight:700;color:var(--muted);min-height:19px}
.join-state.is-good{color:var(--green-d)}
.join-state.is-bad{color:var(--tomato)}