/* ===== RESET ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Segoe UI', 'Comic Sans MS', cursive, sans-serif;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #87CEEB;
}

/* ===== OBRAZOVKY ===== */
.screen { display: none; position: fixed; inset: 0; }
.screen.active { display: flex; }

/* ===== ÚVODNÍ OBRAZOVKA ===== */
#screen-title { align-items: stretch; }

.title-bg {
  flex: 1;
  background: linear-gradient(to bottom,
    #05000c 0%,
    #09103d 4%,
    #112278 18%,
    #2258d0 38%,
    #7abef8 60%,
    #c4a4f0 80%,
    #f0bce4 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 1.5rem;
}

/* Plovoucí pastelové bubliny */
.title-particles { position: absolute; inset: 0; pointer-events: none; }
.title-particles i {
  position: absolute;
  border-radius: 50%;
  animation: particleRise linear infinite;
  opacity: 0;
}
.title-particles i:nth-child(1)  { width:10px; height:10px; background:#FFB6C1; left:7%;  bottom:2%;  animation-duration:9s;  animation-delay:0s;   }
.title-particles i:nth-child(2)  { width:6px;  height:6px;  background:#C8A0E8; left:18%; bottom:20%; animation-duration:12s; animation-delay:1.5s; }
.title-particles i:nth-child(3)  { width:8px;  height:8px;  background:#A8D8F8; left:32%; bottom:5%;  animation-duration:10s; animation-delay:3s;   }
.title-particles i:nth-child(4)  { width:5px;  height:5px;  background:#FFCCDD; left:48%; bottom:25%; animation-duration:14s; animation-delay:0.8s; }
.title-particles i:nth-child(5)  { width:9px;  height:9px;  background:#D0B0F0; left:62%; bottom:10%; animation-duration:11s; animation-delay:2s;   }
.title-particles i:nth-child(6)  { width:6px;  height:6px;  background:#FFB6C1; left:77%; bottom:2%;  animation-duration:8s;  animation-delay:4s;   }
.title-particles i:nth-child(7)  { width:7px;  height:7px;  background:#B0D8FF; left:88%; bottom:15%; animation-duration:13s; animation-delay:1s;   }
.title-particles i:nth-child(8)  { width:5px;  height:5px;  background:#F0C0D8; left:14%; bottom:50%; animation-duration:10s; animation-delay:5s;   }
.title-particles i:nth-child(9)  { width:8px;  height:8px;  background:#C0E0FF; left:56%; bottom:40%; animation-duration:15s; animation-delay:2.5s; }
.title-particles i:nth-child(10) { width:6px;  height:6px;  background:#E8B0E8; left:38%; bottom:60%; animation-duration:11s; animation-delay:6s;   }
.title-particles i:nth-child(11) { width:4px;  height:4px;  background:#FFD0E8; left:72%; bottom:55%; animation-duration:9s;  animation-delay:3.5s; }
.title-particles i:nth-child(12) { width:7px;  height:7px;  background:#B8E8D8; left:93%; bottom:35%; animation-duration:12s; animation-delay:1.8s; }

@keyframes particleRise {
  0%   { transform: translateY(0) scale(0.6); opacity: 0; }
  12%  { opacity: 0.85; }
  88%  { opacity: 0.55; }
  100% { transform: translateY(-85vh) scale(1.3); opacity: 0; }
}

/* Layout: scéna vlevo, karta vpravo */
.title-layout {
  display: flex;
  align-items: flex-end;
  gap: 2rem;
  max-width: 980px;
  width: 100%;
  z-index: 2;
}

.title-scene {
  display: flex;
  align-items: flex-end;
  flex-shrink: 0;
}
.title-witch {
  height: clamp(180px, 44vh, 440px);
  width: auto;
  display: block;
  filter: drop-shadow(0 8px 24px rgba(120,50,180,0.22));
  animation: titleWitchBob 3.5s ease-in-out infinite;
}
.title-goblet {
  height: clamp(70px, 17vh, 170px);
  width: auto;
  display: block;
  margin-left: -18px;
  margin-bottom: 6px;
  animation: titleGobletGlow 2.8s ease-in-out infinite;
}
@keyframes titleWitchBob {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-9px); }
}
@keyframes titleGobletGlow {
  0%,100% { filter: drop-shadow(0 4px 12px rgba(100,40,150,0.2)); }
  50%     { filter: drop-shadow(0 4px 22px rgba(200,80,220,0.5)); }
}

/* Karta s nadpisem a tlačítky */
.title-card {
  background: rgba(255,255,255,0.10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 28px;
  padding: clamp(1.2rem,3vw,2.2rem) clamp(1.4rem,4vw,2.8rem);
  text-align: center;
  box-shadow: 0 8px 40px rgba(0,8,50,0.30);
  flex: 1;
  max-width: 440px;
  min-width: 260px;
  z-index: 2;
}

.title-h1 {
  font-size: clamp(1.8rem, 4.5vw, 2.8rem);
  color: #ffffff;
  line-height: 1.2;
  margin-bottom: 0.4rem;
  text-shadow: 0 2px 14px rgba(10,0,60,0.8), 0 0 32px rgba(140,100,255,0.45);
}
.title-h1 em {
  font-style: normal;
  color: #ffc0e8;
}

.title-sub {
  font-size: clamp(0.85rem, 1.8vw, 1rem);
  color: rgba(255,255,255,0.88);
  margin: 0.3rem 0 1.2rem;
  line-height: 1.45;
  text-shadow: 0 1px 6px rgba(0,0,40,0.6);
}

.diff-btns {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.diff-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 1.2rem;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 18px;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 3px 12px rgba(0,0,40,0.18);
}
.diff-btn:hover  { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,40,0.28); }
.diff-btn:active { transform: translateY(0); }

.d1 { background: rgba(255,255,255,0.13); }
.d2 { background: rgba(255,255,255,0.13); }
.d3 { background: rgba(255,255,255,0.13); }

.diff-star { width: 52px; height: 52px; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0,0,40,0.35)); }

/* ===== TLAČÍTKO PŘEČTI SI MĚ ===== */
.readme-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin: 0 auto 0.8rem;
  display: flex;
  justify-content: center;
  width: 100%;
  transition: transform 0.15s, filter 0.15s;
}
.readme-btn img { width: clamp(70px,9vw,110px); height: auto; display: block; }
.readme-btn:hover { transform: translateY(-2px); filter: brightness(1.08); }

/* ===== MODÁL NÁVODU ===== */
.readme-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,20,0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
}
.readme-overlay.hidden { display: none; }
.readme-box {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.readme-img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 16px;
  display: block;
}
.readme-close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.92);
  color: #333;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  transition: background 0.15s;
  z-index: 1;
}
.readme-close:hover { background: #fff; }

/* Tablet/mobil */
@media (max-width: 680px) {
  .title-bg       { overflow-y: auto; padding: 1rem; }
  .title-particles { display: none; }
  .title-layout   { flex-direction: column; align-items: center; gap: 0.6rem; padding-bottom: 1rem; }
  .title-witch    { height: clamp(110px, 22vh, 180px); }
  .title-goblet   { height: clamp(45px, 9vh, 80px); }
  .title-card     { max-width: 100%; min-width: unset; width: 100%; }
}

/* ===== DEKORACE ÚVODNÍ OBRAZOVKY ===== */
.title-deco { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.tdeco { position: absolute; pointer-events: none; user-select: none; }

.tdeco-cat      { left: 1%;  bottom: 0;    width: clamp(80px,10vw,130px);  animation: tdecoBob 3.2s ease-in-out infinite; }
.tdeco-bat      { right: 3%; top: 13%;    width: clamp(50px,7vw,88px);   animation: tdecoFly 4s ease-in-out infinite; filter: drop-shadow(0 0 8px rgba(180,160,255,0.55)) brightness(1.5); }
.tdeco-campfire { right: 2%; bottom: 0;   height: clamp(140px,36vh,360px); width: auto; animation: tdecoGlow 2.5s ease-in-out infinite; }
/* srdíčka – původní */
.tdeco-heart1   { left: 7%;  top: 13%;    width: clamp(28px,3vw,44px);   opacity: 0.85; animation: tdecoBob 3.8s ease-in-out infinite; }
.tdeco-heart2   { right: 11%; top: 28%;  width: clamp(22px,2.5vw,36px);  opacity: 0.75; animation: tdecoBob 4.4s ease-in-out infinite 0.6s; }
.tdeco-heart3   { right: 20%; bottom: 20%; width: clamp(24px,2.5vw,38px); opacity: 0.8; animation: tdecoSpin 7s linear infinite; }
.tdeco-heart4   { left: 32%; top: 7%;    width: clamp(20px,2vw,32px);    opacity: 0.7;  animation: tdecoBob 5s ease-in-out infinite 1s; }
/* srdíčka – nová */
.tdeco-heart5   { left: 55%; top: 18%;   width: clamp(34px,3.8vw,54px);  opacity: 0.85; animation: tdecoBob 4.1s ease-in-out infinite 0.4s; }
.tdeco-heart6   { left: 18%; bottom: 28%; width: clamp(16px,1.6vw,24px); opacity: 0.65; animation: tdecoBob 5.5s ease-in-out infinite 1.2s; }
.tdeco-heart7   { left: 68%; top: 9%;    width: clamp(28px,2.8vw,44px);  opacity: 0.8;  animation: tdecoSpin 8s linear infinite reverse; }
.tdeco-heart8   { left: 40%; bottom: 10%; width: clamp(20px,2.2vw,34px); opacity: 0.7;  animation: tdecoBob 3.6s ease-in-out infinite 2s; }
/* hvězdičky – původní */
.tdeco-star1    { left: 5%;  top: 44%;   width: clamp(26px,2.8vw,40px);  opacity: 0.8;  animation: tdecoSpin 8s linear infinite; }
.tdeco-star2    { right: 22%; bottom: 16%; width: clamp(22px,2.5vw,36px); opacity: 0.75; animation: tdecoSpin 7s linear infinite reverse; }
.tdeco-star3    { left: 44%; top: 5%;    width: clamp(20px,2vw,30px);    opacity: 0.85; animation: tdecoBob 3.5s ease-in-out infinite 0.3s; }
.tdeco-star4    { right: 27%; top: 10%;  width: clamp(18px,2vw,28px);    opacity: 0.7;  animation: tdecoSpin 9s linear infinite; }
/* hvězdičky – nové */
.tdeco-star5    { left: 22%; top: 55%;   width: clamp(30px,3.2vw,48px);  opacity: 0.8;  animation: tdecoSpin 6.5s linear infinite; }
.tdeco-star6    { left: 60%; bottom: 28%; width: clamp(14px,1.5vw,22px); opacity: 0.6;  animation: tdecoSpin 11s linear infinite reverse; }
.tdeco-star7    { right: 32%; top: 42%;  width: clamp(26px,2.6vw,40px);  opacity: 0.75; animation: tdecoBob 4.8s ease-in-out infinite 0.7s; }
.tdeco-star8    { left: 77%; top: 32%;   width: clamp(18px,1.8vw,28px);  opacity: 0.65; animation: tdecoSpin 10s linear infinite; }

@keyframes tdecoBob {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-9px); }
}
@keyframes tdecoFly {
  0%,100% { transform: translateY(0) rotate(0deg); }
  33%     { transform: translateY(-7px) rotate(-6deg); }
  66%     { transform: translateY(-12px) rotate(6deg); }
}
@keyframes tdecoGlow {
  0%,100% { filter: brightness(1) drop-shadow(0 0 4px rgba(255,140,0,0.4)); }
  50%     { filter: brightness(1.2) drop-shadow(0 0 14px rgba(255,100,0,0.7)); }
}
@keyframes tdecoSpin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@media (max-width: 680px) {
  .tdeco-cat, .tdeco-bat, .tdeco-campfire { display: none; }
  .tdeco-heart1, .tdeco-heart2, .tdeco-heart5, .tdeco-heart6,
  .tdeco-star1, .tdeco-star2, .tdeco-star5, .tdeco-star6 { display: none; }
}

/* ===== OBRAZOVKA RECEPTU ===== */
#screen-recipe { align-items: stretch; }

.recipe-bg {
  flex: 1;
  background: url('assets/background/background-meadow.png') bottom center / 100% auto no-repeat;
  background-color: #5CAF30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.recipe-layout {
  display: flex;
  align-items: flex-end;
  gap: clamp(32px, 3.5vw, 48px);
  width: 100%;
  max-width: 1060px;
}

.witch-reading {
  height: clamp(340px, 48vh, 480px);
  width: auto;
  flex-shrink: 0;
}

.recipe-scroll {
  background-image: url('assets/ui/recipe-panel.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border-radius: 20px;
  padding: 2.2rem 2.6rem 2rem;
  width: clamp(460px, 52vw, 740px);
  flex-shrink: 0;
  text-align: center;
}

.recipe-scroll h2 {
  font-size: clamp(1.7rem, 2.8vw, 2.1rem);
  color: #4A1860;
  margin-bottom: 0.35rem;
  text-shadow: 0 1px 3px rgba(255,255,255,0.7);
}
.recipe-scroll p {
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: #5A3870;
  margin-bottom: 1rem;
}

/* Seznam ingrediencí – bez boxů */
.recipe-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.8rem;
  margin: 0 auto 0.6rem;
  width: fit-content;
}
.recipe-list-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem 2.4rem;
  justify-items: start;
}

.recipe-row {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.5vw, 30px);
  background: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: 0;
  min-height: unset;
}
.recipe-row-ico {
  width: 56px;
  height: 56px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,0.18));
}
.recipe-row-label { display: none; }
.recipe-row-count {
  font-size: clamp(1.4rem, 2.2vw, 1.7rem);
  font-weight: 700;
  color: #7B2FA6;
  min-width: 48px;
  width: auto;
  text-align: left;
  flex-shrink: 0;
}

.btn-primary {
  margin-top: 1.2rem;
  padding: 0.75rem 2rem;
  background: linear-gradient(135deg, #C060B0, #A040A0);
  color: #fff;
  border: none;
  border-radius: 20px;
  font-size: 1.05rem;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(160,40,160,0.3);
  transition: transform 0.15s, box-shadow 0.15s;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(160,40,160,0.4); }

.recipe-scroll .btn-primary {
  margin-top: 1.4rem;
  padding: 0.85rem 2.4rem;
  font-size: clamp(1.1rem, 1.8vw, 1.3rem);
  border-radius: 22px;
}

@media (max-width: 780px) {
  .recipe-layout { flex-direction: column; align-items: center; gap: 0.8rem; }
  .witch-reading { height: clamp(130px, 20vh, 200px); }
  .recipe-scroll { width: 100%; }
}

/* ===== HORNÍ LIŠTA ===== */
#top-bar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.7rem;
  background: rgba(255,255,255,0.9);
  border-bottom: 2px solid rgba(180,100,180,0.18);
  z-index: 300;
  min-height: 52px;
  flex-shrink: 0;
}

.bar-btn {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  border: 2px solid rgba(180,100,180,0.22);
  background: #fff;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.15s, background 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
}
.bar-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.bar-btn:hover:not(:disabled) { transform: scale(1.1); background: #FFF0F7; }
.bar-btn:disabled              { opacity: 0.3; cursor: not-allowed; }

#collected-bar {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0 0.3rem;
  min-height: 38px;
  overflow-x: auto;
}

.coll-item {
  height: 34px;
  width: auto;
  animation: popIn 0.3s ease-out;
  flex-shrink: 0;
  display: block;
}

@keyframes popIn {
  0%   { transform: scale(0) rotate(-20deg); opacity: 0; }
  70%  { transform: scale(1.25) rotate(5deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* ===== HERNÍ SCÉNA ===== */
#screen-game { flex-direction: column; }

#game-scene {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: url('assets/background/background-meadow.png') bottom center / cover no-repeat;
  background-color: #5CAF30;
}

/* ===== ČARODĚJKA ===== */
#witch {
  position: absolute;
  left: 2%;
  bottom: 0;
  height: clamp(280px, 55vh, 520px);
  z-index: 15;
  user-select: none;
}
#witch-img {
  height: 100%;
  width: auto;
  display: block;
}

/* Čarodějka – stavy animace */
#witch.happy   #witch-img { animation: witchBounce 0.55s ease-in-out infinite; }
#witch.scared  #witch-img { animation: witchJump 0.9s ease-in-out 2 forwards; }
#witch.making  #witch-img { animation: witchBounce 0.7s ease-in-out 3 forwards; }

@keyframes witchBounce {
  0%,100% { transform: translateY(0) rotate(0deg); }
  30%      { transform: translateY(-6px) rotate(-3deg); }
  70%      { transform: translateY(-6px) rotate( 3deg); }
}
@keyframes witchJump {
  0%   { transform: translateY(0); }
  25%  { transform: translateY(-30px); }
  50%  { transform: translateY(-38px); }
  75%  { transform: translateY(-18px); }
  100% { transform: translateY(0); }
}

/* ===== POHÁR ===== */
#cauldron-wrap {
  position: absolute;
  right: 8%;
  bottom: 0;
  height: clamp(130px, 26vh, 240px);
  z-index: 10;
}
#goblet-img {
  height: 100%;
  width: auto;
  display: block;
}

