:root {
  --blue: #1f3a6e; --blue2: #2f5d8a; --gold: #e0a526; --cream: #fff6e5; --ink: #3b2a1a;
  --red: #d64545; --green: #2fa85a; --shadow: 0 10px 30px rgba(40, 25, 10, .28);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #f1dcbb; font-family: Rubik, Arial, sans-serif; color: var(--ink); user-select: none; -webkit-user-select: none; }
#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.hidden { display: none !important; }
h1, h2, .title, button { font-family: "Secular One", Rubik, Arial, sans-serif; }
button { cursor: pointer; border: 0; }

#loading { position: fixed; inset: 0; display: grid; place-content: center; text-align: center; background: var(--cream); z-index: 50; font-size: 20px; color: var(--blue); }
.spinner { font-size: 64px; animation: bob 1s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-14px) rotate(8deg); } }

.avatar { width: 64px; height: 64px; flex: none; border-radius: 50%; box-shadow: 0 3px 10px rgba(0, 0, 0, .25); background: #fff; }
.avatar.big { width: 96px; height: 96px; }
.m-wow, .m-worried { display: none; }
.mood-wow .m-wow, .mood-worried .m-worried { display: inline; }
.mood-wow .m-happy, .mood-worried .m-happy { display: none; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; display: flex; flex-direction: column; align-items: center; padding: max(10px, env(safe-area-inset-top)) 12px 14px; gap: 8px; }
#hud > * { pointer-events: auto; }
.topbar { width: min(760px, 100%); display: flex; align-items: center; gap: 10px; }
.topbar .title { flex: 1; background: var(--blue); color: #fff; border-radius: 999px; padding: 8px 18px; display: flex; justify-content: space-between; gap: 12px; font-size: 18px; box-shadow: var(--shadow); }
#hudStep { color: #ffd98a; white-space: nowrap; }
.iconbtn { width: 46px; height: 46px; border-radius: 50%; background: #fff; font-size: 22px; box-shadow: var(--shadow); transition: transform .12s; }
.iconbtn:active { transform: scale(.9); }
/* בחירת שפה: מציג את השפה שאפשר לעבור אליה */
.langbtn { height: 46px; padding: 0 18px; border-radius: 999px; background: #fff; color: var(--blue); font: 700 17px Rubik, sans-serif; box-shadow: var(--shadow); transition: transform .12s; }
.langbtn:active { transform: scale(.94); }
html[lang="he"] #loading [lang="en"], html[lang="en"] #loading [lang="he"] { display: none; }
.bubble { width: min(760px, 100%); display: flex; align-items: center; gap: 12px; background: rgba(255, 250, 240, .96); border-radius: 22px; padding: 10px 16px 10px 12px; box-shadow: var(--shadow); border: 2px solid #fff; pointer-events: none !important; }
#msg { font-size: clamp(15px, 2.4vw, 19px); font-weight: 500; line-height: 1.35; }
.bar { width: min(520px, 90%); height: 16px; background: rgba(255, 255, 255, .85); border-radius: 999px; overflow: hidden; position: relative; box-shadow: inset 0 2px 5px rgba(0, 0, 0, .2); pointer-events: none !important; direction: ltr; }
#fill { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, #f6d365, var(--gold)); border-radius: 999px; transition: width .15s; }
#zone { position: absolute; top: 0; bottom: 0; background: rgba(47, 168, 90, .75); display: none; z-index: 1; border-inline: 2px solid #fff; }
#pop { position: fixed; top: 42%; left: 50%; transform: translate(-50%, -50%); font-family: "Secular One", sans-serif; font-size: clamp(34px, 7vw, 60px); color: #fff; -webkit-text-stroke: 2px var(--blue); paint-order: stroke fill; text-shadow: 0 5px 0 rgba(0, 0, 0, .2); pointer-events: none !important; opacity: 0; white-space: nowrap; }
#combo { font-family: "Secular One", sans-serif; font-size: clamp(16px, 3vw, 22px); color: #fff; background: linear-gradient(90deg, #e94f37, var(--gold)); border: 2px solid #fff; border-radius: 999px; padding: 2px 16px; box-shadow: var(--shadow); pointer-events: none !important; opacity: 0; transform: scale(.6); transition: opacity .15s, transform .15s; white-space: nowrap; }
#combo.on { opacity: 1; transform: scale(1); }
#combo.bump { transform: scale(1.25); }
#pop.show { animation: pop .8s ease-out; }
#pop.good { color: #b9ffcf; } #pop.bad { color: #ffc2bd; -webkit-text-stroke-color: #8b1a1a; } #pop.gold { color: #ffe27a; }
@keyframes pop { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.5); } 20% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); } 70% { opacity: 1; transform: translate(-50%, -60%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -90%) scale(1); } }
#choices { margin-top: auto; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; width: min(760px, 100%); }
#choices.col { flex-direction: column; align-items: stretch; width: min(480px, 100%); }
.btn { font-size: clamp(17px, 2.6vw, 22px); padding: 14px 26px; border-radius: 18px; background: #fff; color: var(--blue); box-shadow: 0 6px 0 #c9b592, var(--shadow); transition: transform .08s, box-shadow .08s; }
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #c9b592; }
.btn.primary { background: var(--gold); color: #3b2a1a; box-shadow: 0 6px 0 #a87510, var(--shadow); }
.btn.good { background: var(--green); color: #fff; box-shadow: 0 6px 0 #1c7a3e, var(--shadow); }
.btn.bad { background: var(--red); color: #fff; box-shadow: 0 6px 0 #992b2b, var(--shadow); }

/* ---------- מסכים ---------- */
.screen { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; overflow-y: auto; padding: max(16px, env(safe-area-inset-top)) 16px 20px; }
#menu { background: linear-gradient(180deg, rgba(31, 58, 110, .55), rgba(31, 58, 110, .15) 40%, rgba(255, 246, 229, .25)); }
#menu header { width: min(980px, 100%); display: flex; align-items: center; gap: 16px; color: #fff; text-shadow: 0 3px 10px rgba(0, 0, 0, .45); }
#menu header > div { flex: 1; }
#menu h1 { margin: 0; font-size: clamp(34px, 7vw, 64px); line-height: 1; letter-spacing: 1px; }
#menu header p { margin: 6px 0 0; font-size: clamp(14px, 2.2vw, 19px); font-weight: 500; }
#recipes { width: min(980px, 100%); display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; margin: 22px 0 14px; }
.recipe { position: relative; text-align: start; background: rgba(255, 250, 240, .96); border: 3px solid #fff; border-radius: 24px; padding: 16px 18px; box-shadow: var(--shadow); display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: center; transition: transform .15s; color: var(--ink); font-family: Rubik, sans-serif; }
.recipe:not(.locked):hover { transform: translateY(-4px) rotate(-.6deg); }
.recipe .emoji { grid-row: span 3; font-size: 54px; width: 84px; height: 84px; display: grid; place-content: center; background: linear-gradient(145deg, #ffe9b8, #f6c56b); border-radius: 22px; }
.recipe h2 { margin: 0; font-size: 21px; color: var(--blue); }
.recipe .tag { justify-self: start; font-size: 13px; font-weight: 700; background: var(--blue); color: #fff; border-radius: 999px; padding: 2px 12px; }
.recipe .stars { font-size: 20px; color: var(--gold); letter-spacing: 2px; }
.recipe .stars i { font-style: normal; color: #d8cdb8; }
.recipe.locked { filter: grayscale(.8); opacity: .75; cursor: not-allowed; }
.recipe.locked::after { content: "🔒"; position: absolute; inset-inline-end: 14px; bottom: 12px; font-size: 24px; }
#menu footer { margin-top: auto; font-size: 13px; background: rgba(255, 250, 240, .9); border-radius: 999px; padding: 6px 16px; }

#card { justify-content: center; background: rgba(31, 40, 70, .45); backdrop-filter: blur(3px); }
#card.clear { background: linear-gradient(180deg, transparent 45%, rgba(31, 40, 70, .5)); backdrop-filter: none; justify-content: flex-end; }
.panel { width: min(520px, 100%); background: var(--cream); border: 4px solid #fff; border-radius: 28px; padding: 22px 24px; box-shadow: var(--shadow); text-align: center; animation: rise .35s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes rise { from { transform: translateY(40px) scale(.9); opacity: 0; } }
.panel .kicker { font-weight: 700; color: var(--blue2); font-size: 15px; }
.panel h2 { margin: 4px 0 8px; font-size: clamp(24px, 4.5vw, 32px); color: var(--blue); }
.panel p { margin: 6px 0; font-size: 17px; line-height: 1.45; }
.panel .medal { font-size: 72px; line-height: 1; animation: bob 1.4s ease-in-out infinite; }
.panel .score { font-family: "Secular One"; font-size: 30px; color: var(--gold); }
.panel .tip { text-align: start; background: #fff; border-radius: 18px; padding: 12px 16px; margin: 12px 0; border-inline-start: 6px solid var(--gold); font-size: 16px; line-height: 1.5; }
.panel .tip b { color: var(--blue); }
.panel .granny { display: flex; align-items: center; gap: 12px; text-align: start; justify-content: center; }
.panel .bigstars { font-size: 54px; color: var(--gold); letter-spacing: 6px; text-shadow: 0 4px 0 #a87510; }
.panel .bigstars i { font-style: normal; color: #ddd2bd; text-shadow: none; }
.panel .row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }

@media (max-width: 560px) {
  .avatar { width: 50px; height: 50px; } .avatar.big { width: 70px; height: 70px; }
  .topbar .title { font-size: 15px; padding: 8px 14px; }
  .recipe .emoji { width: 66px; height: 66px; font-size: 42px; }
  .panel { padding: 18px 16px; } .panel .medal { font-size: 56px; }
}