:root{
  --size: 330px; --circle: 84px; --bg: #ffffff;
  --honey: #FFDE59; --honey-dark:#FFC928; --center:#FFD84D; --text:#222;
  --shadow: 0 2px 0 var(--honey-dark), 0 6px 16px rgba(0,0,0,.12);
  --shadow-hover: 0 3px 0 var(--honey-dark), 0 10px 24px rgba(0,0,0,.18);
  --radius: 98px; --accent:#2d6cdf;
  --ok:#1e9a63; --bad:#c62828;
  --end-bg: linear-gradient(180deg,#eaf6ff 0%, #d6efff 100%);
}
html,body{ margin:0; background:var(--bg); color:var(--text); font-family:'Rubik'; }
.wrap{ display:flex; flex-direction:column; align-items:center; min-height:100vh; gap:12px; }
button, input {
  font-family: 'Rubik';
}
.progress-line{ font-size:15px }
.progress-bar{ width:260px; background:#eee; border-radius:20px; height:20px; overflow:hidden; position:relative; }
.progress{ background:#4CAF50; height:100%; width:0%; transition:width .3s ease }

.flower{ position:relative; width:min(var(--size),90vw); aspect-ratio:1/1; margin-top:-6px; }
.cell{
  position:absolute; width:var(--circle); height:var(--circle); border-radius:50%;
  background:var(--honey); box-shadow:var(--shadow);
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--honey-dark);
  font-size:clamp(26px,7vw,34px);
  font-family:'Heebo', system-ui, Arial, sans-serif; /* Heebo בתוך העיגולים */
  font-weight:800; user-select:none; transition:box-shadow .2s ease, transform .08s ease, opacity .2s ease; cursor:pointer
}
.cell:hover{ box-shadow:var(--shadow-hover); transform:translateY(-1px) }
.cell.used{ opacity:.35; pointer-events:none }
.cell.center{ left:50%; top:50%; transform:translate(-50%,-50%) }
.cell.petal{ left:50%; top:50%; transform:translate(-50%,-50%) rotate(calc(var(--i)*60deg)) translate(var(--radius)) rotate(calc(var(--i)*-60deg)) }
.cell.empty{ pointer-events:none; cursor:default }

.input-area{ margin-top:6px; display:flex; align-items:center; justify-content:center; gap:10px }
.inputWrap{ position:relative; }
.input-area input{
  width:220px; height:42px; border-radius:22px; border:2px solid #ccc; text-align:center; font-size:20px;
  caret-color:transparent;
}
.blink-caret{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:3px; height:60%; background: #FFD84D; border-radius:2px;
  animation: caretBlink 1s step-end infinite; pointer-events:none;
}
.blink-caret.hidden{ display:none; }
@keyframes caretBlink { 0%,49%{opacity:1} 50%,100%{opacity:0} }

.input-area button{ width:42px; height:42px; border:none; border-radius:50%; font-size:22px; cursor:pointer }
.check{ background:#4CAF50; color:#fff; order:2 }
.clear{ background:#F44336; color:#fff; order:0 }

.extra-buttons{ margin-top:6px; display:flex; gap:15px; justify-content:center }
.extra-buttons button{ background:#f2f2f2; border:1px solid #ccc; border-radius:20px; padding:8px 16px; font-size:16px; cursor:pointer; transition:background .2s, transform .08s ease }
.extra-buttons button:hover{ background:#e6e6e6; transform:translateY(-1px) }

/* תחתית: זמן וטעויות מעל "מילים חדשות בעוד" */
.bottom-panel{ width:min(92vw, 420px); display:flex; flex-direction:column; gap:6px; margin-top:6px }
.run-row{ display:flex; justify-content:center; gap:18px; font-weight:900; }
.daily-bottom{ text-align:center; padding:6px 10px; border-top:1px dashed #dcdcdc; font-weight:900; }

/* ===== מסך סיום ריבועי ===== */
.endwrap{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.25); backdrop-filter: blur(2px); align-items:center; justify-content:center; padding:14px; z-index:50 }
.endwrap.show{ display:flex; }
.endcard{
  width:min(92vw, 420px);
  aspect-ratio:1/1;
  border-radius:24px;
  background:var(--end-bg);
  box-shadow:0 14px 36px rgba(0,0,0,.22);
  border:2px solid #bfe6ff;
  display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  padding:14px;
}
.endcard h2{ margin:6px 0 0; font-size:22px }
.end-metrics{ display:grid; grid-template-columns: repeat(2, 1fr); gap:10px; width:100%; margin-top:6px; }
.metric{
  background:#fff; border:2px solid #bfe6ff; border-radius:14px; padding:8px; text-align:center;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}
.metric .label{ font-size:12px; opacity:.8 }
.metric .val{ font-weight:900; font-size:20px; margin-top:2px }

/* “מילים חדשות בעוד” – גדול ובולט במרכז במסך הסיום */
.newWordsBig{
  width:100%;
  text-align:center;
  margin-top:8px;
  font-size:26px;
  font-weight:900;
  background:#fff;
  border:3px solid #79d1ff;
  border-radius:16px;
  padding:10px 12px;
  box-shadow:0 8px 20px rgba(0,0,0,.10)
}

.resultGrid{ display:grid; grid-template-columns: repeat(10, 1fr); gap:6px; width:100%; padding:8px 4px; justify-items:center; }
.sq{ width:20px; height:20px; border-radius:6px; border:2px solid #a0d8b5; background:#eaeef5; }
.sq.ok{ background:#1FDA72; border-color:#1FDA72; }

.shareBox{ width:100%; background:#fff; border:2px solid #bfe6ff; border-radius:16px; padding:10px; box-shadow:0 6px 18px rgba(0,0,0,.08) }
.shareTitle{ font-weight:800; margin-bottom:6px; text-align:center }
.shareBtns{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap }
.btnShare, .btnFb{
  padding:10px 16px; border-radius:999px; border:0; cursor:pointer; font-size:16px; font-weight:800;
  box-shadow:0 4px 14px rgba(0,0,0,.10);
  transition:transform .08s ease, box-shadow .15s ease;
}
.btnShare{ background:#25D366; color:#003e1f }
.btnFb{ background:#1877F2; color:#fff }
.btnShare:hover, .btnFb:hover{ transform:translateY(-1px); box-shadow:0 8px 22px rgba(0,0,0,.18) }

.flash{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:9; pointer-events:none; background:rgba(255,255,255,.95); padding:10px 22px; border-radius:999px; box-shadow:0 6px 22px rgba(0,0,0,.18); font-weight:900; font-size:20px; text-align:center; opacity:0; transition:opacity .2s ease }
.flash.ok{ color:var(--ok); text-shadow:0 1px 0 #fff }
.flash.bad{ color:var(--bad); text-shadow:0 1px 0 #fff }

/* קונפטי */
.confetti{ position:fixed; left:0; top:0; width:100%; height:0; pointer-events:none; overflow:visible; z-index:60 }
.confetti-piece{
  position:fixed; top:-10px; width:8px; height:14px; opacity:0.9;
  transform: translateY(0) rotate(0deg);
  animation: fall 1.4s ease-out forwards;
}
@keyframes fall{ 0%{ transform: translateY(-10px) rotate(0deg) } 100%{ transform: translateY(120vh) rotate(540deg) } }

/* מודעת ביניים */
.ad-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; z-index:80 }
.ad-box{ width:min(92vw,420px); background:#fff; border-radius:16px; padding:16px; box-shadow:0 16px 40px rgba(0,0,0,.25); border:2px solid #e3e3e3; display:flex; flex-direction:column; gap:10px; align-items:center }
.ad-title{ font-weight:800; font-size:18px }
.ad-body{ font-size:15px; opacity:.9; text-align:center }
.ad-close{ background:#111; color:#fff; border:0; border-radius:999px; padding:10px 16px; cursor:pointer }



.title-wrap {
  display: flex;
  align-items: baseline; /* Keeps nice height alignment */
  gap: 8px; /* Space between them */
  direction: ltr; /* English left to right */
  font-family: "Rubik", sans-serif;
}

.main-title {
  font-size: 2rem;
  font-weight: 700;
  color: #000;
  margin: 0;
}

.sub-title {
  font-size: 1.2rem;
  font-weight: 400;
  color: #666;
}


.unavailable-date a {
  background: #eee !important;
  color: #aaa !important;
  pointer-events: none !important;
}
.available-date a {
  background: #ffe373 !important;
  color: #000 !important;
}

#datepickerContainer {
  position: absolute;
  z-index: 9998;
}

.more_games {
  background: #f2f2f2;
  box-shadow: 1px 2px 20px 2px #00000012;
    border: 1px solid #ccc;
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 16px;
    cursor: pointer;
    transition: background .2s, transform .08s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.95);}
  to { opacity: 1; transform: scale(1);}
}

/* עיגול מסתובב */
.loader {
  border: 3px solid rgba(255,255,255,0.4);
  border-top: 3px solid white;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#todayWordsShow {
  text-align: center;
  font-size: 18px;
}