/* Pohár – třes při neúspěchu */
#cauldron-wrap.bubbling #goblet-img {
  animation: gobletShake 0.25s ease-in-out infinite alternate;
}
@keyframes gobletShake {
  0%   { transform: rotate(-3deg); }
  100% { transform: rotate( 3deg); }
}

/* Pohár – radostné bublání po dosažení bubbleAt správných ingrediencí */
#cauldron-wrap.cheering #goblet-img {
  animation: gobletCheer 1s ease-in-out infinite;
}
#cauldron-wrap.cheering::after {
  content: '';
  position: absolute;
  inset: -10% -5% 30% -5%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255,180,230,0.55) 0%, rgba(200,120,220,0.0) 70%);
  pointer-events: none;
  animation: gobletGlow 1.6s ease-in-out infinite;
  z-index: -1;
}
@keyframes gobletCheer {
  0%,100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-5px) scale(1.04); }
}
@keyframes gobletGlow {
  0%,100% { opacity: 0.4; transform: scale(0.95); }
  50%      { opacity: 0.85; transform: scale(1.08); }
}

/* Drop zóna – zvýraznění při tažení nad pohárem */
#cauldron-wrap.drop-active::before {
  content: '';
  position: absolute;
  inset: -48px;
  border-radius: 50%;
  border: 3px dashed rgba(200,80,220,0.55);
  background: rgba(200,80,220,0.09);
  pointer-events: none;
  animation: dropZonePulse 0.55s ease-in-out infinite alternate;
}
@keyframes dropZonePulse {
  0%   { opacity: 0.5; transform: scale(0.94); }
  100% { opacity: 1;   transform: scale(1.06); }
}

