/* =======================
   Base
   ======================= */
:root{
  --game-h: min(78vh, 900px);   /* גובה במה קבוע */
  --game-ratio: 2 / 3;          /* יחס קבוע של הבמה */
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  font-family: 'Fredoka','Varela Round',system-ui,sans-serif;
  background: #f6fff6;
}

.site-wrap {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

/* =======================
   Header
   ======================= */
.header{
  padding:16px 20px;
  text-align:center;
  background:linear-gradient(90deg,#FF5ACD,#FBDA61);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  font-weight:900;
  letter-spacing:1px;
  position:relative;
  z-index:5;
}

.brand{
  font-size:clamp(28px,4vw,52px);
  line-height:1;
  margin:0;
}

.tagline{
  color:#333;
  font-size:clamp(14px,2vw,20px);
  margin-top:6px;
}

/* בדסקטופ לא משתמשים בשורת העליונה – הכל בתוך ה-grid */
.header .topbar{ display:none; }

/* =======================
   Main grid layout
   ======================= */
.main{
  display:grid;
  grid-template-columns:280px 1fr 280px;  /* left | center | right */
  grid-template-rows:auto auto auto;      /* שיתוף/שפות | לוחות/פאנלים | מודעה בצד ימין */
  gap:16px;
  padding:10px 16px 12px;
  flex:1;
  align-items:start;
}

.right-stack{
  grid-column: 3;
  grid-row: 2;
  display: flex;
  flex-direction: column; /* CTA למעלה, מודעה מתחתיו */
  gap: 12px;
}

/* שמאל: לשוניות למעלה, How to play מתחתיהן */
#game-tabs{ grid-column:1; grid-row:1; }
.right-col{ display: contents; }          /* כדי שה-child ישתתף ב-grid של .main */
#right-panel{
  grid-column:1; 
  grid-row:2; 
  position: static;
  background: #f5f6f8;
  margin-top: 30px;
}

/* ===== הבמה המרכזית – תופסת את כל שלוש השורות ===== */
.stage{
  grid-column:2;
  grid-row:1 / span 3;
  position:relative;
  height: var(--game-h);
  aspect-ratio: var(--game-ratio);
  width: auto;
  margin: 20px auto 0;             /* ממורכז אופקית */
  background: transparent;         /* שקוף */
}

/* כל משחק נמתח בתוך הבמה באבסולוט */
.game-area{
  position:absolute;
  inset:0;
}
.game-area[hidden]{ display:none !important; }

/* ימין: שיתוף/שפות למעלה, CTA באמצע, מודעה מתחת */
#right-tools{ grid-column:3; grid-row:1; width:100%; }
#ctaPanel{ align-self:start; }
.ad-left-stick{ align-self:start; width:100%; max-width:280px;  margin-top:12px; }
.ad-left-stick ins.adsbygoogle{
  display:block !important;
  width:100% !important;
  height:auto !important;
  min-height:250px !important;   /* שומר שטח לפרסומת גם לפני טעינה */
}
/* =======================
   Tabs (left)
   ======================= */
.tabs{
  background:#fff;
  border-radius:16px;
  padding:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  display:flex;
  flex-direction:column;
  gap:10px;
  height:fit-content;
}
.tab{
  display:flex; align-items:center; gap:10px;
  padding:10px; border-radius:12px; cursor:pointer; border:1px solid #eee;
}
.tab.active{ border-color:#18c47c; background:#f3fff9; }
.tab img.icon{ width:40px; height:40px; object-fit:contain; background:#f5f5f5; border-radius:8px; }

/* =======================
   RIGHT TOOLS (share + language)
   ======================= */
#right-tools .right-rail{
  display:flex;
  flex-direction:column;
  gap:30px;
  align-items:stretch;
}
#right-tools .top-share{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:8px;
  align-items:center;
  width:100%;
}
#right-tools .top-share .share-label{
  grid-column:1 / -1;
  justify-self:start;
  font-size:12px;
  opacity:.7;
  margin-inline-end:2px;
}
[dir="rtl"] #right-tools .top-share .share-label{ justify-self:start; }
#right-tools .top-share .icon-btn{
  width:36px; height:36px; padding:0; display:grid; place-items:center;
  border:none; background:transparent; border-radius:8px; cursor:pointer;
}
#right-tools .top-share .icon-btn:hover{ background:rgba(0,0,0,.06); }
#right-tools .top-share .icon-btn:active{ transform:translateY(1px); }
#right-tools .top-share .icon-btn svg{ width:20px; height:20px; fill:currentColor; }
#right-tools .lang-switch{
  display:flex; justify-content:center; gap:20px;
}
#right-tools .lang-switch button{
  padding:6px 10px; border-radius:20px; border:1px solid #ddd; background:#fff; cursor:pointer; font-weight:700;
}
#right-tools .lang-switch button.active{ background:#18c47c; color:#fff; border-color:#18c47c; }