/* ===== INGREDIENCE ===== */
.ingredient {
  position: absolute;
  cursor: grab;
  touch-action: none;
  user-select: none;
  z-index: 20;
  transition: transform 0.15s;
}
.ingredient img {
  width: clamp(64px, 9vw, 96px);
  height: auto;
  display: block;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.3));
  pointer-events: none;
}
.ingredient:hover { transform: scale(1.15); }
.ingredient.dragging { cursor: grabbing; transition: none !important; transform: scale(1.1); }
.ingredient.dragging:hover { transform: scale(1.1); }

/* Vítrová ingredience – pulzující záblesk naznačuje, že zmizí */
.ingredient.wind-obj img { animation: windPulse 1.1s ease-in-out infinite; }
@keyframes windPulse {
  0%,100% { filter: drop-shadow(0 3px 6px rgba(0,0,0,0.3)); }
  50%      { filter: drop-shadow(0 3px 12px rgba(100,180,255,0.8)); opacity: 0.8; }
}

.ingredient.wiggle { animation: wiggleAnim 0.4s ease-in-out; }

@keyframes wiggleAnim {
  0%,100% { transform: rotate(0deg) scale(1); }
  20%      { transform: rotate(-12deg) scale(1.1); }
  40%      { transform: rotate( 12deg) scale(1.1); }
  60%      { transform: rotate(-8deg); }
  80%      { transform: rotate( 8deg); }
}

.ingredient.flying {
  animation: flyAway 0.65s ease-in forwards;
  pointer-events: none;
}

@keyframes flyAway {
  0%   { transform: scale(1) translate(0,0);          opacity: 1; }
  50%  { transform: scale(1.25) translate(30px,-20px); opacity: 0.85; }
  100% { transform: scale(0.1) translate(160px,-70px); opacity: 0; }
}

/* ===== SRDÍČKA ===== */
.heart-fx {
  position: absolute;
  font-size: 1.7rem;
  pointer-events: none;
  animation: heartFly 1.4s ease-out forwards;
  z-index: 50;
}

@keyframes heartFly {
  0%   { transform: translateY(0) scale(1) rotate(0deg);    opacity: 1; }
  100% { transform: translateY(-110px) scale(0.4) rotate(30deg); opacity: 0; }
}

/* ===== ROZLITÁ VODA ===== */
.spill-drop {
  position: absolute;
  width: 10px; height: 10px;
  background: rgba(160,210,255,0.75);
  border-radius: 50%;
  pointer-events: none;
  animation: spillFall 0.9s ease-out forwards;
  z-index: 50;
}
@keyframes spillFall {
  0%   { transform: translateY(-20px) scale(1); opacity: 1; }
  100% { transform: translateY(50px) scale(0.2); opacity: 0; }
}