#soccer-game {
	margin-top: 45px;
}
/* כל לוח משחק פנימי ממלא 100% מהבמה */
#soccer-game .field,
#memory-game .mem-frame,
#tower-game .tower-card{
  height: 100%;   /* במקום גובה דינמי */
  width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
}

/* אם ללוחות הפנימיים יש תוכן דינמי – שיתפרס אנכית יפה */
#memory-game .mem-board,
#tower-game .tower-board{
  flex: 1 1 auto;
  min-height: 0;            /* חשוב כדי לאפשר ל-flex לקטון בתוך גובה קבוע */
}

/* =======================
   Soccer field
   ======================= */
/* אין margin-top כי הבמה כבר ממקמת ומרכזת */
.field{
  position:relative;
  background:url('assets/field.png') center center / 100% 100% no-repeat;
  border-radius:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}
.letters-bar, .letter-chip, .ball{ touch-action:none; overscroll-behavior:contain; }

.goal{
  position:absolute; top:-9%; left:50%;
  width:96%; height:12%;
  background:url('assets/goal.webp') center / contain no-repeat;
  z-index:2; pointer-events:none;
  transform:translateX(-50%) scale(1.2);
  transform-origin:top center;
}
.goalie{
  position:absolute; top:75%;
  width:15%; aspect-ratio:1/1;
  background:url('assets/goalie_left.webp') center / contain no-repeat;
  transform:translate(-50%,-50%);
  z-index:3;
}

.center-word{
  position:absolute; top:46%; left:50%;
  transform:translate(-50%,-50%);
  font-weight:900; color:#111;
  font-size:clamp(26px,4vw,48px);
  text-shadow:0 2px 0 rgba(255,255,255,.6);
  white-space:nowrap; z-index:4;
}
.built-word{
  position:absolute; top:57%; left:50%;
  transform:translate(-50%,-50%);
  font-weight:800; color:#222;
  font-size:clamp(22px,3vw,36px);
  letter-spacing:.06em; z-index:4;
}

.letters-bar{
  position:absolute; bottom:3%; left:50%;
  transform:translateX(-50%);
  display:flex; flex-wrap:wrap; gap:12px;
  justify-content:center; align-content:flex-end;
  width:min(calc(6 * 56px + 5 * 12px),92%);
}
.letter-chip{
  flex:0 0 56px; width:56px; height:56px; border-radius:50%;
  background:#fff; border:3px solid #333;
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:28px; cursor:grab; user-select:none;
  transition:transform .15s ease;
}
.letter-chip.dragging{ opacity:.9; transform:scale(1.06); }

.ball{
  position:absolute; width:60px; height:60px; border-radius:50%;
  background:url('assets/ball.webp') center / contain no-repeat;
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:24px; color:#111;
  pointer-events:none; z-index:5;
}

/* Scores */
.score-left, .score-right{
  position:absolute; font-weight:900;
  font-size:clamp(32px,5vw,50px); color:#16a34a; z-index:4;
}
.score-left{ bottom:2.5%; left:-9%; }
.score-right{ top:2%; left:-9%; }
[dir="rtl"] .score-left{ right:-9%; left:auto; }
[dir="rtl"] .score-right{ right:-9%; left:auto; }

@media (max-height:700px){ .stage{ height:68vh; } }

/* =======================
   Buttons
   ======================= */