/* ===== MODÁL ===== */
.modal-bg {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.42);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}
.modal-bg.hidden { display: none; }

.modal-box {
  background-image: url('assets/ui/recipe-panel.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-color: rgba(255,248,235,0.97);
  border-radius: 22px;
  padding: 2.2rem 2.2rem 1.8rem;
  max-width: 370px;
  width: 90%;
  text-align: center;
  box-shadow: 0 12px 40px rgba(0,0,0,0.22);
}
.modal-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: #8B3EA6;
  margin-bottom: 1rem;
}

/* ===== VÝSLEDNÉ OVERLAYE ===== */
.game-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 10%;
  z-index: 150;
  pointer-events: none;
}
.game-overlay.hidden { display: none; }
.game-overlay:not(.hidden) { pointer-events: auto; }

.btn-result {
  padding: 1rem 2.5rem;
  border: none;
  border-radius: 24px;
  font-size: 1.25rem;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
  transition: transform 0.15s;
  animation: popIn 0.5s ease-out;
}
.btn-result:hover { transform: scale(1.06); }

.btn-ok    { background: linear-gradient(135deg, #FF85A2, #E0509E); color: #fff; }
.btn-retry { background: linear-gradient(135deg, #80C0FF, #4090E0); color: #fff; }

/* ===== OVERLAY INSTRUKCE (uroven 1) ===== */
#overlay-intro { justify-content: center; background: rgba(0,0,0,0.38); }

.intro-card {
  background: rgba(255,255,255,0.96);
  border-radius: 24px;
  padding: 2rem 2.5rem;
  text-align: center;
  box-shadow: 0 8px 32px rgba(160,80,180,0.22);
  max-width: 360px;
  width: 90%;
}
.intro-imgs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 1.4rem;
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
}
.intro-ing-img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,0.22));
}