.actions-panel{
  margin:10px 4px 0;
  display:flex; flex-direction:column; gap:10px;
}
.btn{
  display:inline-block; padding:10px 14px; border-radius:10px;
  border:1px solid #e5e7eb; background:#fff; color:#111;
  text-decoration:none; font-weight:700; cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.btn:hover{ filter:brightness(0.98); }
.btn.primary{ background:#0ea5e9; color:#fff; border-color:#0ea5e9; }
.btn.accent{ background:#111; color:#fff; }

/* =======================
   Footer
   ======================= */
.footer{ text-align:center; padding:8px 14px; color:#444; }
.footer a{ color:#007acc; text-decoration:none; }
.privacy-link{ color:#007acc; text-decoration:none; font-size:13px; }

/* =======================
   CTA panel (right column)
   ======================= */
.cta-panel{ align-self:start; }
.cta-note{
  font-weight:700; font-size:13px; line-height:1.25; color:#6b7280;
  background:#f5f6f8; border:1px solid #e5e7eb; border-radius:10px;
  padding:10px 12px; text-align:center;
}
.cta-btn{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:800; font-size:14px; line-height:1; padding:12px 14px;
  border-radius:999px; background:#fff; border:2px solid; text-decoration:none; color:#111;
  transition:background .15s ease, transform .05s ease;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
}
#ctaPanel .cta-btn + .cta-btn,
#ctaPanel .cta-note + .cta-btn,
#ctaPanel .cta-btn + .cta-note{ margin-top:10px; }
.cta-btn:hover{ background:rgba(0,0,0,.03); }
.cta-btn:active{ transform:translateY(1px); }
.cta-btn.-green{ border-color:#22c55e; }
.cta-btn.-green:hover{ background:#ecfdf5; }
.cta-btn.-blue{ border-color:#3b82f6; }
.cta-btn.-blue:hover{ background:#eff6ff; }
.cta-btn.-pink{ border-color:#ec4899; }
.cta-btn.-pink:hover{ background:#fdf2f8; }

html[dir="rtl"] .cta-panel{ text-align:right; }

/* =======================
   Ads (as cards)
   ======================= */
#right-panel .ad-rail{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  padding:8px;
  margin-top:12px;
  overflow:hidden;
}
#right-panel .ad-rail ins.adsbygoogle{
  display:block !important;
  width:100% !important;
  height:250px !important;
  max-width:100% !important;
}

/* המודעה שמתחת ל-CTA (ימין) */
.ad-left-stick ins.adsbygoogle{
  display:block !important;
  width:100% !important;
  height:auto !important;
  border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  overflow:hidden;
}

/* Respect [hidden] */
[hidden]{ display:none !important; }

/* =======================
   Mobile
   ======================= */
.mobile-actions{ display:none; }
.ad-mobile-between{ display:none; }
.ad-top-mobile{ display:none; }

/* ===== Mobile ===== */
@media (max-width:900px){




  /* 3) המשחק למעלה; הכל אחד-מתחת-לשני כמו קודם */
  .main{
    display:flex;
    flex-direction:column;
    gap:12px;
    padding:0px 10px 0px;
  }
  .stage{ order:1; display:flex; justify-content:center; margin-top:0px; margin-bottom: 0px; max-width: 100%;}
  
.ad-mobile-between{ order:2; position:static !important; display:block !important; margin:10px auto 8px; max-width:480px; }
  .ad-mobile-between ins.adsbygoogle{ display:block !important; min-height:90px !important; } /* מונע גובה 0 עד שייטען */
  .tabs{  order:3; width:100%; max-width:480px; margin:0 auto; }
  .right-col{ order:4; }
  #right-panel{ position:static; width:100%; max-width:480px; margin:0 auto; }
  .right-stack { order:5;}
  .right-tools-desktop { order:6}
  #ctaPanel{  width:100%; max-width:480px; margin:0 auto; }

.field { margin: 0 auto !important; height: 90% !important; }
#tower-game { margin:unset;}
.tower-header { padding: 5px 8px 8px !important; }
.mem-frame {width: 100% !important;}
  .ad-rail{ display:none!important; }
  body{padding-bottom:70px}           /* שלא יסתיר את המשחק */
  .ad-left-stick{display:none}        /* לא במובייל */
  /* 4) מרכזים אופקית את פקדי share+language בבר המובייל */
  .mobile-actions{ display:block !important; }        /* ודאו שהוא מוצג */
  .mobile-actions #right-tools .right-rail{ align-items:center; }
  .mobile-actions #right-tools .lang-switch{ justify-content:center; }

  /* 5) בר ה-SHARE לא נחתך: flex + wrap (נשאר בתוך הרוחב) */
  .mobile-actions #right-tools .top-share{
    display:flex !important;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:8px;
    width:100%;
    max-width:460px;
    margin:0 auto;
  }
  .game-info{
   display: none !important;
  }

    html, body, .site-wrap { overflow-x: hidden; }  /* חותך כל גלישה לרוחב */
  .main { max-width: 100vw; }  
}

.score-left,
.score-right{
  position:absolute;
  font-weight:900;
  font-size:clamp(32px,5vw,50px);
  color:#0000FF;
  z-index:4;
}

/* LTR */
.score-left{ bottom:2.5%; left:2%; }
.score-right{ top:2%; left:2%; }

/* RTL */
[dir="rtl"] .score-left{ right:2%; left:auto; }
[dir="rtl"] .score-right{ right:2%; left:auto; }