/* ===== OVERLAY: OTOČENÍ TELEFONU ===== */
#rotate-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: linear-gradient(to bottom, #09103d 0%, #2258d0 55%, #c4a4f0 100%);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  text-align: center;
  padding: 2rem;
}

/* Zobrazit pouze v portrétním režimu na herních obrazovkách (ne na titulní).
   Třída .rotate-needed se nastavuje z JS (spolehlivé na iOS Safari, kde
   `@media (orientation)` nemusí reagovat na otočení). CSS media query je
   ponechána jako záloha pro desktop a non-iOS prohlížeče. */
#rotate-overlay.game-screen-active.rotate-needed { display: flex; }

@media (orientation: portrait) and (max-width: 768px) {
  #rotate-overlay.game-screen-active { display: flex; }
}
@media (orientation: landscape) {
  /* JS-driven režim má přednost – pokud JS rozhodne, že overlay není
     potřeba, force-skryjeme i kdyby výše uvedená CSS pravidla matchovala. */
  #rotate-overlay.game-screen-active:not(.rotate-needed) { display: none; }
}

.rotate-phone {
  font-size: 5rem;
  animation: rotatePhone 2s ease-in-out infinite;
  display: block;
}
@keyframes rotatePhone {
  0%,100% { transform: rotate(0deg);   }
  35%      { transform: rotate(-90deg); }
  65%      { transform: rotate(-90deg); }
}

.rotate-text {
  color: #fff;
  font-size: clamp(1.3rem, 6vw, 1.9rem);
  font-weight: 700;
  line-height: 1.45;
  text-shadow: 0 2px 10px rgba(0,0,40,0.6);
}

.rotate-arrow {
  font-size: 3rem;
  color: rgba(255,255,255,0.75);
  animation: arrowPulse 1.8s ease-in-out infinite;
}
@keyframes arrowPulse {
  0%,100% { transform: scale(1);    opacity: 0.75; }
  50%      { transform: scale(1.25); opacity: 1;    }
}

/* ===== MOBILNÍ RESPONZIVITA – LANDSCAPE (telefony) ===== */
/* Landscape telefon: výška <= 500px, orientace landscape */
@media (max-height: 500px) and (orientation: landscape) {

  /* Horní lišta – kompaktnější */
  #top-bar {
    min-height: 40px;
    padding: 0.15rem 0.4rem;
    gap: 0.2rem;
  }
  .bar-btn { width: 36px; height: 36px; }
  .bar-btn img { width: 20px; height: 20px; }

  /* Čarodějka – menší, aby nezabírala celou scénu */
  #witch { height: clamp(90px, 40vh, 170px); }

  /* Pohár – menší, více vpravo */
  #cauldron-wrap {
    height: clamp(75px, 30vh, 130px);
    right: 3%;
  }

  /* Ingredience – škálovat podle výšky scény (vh), ne šířky */
  .ingredient img { width: clamp(48px, 13vh, 72px); }

  /* Lišta sebraných ingrediencí */
  .coll-item { height: 26px; }

  /* Tlačítka výsledku */
  .btn-result {
    font-size: 1rem;
    padding: 0.55rem 1.4rem;
  }

  /* Intro overlay úrovně 1 */
  .intro-card { padding: 0.8rem 1.2rem; }
  .intro-ing-img { width: 50px; height: 50px; }

  /* Pozadí optimalizované pro landscape (mobil) */
  #game-scene,
  .recipe-bg {
    background-image: url('assets/background/background-meadow-landscape.png');
    background-size: cover;
    background-position: center center;
  }

  /* Recept obrazovka (úrovně 2–3) – kompaktní v landscape */
  .recipe-bg { padding: 0.4rem 0.8rem; }
  .recipe-layout {
    flex-direction: row;
    align-items: center;
    gap: 0.8rem;
    padding: 0;
    max-height: 100%;
  }
  .witch-reading { height: clamp(90px, 30vh, 150px); }
  .recipe-scroll {
    width: clamp(200px, 38vw, 380px);
    padding: 0.5rem 0.9rem;
    max-height: 96vh;
    overflow-y: auto;
  }
  .recipe-scroll h2 { font-size: clamp(1rem, 4.5vh, 1.4rem); margin-bottom: 0.15rem; }
  .recipe-scroll p  { font-size: clamp(0.75rem, 2.6vh, 0.95rem); margin-bottom: 0.4rem; }
  .recipe-list { gap: 0.25rem; margin-bottom: 0.3rem; }
  .recipe-list-grid { gap: 0.25rem 1.6rem; }
  .recipe-row { gap: 14px; }
  .recipe-row-ico { width: 34px; height: 34px; }
  .recipe-row-count { font-size: 1rem; min-width: 32px; }
  .recipe-scroll .btn-primary {
    margin-top: 0.5rem;
    padding: 0.4rem 1.2rem;
    font-size: 0.95rem;
  }

  /* Modal receptu */
  .modal-box { padding: 1rem 1.2rem; max-height: 90vh; overflow-y: auto; }
}

/* ===== HELPERS ===== */
.hidden { display: none !important; }