/* /gry/gry.css - style wyłącznie dla mini-gier Yappers Academy */
/* =======================================================
   YAPPERS MINI GAMES V27 - tylko mini-gry, bez nadpisywania navbara i stopki
======================================================= */
body.games-page-v9 {
  min-height: 100vh;
  background: #7ed8ff;
  color: #4b251d;
  overflow-x: hidden;
}

html:has(body.games-page-v9) {
  overflow-x: hidden !important;
}

body.games-page-v9 main#ya-games-root,
body.games-page-v9 .y9-root {
  font-family: 'Nunito', 'Baloo 2', Arial, sans-serif;
}

body.games-page-v9 .y9-root * {
  font-family: 'Nunito', 'Baloo 2', Arial, sans-serif;
}

body.games-page-v9::before,
body.games-page-v9::after,
body.games-page-v9 main#ya-games-root::before,
body.games-page-v9 main#ya-games-root::after,
body.games-page-v9 .y9-root::before,
body.games-page-v9 .y9-root::after,
body.games-page-v9 .y9-world::before,
body.games-page-v9 .y9-world::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 0 !important;
}

/* =======================================================
   YAPPERS MINI GAMES V9 - COMPACT, THEMATIC, STATIC BACKGROUNDS
======================================================= */

body.games-page-v9 .y9-root {
  width: 100%;
  min-height: calc(100svh - 92px);
  padding: 0;
  margin: 0;
  position: relative;
  overflow: visible;
}

body.games-page-v9 main#ya-games-root {
  padding: 0 !important;
  margin: 0 !important;
}

.y9-world {
  --cream: #fff8ec;
  --brown: #5a2b21;
  position: relative;
  min-height: clamp(650px, calc(100svh - 96px), 820px);
  max-height: 820px;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(8px, 1vh, 12px);
  padding: clamp(10px, 1.2vw, 18px) clamp(24px, 5vw, 88px) clamp(16px, 1.5vw, 24px);
  background-image: var(--y9-bg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
}

.y9-world::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.12) 45%, rgba(94,207,72,0.10));
  pointer-events: none;
}

.y9-hud {
  z-index: 20;
  width: min(1560px, 100%);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}

.y9-hud-left,
.y9-hud-right {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1vw, 18px);
}

.y9-home,
.y9-score,
.y9-hearts,
.y9-progress-card {
  min-height: clamp(48px, 5.5vh, 70px);
  border-radius: 24px;
  border: 3px solid rgba(255,255,255,0.9);
  background: linear-gradient(180deg, #fffef9, #ffeed8);
  box-shadow: 0 6px 0 #c99468, 0 16px 30px rgba(87, 65, 48, 0.18);
  color: var(--brown);
}

.y9-home {
  width: clamp(52px, 4.2vw, 74px);
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #ff86aa, #ef4778);
  color: #fff;
  text-decoration: none;
  font-size: clamp(25px, 2.3vw, 36px);
  box-shadow: 0 6px 0 #bf335c, 0 16px 30px rgba(87, 65, 48, 0.18);
}

.y9-score {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: 17px 1fr;
  align-items: center;
  gap: 0 10px;
  padding: 7px clamp(13px, 1.5vw, 22px);
}

.y9-score span { grid-row: 1 / span 2; font-size: clamp(28px, 2.2vw, 40px); filter: drop-shadow(0 3px 0 rgba(136, 89, 33, .23)); }
.y9-score small { font-weight: 1000; font-size: 12px; line-height: 1; }
.y9-score strong { font-weight: 1000; font-size: clamp(26px, 2.25vw, 42px); line-height: .9; }

.y9-hearts {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 clamp(18px, 1.8vw, 28px);
  gap: 4px;
}

.y9-heart {
  color: #d9b8b2;
  font-size: clamp(19px, 1.5vw, 28px);
  line-height: 1;
}
.y9-heart.is-on { color: #ff4d7c; text-shadow: 0 3px 0 rgba(151,74,96,.17); }

.y9-progress-card {
  appearance: none;
  min-width: clamp(190px, 15vw, 270px);
  padding: 8px 20px;
  border: 3px solid rgba(255,255,255,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 1000;
  font-size: clamp(17px, 1.35vw, 25px);
}

.y9-mini-bar {
  width: clamp(78px, 7vw, 126px);
  height: 13px;
  background: #6c3727;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 2px 3px rgba(0,0,0,.22);
}
.y9-mini-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #70e75c, #fff35f); }

.y9-board-wrap {
  width: min(1120px, calc(100% - 300px));
  margin: 0 auto;
  align-self: center;
  transform: translateY(clamp(-38px, -4.2vh, -16px));
  z-index: 8;
}

.y9-board {
  width: 100%;
  border: 4px solid rgba(255,255,255,.76);
  border-radius: 28px;
  background: rgba(222, 250, 255, .45);
  box-shadow: 0 18px 38px rgba(76, 125, 108, .18), inset 0 0 34px rgba(255,255,255,.23);
  backdrop-filter: blur(5px);
  padding: clamp(14px, 1.2vw, 22px);
}

.y9-game-board {
  min-height: clamp(430px, 52vh, 560px);
  max-height: clamp(470px, 57vh, 610px);
  overflow: hidden;
}

.y9-menu-board {
  min-height: 430px;
  max-height: 600px;
  transform: translateY(-12px);
}

.y9-prompt {
  min-height: 86px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  border-radius: 24px;
  border: 3px dashed rgba(228,155,93,.45);
  background: linear-gradient(180deg, #fffaf1, #fff0df);
  box-shadow: 0 6px 0 rgba(200,139,88,.33), 0 13px 24px rgba(82,53,34,.12);
  padding: 13px 18px;
  margin-bottom: 12px;
}

.y9-speaker {
  appearance: none;
  border: 4px solid rgba(255,255,255,.85);
  border-radius: 50%;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #ff76a2, #ee4075);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 0 #bf315c, 0 12px 22px rgba(124,56,70,.18);
  font-size: 30px;
}

.y9-prompt h2 { margin: 0 0 3px; color: var(--brown); font-family: 'Baloo 2','Nunito',Arial,sans-serif; font-size: clamp(23px, 2vw, 34px); line-height: 1; font-weight: 800; }
.y9-prompt p { margin: 0; color: rgba(85,48,38,.82); font-size: clamp(13px, 1vw, 16px); font-weight: 900; line-height: 1.22; }
.y9-notes { color: #ff4d91; font-size: clamp(26px, 2.3vw, 42px); font-weight: 1000; }

.y9-pill {
  width: max-content;
  margin: 0 auto 12px;
  padding: 7px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.84);
  color: #6b382b;
  font-size: 14px;
  font-weight: 1000;
  box-shadow: 0 7px 17px rgba(62, 50, 40, .11);
}
.y9-pill.is-good { color: #338435; }
.y9-pill.is-bad { color: #b13e4e; }

.y9-card-grid,
.y9-choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(10px, 1vw, 15px);
}

.y9-vocab-card,
.y9-menu-card,
.y9-memory-card,
.y9-food-card,
.y9-match-word,
.y9-match-pic,
.y9-word-chip,
.y9-main,
.y9-small,
.y9-prizes,
.y9-round,
.y9-track-dot,
.y9-ok {
  font-family: 'Nunito','Baloo 2',Arial,sans-serif;
}

.y9-vocab-card {
  position: relative;
  appearance: none;
  min-height: clamp(98px, 12vh, 132px);
  border-radius: 22px;
  border: 4px solid var(--b,#94df80);
  background: linear-gradient(180deg, #fff, var(--bg,#f0ffec));
  box-shadow: 0 6px 0 var(--s,#67b95a), 0 12px 18px rgba(75,82,55,.16);
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--c,#45a245);
  transition: .15s ease;
  overflow: hidden;
}
.y9-vocab-card:nth-child(2n){--b:#ffc66e;--s:#d4974b;--bg:#fff3dc;--c:#d17935}
.y9-vocab-card:nth-child(3n){--b:#84caff;--s:#5798d3;--bg:#eaf7ff;--c:#2e82cc}
.y9-vocab-card:nth-child(4n){--b:#c6a6ff;--s:#9873d1;--bg:#f4edff;--c:#8057d2}
.y9-vocab-card:nth-child(5n){--b:#8be2d2;--s:#57aa9c;--bg:#ecfffb;--c:#298f83}
.y9-vocab-card:nth-child(6n){--b:#ff9fbd;--s:#d76a8d;--bg:#fff0f5;--c:#cf5378}
.y9-vocab-card:hover,.y9-food-card:hover,.y9-match-word:hover,.y9-match-pic:hover,.y9-menu-card:hover,.y9-word-chip:hover{ transform: translateY(-3px); filter: brightness(1.04); }
.y9-vocab-card .y9-emoji { font-size: clamp(42px, 4.6vw, 72px); line-height: 1; }
.y9-vocab-card strong { font-family: 'Baloo 2','Nunito',Arial,sans-serif; font-size: clamp(22px, 2.1vw, 34px); line-height: .92; font-weight: 800; }
.y9-spark { position: absolute; right: 14px; top: 12px; color: #ffc94e; font-size: 20px; }
.y9-vocab-card.is-good,.y9-food-card.is-good,.y9-balloon.is-good,.y9-match-pic.done{ animation: y9Good .55s ease both; }
.y9-vocab-card.is-bad,.y9-food-card.is-bad,.y9-balloon.is-bad,.y9-match-pic.is-bad{ animation: y9Bad .4s ease both; }

.y9-menu-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
}
.y9-menu-card {
  min-height: 126px;
  position: relative;
  display: grid;
  align-content: start;
  gap: 2px;
  text-decoration: none;
  color: #5a2b21;
  border: 4px solid var(--b,#91de80);
  border-radius: 22px;
  background: linear-gradient(180deg,#fff,#fff1df);
  box-shadow: 0 6px 0 var(--s,#5eb351), 0 13px 20px rgba(75,82,55,.16);
  padding: 12px 12px 10px;
}
.y9-card-colors{--b:#ff93bf;--s:#d96691}.y9-card-memory{--b:#ffd270;--s:#d79b42}.y9-card-feed{--b:#ffa563;--s:#d37640}.y9-card-sentence{--b:#7bc1ff;--s:#508fd1}.y9-card-match{--b:#bd9bff;--s:#8c69d0}.y9-card-duel{--b:#ff7da6;--s:#d64d76}.y9-card-horses{--b:#d9a066;--s:#a9743f}
.y9-menu-card .y9-level { position: absolute; right: 10px; top: 10px; padding: 4px 8px; border-radius: 999px; background: #fff6e8; color: #9a5636; font-size: 11px; font-weight: 1000; border: 2px solid rgba(171,109,70,.16); }
.y9-icon { font-size: 34px; line-height: 1; }
.y9-menu-card strong { font-family:'Baloo 2','Nunito',Arial,sans-serif; font-size: clamp(19px,1.4vw,26px); line-height: .95; font-weight: 800; }
.y9-menu-card small { color: #e44f82; font-size: 12px; font-weight: 1000; }
.y9-menu-card p { margin: 2px 0 0; font-size: 12px; line-height: 1.15; font-weight: 900; color: rgba(88,52,42,.75); }

.y9-bottom {
  z-index: 20;
  width: min(1180px, calc(100% - 300px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 12px;
  transform: translateY(6px);
}
.y9-round,.y9-prizes,.y9-track-dot,.y9-main,.y9-small,.y9-ok {
  appearance: none;
  border: 0;
  cursor: pointer;
  font-weight: 1000;
}
.y9-round {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(180deg,#b994ff,#7e55e9);
  color: #fff;
  box-shadow: 0 6px 0 #573db7, 0 12px 20px rgba(63,56,118,.22);
  border: 3px solid rgba(255,255,255,.76);
  display: grid;
  place-items: center;
  font-size: 25px;
}
.y9-round span { display: block; font-size: 10px; margin-top: -8px; }
.y9-prizes {
  min-width: 190px;
  height: 68px;
  border-radius: 999px;
  background: linear-gradient(180deg,#ffdf69,#ffa928);
  color: #fff;
  font-size: clamp(22px,1.8vw,32px);
  text-shadow: 0 2px 0 rgba(128,75,20,.22);
  box-shadow: 0 6px 0 #d8781e, 0 12px 20px rgba(91,74,33,.18);
  border: 4px solid rgba(255,255,255,.76);
}
.y9-track {
  min-height: 58px;
  border-radius: 999px;
  background: rgba(220,255,208,.72);
  border: 4px solid rgba(255,255,255,.72);
  box-shadow: inset 0 0 20px rgba(255,255,255,.28), 0 8px 18px rgba(53,98,44,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 6px 18px;
}
.y9-track-dot {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fffef6;
  box-shadow: 0 4px 0 rgba(149,111,67,.28);
  color: #6a3829;
  display: grid;
  place-items: center;
  position: relative;
  border: 2px solid rgba(255,255,255,.8);
}
.y9-track-dot span { font-size: 24px; line-height: 1; }
.y9-track-dot small { position: absolute; top: 43px; font-size: 9px; font-weight: 1000; color: #346d45; }
.y9-track-dot.is-open { background: linear-gradient(180deg,#fff8da,#ffd668); }
.y9-track-dot.is-locked { filter: grayscale(.3); opacity: .75; }

.y9-memory-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 5), minmax(0,1fr));
  gap: clamp(10px, 1vw, 15px);
  height: clamp(270px, 35vh, 400px);
  align-content: stretch;
}
.y9-memory-card {
  aspect-ratio: 1 / 1;
  border-radius: 20px;
  border: 4px solid #ffd15e;
  background: linear-gradient(180deg,#ff91ca,#a873f4);
  box-shadow: 0 6px 0 #d79c43, 0 12px 16px rgba(84,75,107,.17);
  color: #fff;
  font-size: clamp(30px,3vw,52px);
  font-weight: 1000;
  position: relative;
  transform-style: preserve-3d;
}
.y9-memory-card .front,
.y9-memory-card .back { position: absolute; inset: 0; display: grid; place-items: center; backface-visibility: hidden; }
.y9-memory-card .front { transform: rotateY(180deg); background: #fffdf8; color: #4b251d; border-radius: 16px; font-size: clamp(25px,2.7vw,48px); }
.y9-memory-card .front.is-word { font-size: clamp(16px,1.8vw,28px); font-family:'Baloo 2','Nunito'; color:#3a83cc; }
.y9-memory-card.open,.y9-memory-card.done { transform: rotateY(180deg); background: #fffdf8; }
.y9-memory-card.done { filter: brightness(1.04); border-color: #7ee269; }

.y9-balloon-field {
  position: relative;
  height: clamp(310px, 39vh, 470px);
  overflow: hidden;
  border: 3px solid rgba(255,255,255,.52);
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,.08));
}
.y9-balloon {
  position: absolute;
  left: var(--x);
  bottom: -120px;
  width: 88px;
  height: 108px;
  border: 0;
  background: transparent;
  cursor: pointer;
  animation: y9BalloonRise var(--dur) linear forwards;
}
.y9-balloon span {
  display: block;
  width: 82px;
  height: 94px;
  border-radius: 50% 50% 46% 46%;
  background: radial-gradient(circle at 30% 24%, rgba(255,255,255,.82) 0 10%, transparent 11%), var(--c);
  border: 4px solid rgba(255,255,255,.75);
  box-shadow: 0 8px 0 rgba(102,69,58,.16), 0 14px 18px rgba(65,90,110,.18);
}
.y9-balloon span::after { content:""; position:absolute; left:50%; top:88px; width:2px; height:28px; background:rgba(92,65,55,.38); }

.y9-feed-stage {
  display: grid;
  grid-template-columns: minmax(240px, .85fr) minmax(440px, 1.25fr);
  gap: 18px;
  height: clamp(320px, 41vh, 460px);
}
.y9-frog-zone {
  border-radius: 26px;
  border: 3px dashed rgba(255,255,255,.75);
  background: rgba(255,255,255,.25);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  color: #6a3829;
  font-weight: 1000;
}
.y9-frog-zone.is-over { background: rgba(255,255,255,.48); }
.y9-css-frog { width: 140px; height: 112px; border-radius: 48% 48% 42% 42%; background: #a9f39a; border: 5px solid #10200f; position: relative; box-shadow: 0 10px 0 rgba(61,132,48,.16); }
.y9-css-frog::before,.y9-css-frog::after{ content:""; position:absolute; top:18px; width:34px; height:34px; border-radius:50%; background:#060606; box-shadow: inset 8px -8px 0 rgba(255,255,255,.92); }
.y9-css-frog::before{ left:28px; }.y9-css-frog::after{ right:28px; }
.y9-css-frog .mouth { position:absolute; left:50%; bottom:23px; width:42px; height:18px; border-bottom:5px solid #071007; border-radius:0 0 50px 50px; transform:translateX(-50%); }
.y9-css-frog.is-eating .mouth { height:32px; width:54px; background:#2a0d11; border:5px solid #071007; border-radius:50%; animation:y9Eat .45s ease 2; }
.y9-bowl { font-size: 44px; }
.y9-food-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  grid-auto-rows: minmax(86px, 1fr);
  gap: 10px;
  overflow: hidden;
}
.y9-food-card {
  border-radius: 18px;
  border: 4px solid #ff9c5b;
  background: linear-gradient(180deg,#fffaf0,#fff0df);
  box-shadow: 0 5px 0 #d67b3d, 0 9px 15px rgba(85,67,48,.15);
  display: grid;
  place-items: center;
  cursor: grab;
  min-height: 0;
  overflow: hidden;
}
.y9-food-card .y9-emoji { font-size: clamp(32px, 3.4vw, 62px); line-height:1; }
.y9-food-card small { font-weight: 1000; color:#9c5637; font-size: 12px; }
.y9-flying-food { position: fixed; z-index: 99999; pointer-events: none; font-size: 48px; animation: y9FoodFly .85s ease both; }

.y9-sentence-slots {
  display: grid;
  grid-template-columns: repeat(7, minmax(80px,1fr));
  gap: 10px;
  margin: 0 auto 15px;
}
.y9-sentence-slots span {
  min-height: 54px;
  border-radius: 15px;
  border: 3px dashed #a8bbd4;
  background: rgba(255,255,255,.48);
  display: grid;
  place-items: center;
  font-weight: 1000;
  color: #2d7cca;
}
.y9-sentence-slots .is-filled { border-style: solid; background:#fffef8; }
.y9-word-bank { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; max-height: 160px; overflow: hidden; }
.y9-word-chip { min-width: 94px; min-height: 46px; padding: 8px 14px; border-radius: 16px; border: 3px solid #8dccff; background:#fff; color:#2a77bd; box-shadow:0 5px 0 #5b9ed4; font-size:18px; }
.y9-word-chip:disabled { opacity:.45; transform: translateY(5px); }
.y9-actions { display:flex; gap:12px; justify-content:center; margin-top:12px; }
.y9-small,.y9-main,.y9-ok { border-radius:999px; padding:12px 18px; font-size:17px; }
.y9-small { background:#fff; color:#7b55c7; box-shadow:0 5px 0 #b8a1e4; }
.y9-main,.y9-ok { background:linear-gradient(180deg,#ffdc60,#ffac2d); color:#6c351e; box-shadow:0 5px 0 #c8701c; }

.y9-match-stage { display:grid; grid-template-columns: minmax(230px,.85fr) 1.15fr; gap:16px; height: clamp(310px, 40vh, 455px); overflow: hidden; }
.y9-match-words { display:grid; grid-template-rows: repeat(6, 1fr); gap:9px; }
.y9-match-word { border-radius: 15px; border:3px solid #86c8ff; background:#fff; color:#2875bd; font-weight:1000; font-size:18px; box-shadow:0 5px 0 #5e9ed2; }
.y9-match-word.selected { background:#fff6c8; color:#9a5d12; }
.y9-match-word.done { opacity:.4; transform: scale(.98); }
.y9-match-pictures { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px; }
.y9-match-pic { border-radius: 20px; border:4px solid #bd9bff; background:rgba(255,255,255,.88); box-shadow:0 6px 0 #8968cf; font-size: clamp(34px, 4vw, 66px); display:grid; place-items:center; }
.y9-match-pic.done { border-color:#80dd6e; box-shadow:0 6px 0 #54aa46; opacity:.65; }

.y9-duel-arena { display:grid; grid-template-columns: minmax(160px,220px) 1fr minmax(160px,220px); gap:16px; align-items:center; margin-bottom:12px; }
.y9-duel-player { border:3px solid rgba(255,255,255,.75); border-radius:24px; background:rgba(255,255,255,.50); padding:13px; display:grid; place-items:center; gap:5px; box-shadow:0 10px 20px rgba(66,75,61,.13); }
.y9-duel-player.is-turn { outline:5px solid rgba(255,211,85,.7); }
.y9-duel-avatar { font-size: clamp(48px, 5vw, 82px); }
.y9-hp { width:100%; height:12px; background:#7b382c; border-radius:999px; overflow:hidden; }
.y9-hp i { display:block; height:100%; background:linear-gradient(90deg,#ff526d,#fff45d,#66e56e); }
.y9-versus { min-height:120px; border-radius:24px; display:grid; place-items:center; background:rgba(255,255,255,.28); border:3px dashed rgba(255,255,255,.68); position:relative; }
.y9-versus strong { font-size: clamp(40px,5vw,78px); color:#7a3f2c; }
.y9-duel-controls { border-radius:22px; background:rgba(233,255,221,.68); padding:12px; display:grid; grid-template-columns: 1fr 1.6fr auto auto; gap:10px; align-items:end; }
.y9-duel-controls .y9-pill { grid-column:1/-1; margin-bottom:2px; }
.y9-duel-controls label { display:grid; gap:5px; font-weight:1000; color:#6a3829; }
.y9-duel-controls select,.y9-duel-controls input { width:100%; min-height:48px; border-radius:16px; border:3px solid #8dccff; background:#fff; padding:0 14px; font-family:inherit; font-size:17px; font-weight:900; }
.y9-hint { grid-column:1/-1; min-height:20px; text-align:center; font-weight:1000; color:#855032; }
.y9-prank { position:absolute; top:35%; font-size:42px; font-weight:1000; animation:y9Prank .95s ease both; }
.y9-prank.to-frog { left:10%; }.y9-prank.to-princess { right:10%; }

.y9-modal { position: fixed; inset:0; z-index:100000; display:grid; place-items:center; background:rgba(0,0,0,.42); padding:22px; }
.y9-modal-box { width:min(620px, calc(100vw - 30px)); max-height:min(78vh, 640px); overflow:auto; background:#fffaf0; border:4px solid rgba(255,255,255,.9); border-radius:28px; box-shadow:0 20px 70px rgba(0,0,0,.35); padding:22px; color:#5a2b21; text-align:center; }
.y9-modal.is-small .y9-modal-box { width:min(520px, calc(100vw - 30px)); max-height:72vh; }
.y9-modal h3 { margin:0 0 8px; font-family:'Baloo 2','Nunito'; font-size:32px; line-height:1; }
.y9-modal p { margin:0 0 14px; font-weight:800; color:rgba(84,47,37,.8); }
.y9-prize-grid { display:grid; gap:10px; margin:12px 0; }
.y9-prize-card { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; background:#fff; border:2px solid #f1d0aa; border-radius:18px; padding:10px; text-align:left; }
.y9-prize-card > span { font-size:32px; }
.y9-prize-card strong,.y9-prize-card small,.y9-prize-card em { display:block; }
.y9-prize-card strong { font-weight:1000; }.y9-prize-card small { font-size:12px; font-weight:800; color:#7b5a4b; }.y9-prize-card em { font-style:normal; font-size:12px; font-weight:1000; color:#d68125; }
.y9-prize-card button { border:0; border-radius:999px; padding:10px 12px; background:#ffd55c; color:#63341f; font-weight:1000; cursor:pointer; }
.y9-prize-card button:disabled { opacity:.55; cursor:not-allowed; }
.y9-ach-list { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin:16px 0; }
.y9-score-pop { position: fixed; left: 50%; top: 18%; z-index: 99999; color:#ffcf3f; text-shadow:0 4px 0 #7a3f20; font-size:44px; font-weight:1000; animation:y9ScorePop 1.05s ease both; pointer-events:none; }

@keyframes y9Good { 0%{transform:scale(1)} 55%{transform:scale(1.08) rotate(-1deg)} 100%{transform:scale(1)} }
@keyframes y9Bad { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-8px)} 70%{transform:translateX(8px)} }
@keyframes y9BalloonRise { 0%{transform:translate(-50%,0) rotate(-3deg); opacity:1} 100%{transform:translate(calc(-50% + 28px), -128vh) rotate(9deg); opacity:.9} }
@keyframes y9Eat { 0%,100%{transform:translateX(-50%) scale(1)} 50%{transform:translateX(-50%) scale(1.25)} }
@keyframes y9FoodFly { 0%{transform:translate(0,0) scale(1)} 100%{transform:translate(-28vw,-24vh) scale(.2); opacity:0} }
@keyframes y9Prank { 0%{transform:scale(.2) translateY(30px); opacity:0} 50%{transform:scale(1.2) translateY(-10px); opacity:1} 100%{transform:scale(.9) translateY(-35px); opacity:0} }
@keyframes y9ScorePop { 0%{transform:translate(-50%,20px) scale(.8); opacity:0} 35%{opacity:1} 100%{transform:translate(-50%,-45px) scale(1.1); opacity:0} }

@media (max-width: 1180px) {
  .y9-board-wrap,.y9-bottom { width: min(980px, calc(100% - 40px)); }
  .y9-menu-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 860px) {
  .y9-world { max-height:none; min-height:100svh; padding:10px; overflow:visible; }
  .y9-board-wrap,.y9-bottom { width:100%; transform:none; }
  .y9-hud { flex-wrap:wrap; }
  .y9-menu-grid,.y9-card-grid,.y9-choice-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .y9-feed-stage,.y9-match-stage,.y9-duel-arena,.y9-duel-controls { grid-template-columns:1fr; height:auto; }
  .y9-bottom { grid-template-columns:auto auto 1fr; }
  .y9-prizes { grid-column:1/-1; width:100%; }
  .y9-memory-grid { grid-template-columns: repeat(4, minmax(0,1fr)) !important; height:auto; }
}

/* V9 final spacing with visible global navbar */
body.games-page-v9 main#ya-games-root {
  padding-top: clamp(72px, calc(100vw * 96 / 1920), 96px) !important;
}
body.games-page-v9 .y9-root {
  min-height: 100svh;
}
body.games-page-v9 .y9-world {
  min-height: clamp(620px, calc(100svh - clamp(72px, calc(100vw * 96 / 1920), 96px)), 820px);
}

/* =======================================================
   YAPPERS MINI GAMES V12 - LAYOUT LOWER + BACKGROUND BEHIND NAVBAR
   Tylko poprawki wizualne dla /gry, bez ruszania logowania i Supabase.
======================================================= */

body.games-page-v9 main#ya-games-root {
  padding-top: 0 !important;
  margin-top: 0 !important;
  overflow: visible !important;
}

body.games-page-v9 .y9-root {
  min-height: 100svh !important;
}

body.games-page-v9 .y9-world {
  min-height: 100svh !important;
  height: 100svh !important;
  max-height: none !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  gap: clamp(8px, 1.15vh, 14px) !important;
  padding-top: clamp(118px, 7.7vw, 148px) !important;
  padding-bottom: clamp(16px, 1.2vw, 24px) !important;
  padding-left: clamp(20px, 4.6vw, 84px) !important;
  padding-right: clamp(20px, 4.6vw, 84px) !important;
  background-position: center center !important;
}

body.games-page-v9 .y9-hud {
  margin-top: 0 !important;
}

body.games-page-v9 .y9-board-wrap {
  align-self: center !important;
  transform: translateY(clamp(18px, 2.2vh, 34px)) !important;
  width: min(1120px, calc(100% - 360px)) !important;
}

body.games-page-v9 .y9-menu-board {
  transform: none !important;
}

body.games-page-v9 .y9-game-board,
body.games-page-v9 .y9-menu-board {
  max-height: clamp(430px, 51vh, 560px) !important;
}

body.games-page-v9 .y9-prompt {
  min-height: 76px !important;
  margin-bottom: 10px !important;
}

body.games-page-v9 .y9-menu-grid {
  gap: 12px !important;
}

body.games-page-v9 .y9-bottom {
  transform: translateY(0) !important;
  margin-bottom: 0 !important;
}

body.games-page-v9 .y9-score,
body.games-page-v9 .y9-hearts,
body.games-page-v9 .y9-progress-card,
body.games-page-v9 .y9-home {
  box-shadow: 0 5px 0 #c99468, 0 12px 22px rgba(87, 65, 48, 0.15) !important;
}

body.games-page-v9 .y9-home {
  box-shadow: 0 5px 0 #bf335c, 0 12px 22px rgba(87, 65, 48, 0.15) !important;
}

@media (max-width: 1300px) {
  body.games-page-v9 .y9-board-wrap,
  body.games-page-v9 .y9-bottom {
    width: min(1080px, calc(100% - 96px)) !important;
  }
}

@media (max-width: 860px) {
  body.games-page-v9 .y9-world {
    height: auto !important;
    min-height: 100svh !important;
    padding-top: 92px !important;
  }

  body.games-page-v9 .y9-board-wrap,
  body.games-page-v9 .y9-bottom {
    width: 100% !important;
    transform: none !important;
  }

  body.games-page-v9 .y9-game-board,
  body.games-page-v9 .y9-menu-board {
    max-height: none !important;
  }
}

/* =======================================================
   YAPPERS MINI GAMES V13 - NAVBAR OVER BACKGROUND ONLY ON /GRY
   Tło zostaje za navbarem, ale interfejs ma bezpieczny margines pod navbarem.
======================================================= */

body.games-page-v9 main#ya-games-root {
  padding-top: 0 !important;
  margin-top: 0 !important;
  min-height: 100svh !important;
  overflow: visible !important;
}

body.games-page-v9 .y9-root {
  min-height: 100svh !important;
}

body.games-page-v9 .y9-world {
  min-height: 100svh !important;
  height: 100svh !important;
  max-height: none !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  gap: clamp(7px, 0.95vh, 12px) !important;
  padding-top: clamp(136px, 8.1vw, 166px) !important;
  padding-bottom: clamp(12px, 1vw, 20px) !important;
  padding-left: clamp(20px, 4.6vw, 84px) !important;
  padding-right: clamp(20px, 4.6vw, 84px) !important;
  background-position: center center !important;
}

body.games-page-v9 .y9-hud {
  margin-top: 0 !important;
}

body.games-page-v9 .y9-board-wrap {
  align-self: center !important;
  transform: translateY(clamp(20px, 2.4vh, 42px)) !important;
  width: min(1120px, calc(100% - 360px)) !important;
}

body.games-page-v9 .y9-menu-board {
  transform: none !important;
}

body.games-page-v9 .y9-game-board,
body.games-page-v9 .y9-menu-board {
  max-height: clamp(410px, 49vh, 545px) !important;
}

body.games-page-v9 .y9-prompt {
  min-height: 72px !important;
  margin-bottom: 9px !important;
}

body.games-page-v9 .y9-bottom {
  transform: translateY(0) !important;
  margin-bottom: 0 !important;
}

body.games-page-v9 .y9-round,
body.games-page-v9 .y9-prizes,
body.games-page-v9 .y9-track {
  box-shadow: 0 8px 18px rgba(49, 80, 54, 0.18) !important;
}

@media (max-width: 1300px) {
  body.games-page-v9 .y9-board-wrap,
  body.games-page-v9 .y9-bottom {
    width: min(1080px, calc(100% - 96px)) !important;
  }
}

@media (max-width: 860px) {
  body.games-page-v9 .y9-world {
    height: auto !important;
    min-height: 100svh !important;
    padding-top: 106px !important;
    overflow: visible !important;
  }

  body.games-page-v9 .y9-board-wrap,
  body.games-page-v9 .y9-bottom {
    width: 100% !important;
    transform: none !important;
  }

  body.games-page-v9 .y9-game-board,
  body.games-page-v9 .y9-menu-board {
    max-height: none !important;
  }
}

body.games-page-v9 main#ya-games-root {
  padding-top: 0 !important;
  margin-top: 0 !important;
  overflow: visible !important;
}

body.games-page-v9 .y9-world {
  height: auto !important;
  min-height: 100svh !important;
  max-height: none !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  padding-top: clamp(118px, 8.8vh, 142px) !important;
  padding-bottom: clamp(22px, 2.2vh, 36px) !important;
  gap: clamp(12px, 1.5vh, 22px) !important;
  background-position: center center !important;
}

body.games-page-v9 .y9-hud {
  position: relative !important;
  z-index: 50 !important;
  margin-top: 0 !important;
}

body.games-page-v9 .y9-board-wrap {
  position: relative !important;
  z-index: 10 !important;
  align-self: center !important;
  transform: translateY(clamp(20px, 2.4vh, 36px)) !important;
  width: min(1160px, calc(100% - 420px)) !important;
}

body.games-page-v9 .y9-menu-board {
  transform: none !important;
}

body.games-page-v9 .y9-game-board,
body.games-page-v9 .y9-menu-board {
  min-height: clamp(430px, 52vh, 590px) !important;
  max-height: none !important;
  overflow: visible !important;
}

body.games-page-v9 .y9-prompt {
  min-height: clamp(76px, 8.8vh, 94px) !important;
  margin-bottom: clamp(10px, 1.25vh, 16px) !important;
  padding: clamp(10px, 1.15vh, 15px) clamp(14px, 1.4vw, 20px) !important;
}

body.games-page-v9 .y9-prompt h2 {
  font-size: clamp(24px, 2.15vw, 36px) !important;
  line-height: .98 !important;
}

body.games-page-v9 .y9-prompt p {
  font-size: clamp(12px, .88vw, 15px) !important;
  line-height: 1.18 !important;
}

body.games-page-v9 .y9-card-grid,
body.games-page-v9 .y9-choice-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(12px, 1.35vw, 20px) !important;
}

body.games-page-v9 .y9-vocab-card {
  min-height: clamp(105px, 13vh, 150px) !important;
  padding: 8px !important;
}

body.games-page-v9 .y9-listen-board .y9-vocab-card .y9-emoji {
  font-size: clamp(50px, 5.2vw, 86px) !important;
}

body.games-page-v9 .y9-listen-board .y9-vocab-card strong {
  display: none !important;
}

body.games-page-v9 .y9-listen-board .y9-card-grid {
  align-items: stretch !important;
}

body.games-page-v9 .y9-color-board .y9-pill {
  font-size: clamp(16px, 1.25vw, 22px) !important;
  letter-spacing: .08em !important;
  color: #2b77c5 !important;
  background: rgba(255,255,255,.92) !important;
}

body.games-page-v9 .y9-balloon-field {
  height: clamp(360px, 48vh, 540px) !important;
  min-height: 340px !important;
}

body.games-page-v9 .y9-balloon {
  width: clamp(88px, 6.2vw, 120px) !important;
  height: clamp(116px, 7.8vw, 150px) !important;
  bottom: -155px !important;
}

body.games-page-v9 .y9-balloon span {
  width: clamp(78px, 5.7vw, 108px) !important;
  height: clamp(94px, 7vw, 132px) !important;
}

body.games-page-v9 .y9-memory-board {
  display: flex !important;
  flex-direction: column !important;
}

body.games-page-v9 .y9-memory-grid {
  flex: 1 1 auto !important;
  display: grid !important;
  grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)) !important;
  grid-template-rows: repeat(var(--rows, 2), minmax(0, 1fr)) !important;
  height: auto !important;
  min-height: clamp(250px, 32vh, 390px) !important;
  max-height: none !important;
  gap: clamp(10px, 1vw, 16px) !important;
  align-content: stretch !important;
}

body.games-page-v9 .y9-memory-card {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  aspect-ratio: 1 / 1 !important;
}

body.games-page-v9 .y9-feed-board {
  display: flex !important;
  flex-direction: column !important;
}

body.games-page-v9 .y9-feed-stage {
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: clamp(330px, 42vh, 500px) !important;
  grid-template-columns: minmax(220px, .78fr) minmax(520px, 1.35fr) !important;
}

body.games-page-v9 .y9-food-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(0, 1fr) !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: visible !important;
}

body.games-page-v9 .y9-food-card {
  min-height: clamp(86px, 9.2vh, 122px) !important;
  padding: 6px !important;
}

body.games-page-v9 .y9-food-card .y9-emoji {
  font-size: clamp(38px, 3.6vw, 64px) !important;
}

body.games-page-v9 .y9-match-stage {
  height: auto !important;
  min-height: clamp(340px, 45vh, 520px) !important;
  grid-template-columns: minmax(230px, .72fr) minmax(520px, 1.28fr) !important;
  overflow: visible !important;
}

body.games-page-v9 .y9-match-pictures {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
}

body.games-page-v9 .y9-match-pic {
  min-height: clamp(118px, 15vh, 170px) !important;
}

body.games-page-v9 .y9-bottom {
  position: relative !important;
  z-index: 35 !important;
  transform: translateY(clamp(6px, 1vh, 14px)) !important;
  margin-bottom: 0 !important;
}

@media (max-width: 1450px) {
  body.games-page-v9 .y9-board-wrap,
  body.games-page-v9 .y9-bottom {
    width: min(1120px, calc(100% - 160px)) !important;
  }
}

@media (max-width: 1050px) {
  body.games-page-v9 .y9-world {
    padding-top: 112px !important;
    height: auto !important;
    overflow: visible !important;
  }
  body.games-page-v9 .y9-board-wrap,
  body.games-page-v9 .y9-bottom {
    width: calc(100% - 32px) !important;
    transform: none !important;
  }
  body.games-page-v9 .y9-feed-stage,
  body.games-page-v9 .y9-match-stage {
    grid-template-columns: 1fr !important;
  }
}
body.games-page-v9 .y9-world {
  padding-top: clamp(130px, 7.6vw, 164px) !important;
  gap: clamp(8px, .8vh, 12px) !important;
}
body.games-page-v9 .y9-hud {
  transform: translateY(0) !important;
}
body.games-page-v9 .y9-board-wrap {
  align-self: start !important;
  transform: translateY(clamp(20px, 2.1vh, 36px)) !important;
  width: min(1180px, calc(100% - 390px)) !important;
}
body.games-page-v9 .y9-game-board,
body.games-page-v9 .y9-menu-board {
  max-height: clamp(500px, 59vh, 660px) !important;
  min-height: clamp(455px, 52vh, 610px) !important;
}
body.games-page-v9 .y9-menu-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
body.games-page-v9 .y9-menu-card {
  min-height: 118px !important;
  padding: 10px 12px !important;
}
body.games-page-v9 .y9-menu-card p {
  font-size: 11px !important;
  line-height: 1.12 !important;
}
body.games-page-v9 .y9-picture-only-grid {
  height: min(380px, 40vh) !important;
}
body.games-page-v9 .y9-picture-only .y9-emoji {
  font-size: clamp(64px, 6.4vw, 112px) !important;
}
body.games-page-v9 .y9-vocab-card strong,
body.games-page-v9 .y9-picture-only strong {
  display: none !important;
}
body.games-page-v9 .y9-color-target {
  width: max-content;
  min-width: 160px;
  margin: 0 auto 8px;
  padding: 7px 24px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.93);
  border: 4px solid var(--target, #ff7ab4);
  box-shadow: 0 6px 0 rgba(120, 74, 47, .16), 0 12px 22px rgba(50, 80, 60, .11);
  color: #5a2b21;
  font-family: 'Baloo 2','Nunito',Arial,sans-serif;
  font-size: clamp(22px, 1.8vw, 32px);
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .05em;
}
body.games-page-v9 .y9-balloon-field {
  height: min(410px, 44vh) !important;
  min-height: 340px !important;
}
body.games-page-v9 .y9-balloon {
  width: clamp(72px, 6.1vw, 112px) !important;
  height: clamp(96px, 8.2vw, 148px) !important;
  bottom: -155px !important;
}
body.games-page-v9 .y9-balloon span {
  width: clamp(70px, 6vw, 108px) !important;
  height: clamp(82px, 7vw, 126px) !important;
}
body.games-page-v9 .y9-memory-board {
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  overflow: hidden !important;
}
body.games-page-v9 .y9-memory-grid {
  height: 100% !important;
  min-height: 330px !important;
  max-height: min(420px, 43vh) !important;
  display: grid !important;
  grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)) !important;
  grid-template-rows: repeat(var(--rows, 3), minmax(0, 1fr)) !important;
  gap: clamp(8px, .8vw, 12px) !important;
  overflow: visible !important;
}
body.games-page-v9 .y9-memory-card {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  border-radius: 18px !important;
}
body.games-page-v9 .y9-feed-board,
body.games-page-v9 .y9-match-board,
body.games-page-v9 .y9-sentence-board {
  overflow: hidden !important;
}
body.games-page-v9 .y9-feed-stage {
  height: min(420px, 43vh) !important;
  min-height: 355px !important;
  grid-template-columns: minmax(250px, .78fr) minmax(0, 1.22fr) !important;
  overflow: visible !important;
}
body.games-page-v9 .y9-food-grid {
  height: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(0, 1fr) !important;
  gap: clamp(7px, .72vw, 11px) !important;
  overflow: visible !important;
}
body.games-page-v9 .y9-food-card {
  min-height: 0 !important;
  height: 100% !important;
  padding: 6px !important;
}
body.games-page-v9 .y9-food-card .y9-emoji {
  font-size: clamp(36px, 3.25vw, 60px) !important;
}
body.games-page-v9 .y9-match-stage {
  height: min(420px, 43vh) !important;
  min-height: 355px !important;
  overflow: hidden !important;
}
body.games-page-v9 .y9-bottom {
  transform: translateY(clamp(3px, .7vh, 10px)) !important;
}
@media (max-width: 1500px) {
  body.games-page-v9 .y9-board-wrap,
  body.games-page-v9 .y9-bottom {
    width: min(1120px, calc(100% - 150px)) !important;
  }
}
@media (max-width: 1150px) {
  body.games-page-v9 .y9-board-wrap,
  body.games-page-v9 .y9-bottom {
    width: calc(100% - 32px) !important;
  }
  body.games-page-v9 .y9-world {
    height: auto !important;
    min-height: 100svh !important;
    overflow: visible !important;
  }
  body.games-page-v9 .y9-menu-grid,
  body.games-page-v9 .y9-card-grid,
  body.games-page-v9 .y9-choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body.games-page-v9 .y9-feed-stage,
  body.games-page-v9 .y9-match-stage {
    grid-template-columns: 1fr !important;
    height: auto !important;
  }
}

/* =======================================================
   YAPPERS MINI GAMES V16 - layout, gameplay panels, navbar and game UI fixes
   Tylko dla body.games-page-v9, bez zmian globalnych.
======================================================= */

body.games-page-v9 .y9-world {
  min-height: 100svh !important;
  height: auto !important;
  max-height: none !important;
  grid-template-rows: auto minmax(0, auto) auto !important;
  align-content: start !important;
  gap: clamp(8px, 1vh, 14px) !important;
  padding-top: clamp(96px, 6.2vw, 122px) !important;
  padding-bottom: clamp(14px, 1.4vh, 24px) !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  background-position: center center !important;
}

body.games-page-v9 .y9-hud {
  position: relative !important;
  z-index: 60 !important;
  transform: none !important;
  margin-top: 0 !important;
}

body.games-page-v9 .y9-board-wrap {
  position: relative !important;
  z-index: 20 !important;
  align-self: start !important;
  width: min(1080px, calc(100% - 500px)) !important;
  transform: translateY(clamp(-12px, -1vh, -4px)) !important;
}

body.games-page-v9 .y9-menu-board {
  min-height: clamp(430px, 50vh, 560px) !important;
  max-height: none !important;
  transform: none !important;
}

body.games-page-v9 .y9-game-board {
  min-height: clamp(560px, calc(100svh - 272px), 680px) !important;
  max-height: none !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
}

body.games-page-v9 .y9-board {
  padding: clamp(16px, 1.25vw, 24px) !important;
}

body.games-page-v9 .y9-prompt {
  min-height: clamp(80px, 8.4vh, 104px) !important;
  margin-bottom: clamp(10px, 1.2vh, 16px) !important;
}

body.games-page-v9 .y9-pill {
  margin-bottom: clamp(10px, 1.1vh, 16px) !important;
}

body.games-page-v9 .y9-bottom {
  z-index: 50 !important;
  width: min(1080px, calc(100% - 500px)) !important;
  transform: translateY(0) !important;
}

body.games-page-v9 .y9-card-grid,
body.games-page-v9 .y9-choice-grid {
  flex: 1 1 auto !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(12px, 1.2vw, 18px) !important;
}

body.games-page-v9 .y9-picture-only-grid {
  height: auto !important;
  min-height: clamp(330px, 38vh, 460px) !important;
}

body.games-page-v9 .y9-vocab-card {
  min-height: clamp(118px, 14vh, 164px) !important;
}

body.games-page-v9 .y9-picture-only .y9-emoji,
body.games-page-v9 .y9-listen-board .y9-vocab-card .y9-emoji {
  font-size: clamp(56px, 5.2vw, 94px) !important;
}

/* Balloons: longer strings, no cropped bottoms, faster field */
body.games-page-v9 .y9-balloon-field {
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: clamp(410px, calc(100svh - 390px), 560px) !important;
  overflow: hidden !important;
}
body.games-page-v9 .y9-balloon {
  width: clamp(78px, 5.8vw, 116px) !important;
  height: clamp(138px, 9.2vw, 180px) !important;
  bottom: -178px !important;
  overflow: visible !important;
}
body.games-page-v9 .y9-balloon span {
  position: relative !important;
  width: clamp(72px, 5.5vw, 108px) !important;
  height: clamp(92px, 6.8vw, 128px) !important;
  overflow: visible !important;
}
body.games-page-v9 .y9-balloon span::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -9px;
  width: 16px;
  height: 13px;
  transform: translateX(-50%);
  background: var(--c);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  filter: brightness(.92);
}
body.games-page-v9 .y9-balloon span::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(100% + 8px) !important;
  width: 3px !important;
  height: clamp(42px, 4.2vw, 70px) !important;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(100,64,54,.55), rgba(100,64,54,.12));
  border-radius: 999px;
}
@keyframes y9BalloonRise { 0%{transform:translate(-50%,0) rotate(-4deg); opacity:1} 100%{transform:translate(calc(-50% + 18px), -136vh) rotate(8deg); opacity:.95} }

/* Memory: no 3D blank disappearance, always visible after match */
body.games-page-v9 .y9-memory-board {
  overflow: visible !important;
}
body.games-page-v9 .y9-memory-grid {
  flex: 1 1 auto !important;
  display: grid !important;
  grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)) !important;
  grid-template-rows: repeat(var(--rows, 2), minmax(0, 1fr)) !important;
  gap: clamp(10px, .95vw, 16px) !important;
  min-height: clamp(360px, calc(100svh - 420px), 500px) !important;
  max-height: none !important;
  height: auto !important;
}
body.games-page-v9 .y9-memory-card {
  aspect-ratio: 1 / 1 !important;
  min-height: 0 !important;
  height: auto !important;
  transform: none !important;
  transform-style: flat !important;
  overflow: hidden !important;
}
body.games-page-v9 .y9-memory-card .front,
body.games-page-v9 .y9-memory-card .back {
  transform: none !important;
  backface-visibility: visible !important;
}
body.games-page-v9 .y9-memory-card .front { display: none !important; }
body.games-page-v9 .y9-memory-card.open .back,
body.games-page-v9 .y9-memory-card.done .back { display: none !important; }
body.games-page-v9 .y9-memory-card.open .front,
body.games-page-v9 .y9-memory-card.done .front {
  display: grid !important;
  opacity: 1 !important;
  visibility: visible !important;
  background: #fffdf8 !important;
}
body.games-page-v9 .y9-memory-card.done {
  background: #fffdf8 !important;
  border-color: #7ee269 !important;
  box-shadow: 0 6px 0 #5ab94e, 0 12px 18px rgba(75,82,55,.12) !important;
}

/* Feed: click-only grid, prettier frog, no missing cell */
body.games-page-v9 .y9-feed-stage {
  flex: 1 1 auto !important;
  min-height: clamp(390px, calc(100svh - 405px), 540px) !important;
  height: auto !important;
  grid-template-columns: minmax(230px, .7fr) minmax(0, 1.3fr) !important;
  align-items: stretch !important;
}
body.games-page-v9 .y9-food-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(10px, .9vw, 14px) !important;
  min-height: 100% !important;
  height: auto !important;
}
body.games-page-v9 .y9-food-grid-12 { grid-template-rows: repeat(3, minmax(0, 1fr)) !important; }
body.games-page-v9 .y9-food-card {
  min-height: 0 !important;
  height: 100% !important;
  padding: clamp(7px, .7vw, 10px) !important;
}
body.games-page-v9 .y9-food-card .y9-emoji {
  font-size: clamp(38px, 3.4vw, 66px) !important;
}
body.games-page-v9 .y9-css-frog {
  width: clamp(145px, 10vw, 188px) !important;
  height: clamp(116px, 8.6vw, 156px) !important;
  border-radius: 48% 48% 42% 42% !important;
  background: radial-gradient(circle at 36% 22%, rgba(255,255,255,.75) 0 9%, transparent 10%), #a8f394 !important;
  border: 6px solid #10200f !important;
}
body.games-page-v9 .y9-css-frog::before,
body.games-page-v9 .y9-css-frog::after { display: none !important; }
body.games-page-v9 .y9-css-frog .eye {
  position: absolute;
  top: 24%;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #080808;
  box-shadow: inset 9px -8px 0 rgba(255,255,255,.94);
}
body.games-page-v9 .y9-css-frog .eye.left { left: 24%; }
body.games-page-v9 .y9-css-frog .eye.right { right: 24%; }
body.games-page-v9 .y9-css-frog .blush {
  position: absolute;
  top: 55%;
  width: 24px;
  height: 16px;
  border-radius: 50%;
  background: #ff9eb9;
  opacity: .9;
}
body.games-page-v9 .y9-css-frog .blush.left { left: 14%; }
body.games-page-v9 .y9-css-frog .blush.right { right: 14%; }

/* Sentence: chips and slots must not be cut */
body.games-page-v9 .y9-sentence-board {
  overflow: visible !important;
}
body.games-page-v9 .y9-sentence-slots {
  flex-wrap: wrap !important;
  min-height: clamp(70px, 10vh, 120px) !important;
  height: auto !important;
  overflow: visible !important;
}
body.games-page-v9 .y9-word-bank {
  max-height: none !important;
  overflow: visible !important;
  gap: 9px !important;
}
body.games-page-v9 .y9-word-chip {
  min-height: 42px !important;
  min-width: 82px !important;
  font-size: clamp(15px, 1vw, 18px) !important;
}
body.games-page-v9 .y9-actions {
  flex-wrap: wrap !important;
}

/* Match board sizing */
body.games-page-v9 .y9-match-stage {
  flex: 1 1 auto !important;
  min-height: clamp(390px, calc(100svh - 405px), 540px) !important;
  height: auto !important;
  overflow: visible !important;
}
body.games-page-v9 .y9-match-pic {
  min-height: clamp(130px, 16vh, 185px) !important;
}

body.games-page-v9 .y9-modal-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}
body.games-page-v9 .y9-modal-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

@media (max-width: 1500px) {
  body.games-page-v9 .y9-board-wrap,
  body.games-page-v9 .y9-bottom {
    width: min(1080px, calc(100% - 110px)) !important;
  }
}
@media (max-width: 1150px) {
  body.games-page-v9 .y9-world {
    padding-top: 104px !important;
    overflow: visible !important;
  }
  body.games-page-v9 .y9-board-wrap,
  body.games-page-v9 .y9-bottom {
    width: calc(100% - 26px) !important;
    transform: none !important;
  }
  body.games-page-v9 .y9-game-board {
    min-height: auto !important;
  }
  body.games-page-v9 .y9-feed-stage,
  body.games-page-v9 .y9-match-stage {
    grid-template-columns: 1fr !important;
  }
}

/* =======================================================
   YAPPERS MINI GAMES V17 - compact no-scroll game layout + feed fix styling
   Tylko dla /gry. Bez zmian w logowaniu, main.js, index.js i env.js.
======================================================= */

body.games-page-v9 main#ya-games-root,
body.games-page-v9 .y9-root {
  height: 100svh !important;
  min-height: 100svh !important;
  max-height: 100svh !important;
  overflow: hidden !important;
}

body.games-page-v9 .y9-world {
  height: 100svh !important;
  min-height: 100svh !important;
  max-height: 100svh !important;
  overflow: hidden !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  align-content: stretch !important;
  gap: clamp(5px, .65vh, 9px) !important;
  padding-top: clamp(86px, 5.15vw, 106px) !important;
  padding-bottom: clamp(7px, .8vh, 12px) !important;
  padding-left: clamp(16px, 4.2vw, 74px) !important;
  padding-right: clamp(16px, 4.2vw, 74px) !important;
  background-position: center center !important;
}

body.games-page-v9 .y9-hud {
  width: min(1460px, 100%) !important;
  min-height: clamp(50px, 5.6vh, 68px) !important;
  flex: 0 0 auto !important;
}

body.games-page-v9 .y9-home,
body.games-page-v9 .y9-score,
body.games-page-v9 .y9-hearts,
body.games-page-v9 .y9-progress-card {
  min-height: clamp(44px, 5.2vh, 64px) !important;
}

body.games-page-v9 .y9-home {
  width: clamp(48px, 3.8vw, 66px) !important;
}

body.games-page-v9 .y9-score {
  padding: 6px clamp(12px, 1.3vw, 18px) !important;
}

body.games-page-v9 .y9-score strong {
  font-size: clamp(24px, 1.95vw, 36px) !important;
}

body.games-page-v9 .y9-progress-card {
  min-width: clamp(170px, 13vw, 240px) !important;
  font-size: clamp(16px, 1.22vw, 22px) !important;
}

body.games-page-v9 .y9-board-wrap {
  align-self: center !important;
  width: min(1020px, calc(100% - 570px)) !important;
  max-width: 1020px !important;
  transform: translateY(clamp(-10px, -1vh, -4px)) !important;
  flex: 1 1 auto !important;
  display: grid !important;
  place-items: center !important;
  min-height: 0 !important;
}

body.games-page-v9 .y9-board {
  width: 100% !important;
  max-width: 100% !important;
  padding: clamp(11px, .95vw, 17px) !important;
  border-width: 3px !important;
  border-radius: 24px !important;
  box-shadow: inset 0 0 22px rgba(255,255,255,.18) !important;
}

body.games-page-v9 .y9-game-board,
body.games-page-v9 .y9-menu-board {
  height: clamp(405px, calc(100svh - 238px), 565px) !important;
  min-height: 0 !important;
  max-height: clamp(405px, calc(100svh - 238px), 565px) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

body.games-page-v9 .y9-menu-board {
  height: clamp(390px, calc(100svh - 246px), 530px) !important;
  max-height: clamp(390px, calc(100svh - 246px), 530px) !important;
}

body.games-page-v9 .y9-prompt {
  flex: 0 0 auto !important;
  min-height: clamp(62px, 7.3vh, 82px) !important;
  margin-bottom: clamp(6px, .7vh, 9px) !important;
  padding: clamp(8px, .8vh, 12px) clamp(11px, 1vw, 16px) !important;
  gap: 11px !important;
  border-radius: 21px !important;
}

body.games-page-v9 .y9-speaker {
  width: clamp(48px, 4.2vw, 58px) !important;
  height: clamp(48px, 4.2vw, 58px) !important;
  font-size: clamp(22px, 2vw, 28px) !important;
}

body.games-page-v9 .y9-prompt h2 {
  font-size: clamp(22px, 1.85vw, 31px) !important;
  line-height: .98 !important;
}

body.games-page-v9 .y9-prompt p {
  font-size: clamp(11px, .78vw, 14px) !important;
  line-height: 1.12 !important;
}

body.games-page-v9 .y9-notes {
  font-size: clamp(24px, 2vw, 36px) !important;
}

body.games-page-v9 .y9-pill {
  flex: 0 0 auto !important;
  margin-bottom: clamp(6px, .7vh, 9px) !important;
  padding: 6px 15px !important;
  font-size: clamp(12px, .85vw, 14px) !important;
}

body.games-page-v9 .y9-bottom {
  flex: 0 0 auto !important;
  width: min(1020px, calc(100% - 570px)) !important;
  max-width: 1020px !important;
  transform: translateY(-2px) !important;
  min-height: clamp(54px, 6.5vh, 70px) !important;
  gap: 10px !important;
}

body.games-page-v9 .y9-round {
  width: clamp(48px, 4vw, 60px) !important;
  height: clamp(48px, 4vw, 60px) !important;
  font-size: clamp(20px, 1.7vw, 25px) !important;
}

body.games-page-v9 .y9-prizes {
  min-width: clamp(148px, 11vw, 184px) !important;
  height: clamp(52px, 5.8vh, 64px) !important;
  font-size: clamp(21px, 1.65vw, 28px) !important;
}

body.games-page-v9 .y9-track {
  min-height: clamp(48px, 5.8vh, 60px) !important;
  gap: 8px !important;
  padding: 5px 14px !important;
}

body.games-page-v9 .y9-track-dot {
  width: clamp(38px, 3.2vw, 46px) !important;
  height: clamp(38px, 3.2vw, 46px) !important;
}

/* Grids and boards must fit without page scroll. */
body.games-page-v9 .y9-card-grid,
body.games-page-v9 .y9-choice-grid {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  gap: clamp(8px, .75vw, 12px) !important;
}

body.games-page-v9 .y9-vocab-card {
  min-height: 0 !important;
  height: 100% !important;
  padding: 6px !important;
}

body.games-page-v9 .y9-picture-only-grid {
  min-height: 0 !important;
  height: auto !important;
}

body.games-page-v9 .y9-picture-only .y9-emoji,
body.games-page-v9 .y9-listen-board .y9-vocab-card .y9-emoji {
  font-size: clamp(48px, 4.5vw, 76px) !important;
}

/* Memory compact, no disappearing cards. */
body.games-page-v9 .y9-memory-board {
  display: flex !important;
  overflow: hidden !important;
}
body.games-page-v9 .y9-memory-grid {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  gap: clamp(8px, .7vw, 11px) !important;
  align-content: stretch !important;
}
body.games-page-v9 .y9-memory-card {
  border-radius: 16px !important;
  overflow: hidden !important;
  min-width: 0 !important;
}
body.games-page-v9 .y9-memory-card .front,
body.games-page-v9 .y9-memory-card .back {
  font-size: clamp(24px, 2.4vw, 42px) !important;
}
body.games-page-v9 .y9-memory-card .front.is-word {
  font-size: clamp(14px, 1.35vw, 22px) !important;
  word-break: break-word !important;
}
body.games-page-v9 .y9-memory-card.done .front,
body.games-page-v9 .y9-memory-card.open .front {
  display: grid !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Balloon field: visible strings, no cropping. */
body.games-page-v9 .y9-balloon-field {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: hidden !important;
}
body.games-page-v9 .y9-balloon {
  width: clamp(68px, 5.1vw, 98px) !important;
  height: clamp(126px, 8.4vw, 160px) !important;
  bottom: -150px !important;
  overflow: visible !important;
}
body.games-page-v9 .y9-balloon span::after {
  height: clamp(48px, 4.7vw, 74px) !important;
}

/* Feed click game: fits fully and frog is nicer. */
body.games-page-v9 .y9-feed-board {
  overflow: hidden !important;
}
body.games-page-v9 .y9-feed-stage {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  grid-template-columns: minmax(190px, .62fr) minmax(0, 1.38fr) !important;
  gap: clamp(10px, 1vw, 15px) !important;
  align-items: stretch !important;
  overflow: hidden !important;
}
body.games-page-v9 .y9-frog-zone {
  min-height: 0 !important;
  padding: clamp(10px, .9vw, 14px) !important;
  border-radius: 22px !important;
}
body.games-page-v9 .y9-food-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  height: 100% !important;
  min-height: 0 !important;
  gap: clamp(7px, .65vw, 10px) !important;
  overflow: hidden !important;
}
body.games-page-v9 .y9-food-grid-12 {
  grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
}
body.games-page-v9 .y9-food-card {
  min-height: 0 !important;
  height: 100% !important;
  border-radius: 18px !important;
  padding: 4px !important;
}
body.games-page-v9 .y9-food-card .y9-emoji {
  font-size: clamp(31px, 3vw, 54px) !important;
}
body.games-page-v9 .y9-food-card small {
  font-size: clamp(10px, .8vw, 12px) !important;
}
body.games-page-v9 .y9-css-frog {
  width: clamp(128px, 8.7vw, 168px) !important;
  height: clamp(118px, 8.2vw, 150px) !important;
  border-radius: 52% 52% 46% 46% / 50% 50% 54% 54% !important;
  background:
    radial-gradient(circle at 50% 70%, #fff8e8 0 34%, transparent 35%),
    radial-gradient(circle at 37% 20%, rgba(255,255,255,.76) 0 7%, transparent 8%),
    radial-gradient(circle at 64% 20%, rgba(255,255,255,.76) 0 7%, transparent 8%),
    #a9f39a !important;
  border: 5px solid #10200f !important;
  box-shadow: 0 9px 0 rgba(61,132,48,.18), inset 0 -10px 0 rgba(63,170,70,.14) !important;
}
body.games-page-v9 .y9-css-frog::before,
body.games-page-v9 .y9-css-frog::after {
  display: block !important;
  content: "" !important;
  position: absolute !important;
  top: -18px !important;
  width: 54px !important;
  height: 54px !important;
  border: 5px solid #10200f !important;
  border-radius: 50% !important;
  background: #a9f39a !important;
  box-shadow: none !important;
  z-index: -1 !important;
}
body.games-page-v9 .y9-css-frog::before { left: 20px !important; }
body.games-page-v9 .y9-css-frog::after { right: 20px !important; }
body.games-page-v9 .y9-css-frog .eye {
  top: 17% !important;
  width: clamp(25px, 2vw, 33px) !important;
  height: clamp(25px, 2vw, 33px) !important;
  background: #050505 !important;
  box-shadow: inset 8px -8px 0 rgba(255,255,255,.96) !important;
}
body.games-page-v9 .y9-css-frog .mouth {
  left: 50% !important;
  bottom: 30% !important;
  width: 46px !important;
  height: 20px !important;
  border-bottom: 6px solid #10200f !important;
  border-radius: 0 0 60px 60px !important;
  background: transparent !important;
}
body.games-page-v9 .y9-css-frog.is-eating .mouth {
  width: 54px !important;
  height: 38px !important;
  border: 5px solid #10200f !important;
  background: #2a0d11 !important;
  border-radius: 50% !important;
}
body.games-page-v9 .y9-bowl {
  font-size: clamp(30px, 2.7vw, 48px) !important;
}

/* Sentence board: chips cannot be cut. */
body.games-page-v9 .y9-sentence-board {
  overflow: hidden !important;
}
body.games-page-v9 .y9-sentence-slots {
  flex: 0 0 auto !important;
  min-height: clamp(48px, 6vh, 72px) !important;
  margin-bottom: clamp(7px, .8vh, 11px) !important;
  grid-template-columns: repeat(auto-fit, minmax(78px, 1fr)) !important;
}
body.games-page-v9 .y9-sentence-slots span {
  min-height: clamp(42px, 5vh, 58px) !important;
}
body.games-page-v9 .y9-word-bank {
  flex: 1 1 auto !important;
  max-height: none !important;
  overflow: visible !important;
  gap: clamp(6px, .55vw, 9px) !important;
  align-content: center !important;
}
body.games-page-v9 .y9-word-chip {
  min-height: 38px !important;
  min-width: 74px !important;
  padding: 6px 10px !important;
  font-size: clamp(14px, .95vw, 17px) !important;
}
body.games-page-v9 .y9-actions {
  flex: 0 0 auto !important;
  margin-top: clamp(7px, .8vh, 10px) !important;
}
body.games-page-v9 .y9-small,
body.games-page-v9 .y9-main,
body.games-page-v9 .y9-ok {
  padding: 9px 14px !important;
  font-size: clamp(14px, .95vw, 16px) !important;
}

body.games-page-v9 .y9-match-stage,
body.games-page-v9 .y9-duel-arena {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: hidden !important;
}
body.games-page-v9 .y9-match-pic {
  min-height: 0 !important;
}

@media (max-width: 1500px) {
  body.games-page-v9 .y9-board-wrap,
  body.games-page-v9 .y9-bottom {
    width: min(980px, calc(100% - 120px)) !important;
  }
}

@media (max-width: 1150px) {
  body.games-page-v9 {
    overflow: auto !important;
    height: auto !important;
  }
  body.games-page-v9 main#ya-games-root,
  body.games-page-v9 .y9-root,
  body.games-page-v9 .y9-world {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  body.games-page-v9 .y9-world {
    padding-top: 104px !important;
  }
  body.games-page-v9 .y9-board-wrap,
  body.games-page-v9 .y9-bottom {
    width: calc(100% - 26px) !important;
    transform: none !important;
  }
  body.games-page-v9 .y9-game-board,
  body.games-page-v9 .y9-menu-board {
    height: auto !important;
    max-height: none !important;
  }
  body.games-page-v9 .y9-feed-stage,
  body.games-page-v9 .y9-match-stage {
    grid-template-columns: 1fr !important;
  }
}

/* =======================================================
   YAPPERS MINI GAMES V18 - final layout + compact UI fixes
   Tylko strona /gry. Nie dotyka globalnego main.js/index.js.
======================================================= */

body.games-page-v9 .y9-world::after {
  display: none !important;
  content: none !important;
  background: none !important;
}

body.games-page-v9 main#ya-games-root,
body.games-page-v9 .y9-root,
body.games-page-v9 .y9-world {
  height: 100svh !important;
  min-height: 100svh !important;
  max-height: 100svh !important;
  overflow: hidden !important;
}

body.games-page-v9 .y9-world {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  align-content: stretch !important;
  gap: clamp(6px, .72vh, 10px) !important;
  padding-top: clamp(84px, 5.4vw, 104px) !important;
  padding-bottom: clamp(8px, .8vh, 14px) !important;
  padding-left: clamp(18px, 4.5vw, 82px) !important;
  padding-right: clamp(18px, 4.5vw, 82px) !important;
  background-position: center center !important;
}

body.games-page-v9 .y9-hud {
  flex: 0 0 auto !important;
  z-index: 40 !important;
  width: min(1460px, 100%) !important;
  margin: 0 auto !important;
}

body.games-page-v9 .y9-home,
body.games-page-v9 .y9-score,
body.games-page-v9 .y9-hearts,
body.games-page-v9 .y9-progress-card {
  min-height: clamp(44px, 5.1vh, 64px) !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 0 rgba(188, 130, 88, .85), 0 10px 20px rgba(87, 65, 48, .12) !important;
}

body.games-page-v9 .y9-home {
  width: clamp(48px, 3.8vw, 64px) !important;
  font-size: clamp(22px, 2vw, 30px) !important;
  box-shadow: 0 4px 0 #bf335c, 0 10px 20px rgba(87,65,48,.12) !important;
}

body.games-page-v9 .y9-score {
  padding: 5px clamp(11px, 1.2vw, 17px) !important;
  grid-template-rows: 14px 1fr !important;
}
body.games-page-v9 .y9-score span { font-size: clamp(24px, 1.95vw, 35px) !important; }
body.games-page-v9 .y9-score small { font-size: 10px !important; }
body.games-page-v9 .y9-score strong { font-size: clamp(24px, 2vw, 36px) !important; }
body.games-page-v9 .y9-heart { font-size: clamp(17px, 1.25vw, 23px) !important; }
body.games-page-v9 .y9-progress-card { min-width: clamp(168px, 13vw, 236px) !important; font-size: clamp(16px, 1.25vw, 22px) !important; padding: 6px 16px !important; }

body.games-page-v9 .y9-board-wrap {
  z-index: 20 !important;
  align-self: center !important;
  width: min(1010px, calc(100% - 570px)) !important;
  max-width: 1010px !important;
  transform: translateY(clamp(-6px, -.8vh, 0px)) !important;
  min-height: 0 !important;
}

body.games-page-v9 .y9-board {
  padding: clamp(11px, .9vw, 17px) !important;
  border-radius: 24px !important;
  border-width: 3px !important;
}

body.games-page-v9 .y9-game-board,
body.games-page-v9 .y9-menu-board {
  height: clamp(405px, calc(100svh - 246px), 545px) !important;
  min-height: 0 !important;
  max-height: clamp(405px, calc(100svh - 246px), 545px) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

body.games-page-v9 .y9-menu-board {
  height: clamp(390px, calc(100svh - 256px), 515px) !important;
  max-height: clamp(390px, calc(100svh - 256px), 515px) !important;
}

body.games-page-v9 .y9-prompt {
  flex: 0 0 auto !important;
  min-height: clamp(56px, 6.4vh, 74px) !important;
  margin-bottom: clamp(5px, .55vh, 8px) !important;
  padding: clamp(7px, .65vh, 10px) clamp(10px, .85vw, 14px) !important;
  gap: 10px !important;
  border-radius: 19px !important;
}
body.games-page-v9 .y9-speaker { width: clamp(44px, 3.8vw, 54px) !important; height: clamp(44px, 3.8vw, 54px) !important; font-size: clamp(20px, 1.7vw, 26px) !important; border-width: 3px !important; }
body.games-page-v9 .y9-prompt h2 { font-size: clamp(20px, 1.58vw, 28px) !important; line-height: .98 !important; }
body.games-page-v9 .y9-prompt p { font-size: clamp(10px, .68vw, 13px) !important; line-height: 1.08 !important; }
body.games-page-v9 .y9-notes { font-size: clamp(21px, 1.75vw, 32px) !important; }

body.games-page-v9 .y9-pill {
  flex: 0 0 auto !important;
  margin-bottom: clamp(5px, .55vh, 8px) !important;
  padding: 5px 14px !important;
  font-size: clamp(11px, .75vw, 13px) !important;
}

body.games-page-v9 .y9-bottom {
  z-index: 40 !important;
  flex: 0 0 auto !important;
  width: min(910px, calc(100% - 620px)) !important;
  max-width: 910px !important;
  transform: none !important;
  min-height: clamp(46px, 5.4vh, 60px) !important;
  gap: 8px !important;
  margin: 0 auto !important;
}
body.games-page-v9 .y9-round { width: clamp(44px, 3.5vw, 56px) !important; height: clamp(44px, 3.5vw, 56px) !important; font-size: clamp(19px, 1.5vw, 24px) !important; }
body.games-page-v9 .y9-round span { font-size: 9px !important; }
body.games-page-v9 .y9-prizes { min-width: clamp(138px, 10vw, 172px) !important; height: clamp(48px, 5.2vh, 58px) !important; font-size: clamp(20px, 1.55vw, 26px) !important; }
body.games-page-v9 .y9-track { min-height: clamp(44px, 5.2vh, 56px) !important; gap: 7px !important; padding: 5px 12px !important; }
body.games-page-v9 .y9-track-dot { width: clamp(34px, 2.7vw, 42px) !important; height: clamp(34px, 2.7vw, 42px) !important; }
body.games-page-v9 .y9-track-dot span { font-size: 20px !important; }
body.games-page-v9 .y9-track-dot small { top: 39px !important; font-size: 8px !important; }

body.games-page-v9 .y9-menu-grid {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(7px, .65vw, 10px) !important;
  align-content: stretch !important;
}
body.games-page-v9 .y9-menu-card { min-height: 0 !important; padding: 8px 10px !important; border-radius: 18px !important; border-width: 3px !important; gap: 1px !important; }
body.games-page-v9 .y9-icon { font-size: clamp(24px, 1.9vw, 32px) !important; }
body.games-page-v9 .y9-menu-card strong { font-size: clamp(16px, 1.18vw, 22px) !important; }
body.games-page-v9 .y9-menu-card small { font-size: 10px !important; }
body.games-page-v9 .y9-menu-card p { font-size: clamp(9px, .62vw, 11px) !important; line-height: 1.08 !important; }

body.games-page-v9 .y9-card-grid,
body.games-page-v9 .y9-choice-grid {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  gap: clamp(7px, .65vw, 11px) !important;
}
body.games-page-v9 .y9-vocab-card { min-height: 0 !important; height: 100% !important; padding: 5px !important; border-radius: 18px !important; border-width: 3px !important; }
body.games-page-v9 .y9-picture-only-grid { min-height: 0 !important; height: auto !important; }
body.games-page-v9 .y9-picture-only .y9-emoji,
body.games-page-v9 .y9-listen-board .y9-vocab-card .y9-emoji { font-size: clamp(44px, 4vw, 70px) !important; }

body.games-page-v9 .y9-balloon-field { flex: 1 1 auto !important; min-height: 0 !important; height: auto !important; overflow: hidden !important; }
body.games-page-v9 .y9-balloon { width: clamp(74px, 5.1vw, 104px) !important; height: clamp(142px, 9vw, 184px) !important; bottom: -168px !important; overflow: visible !important; }
body.games-page-v9 .y9-balloon span { width: clamp(68px, 4.8vw, 98px) !important; height: clamp(88px, 6.3vw, 122px) !important; overflow: visible !important; }
body.games-page-v9 .y9-balloon span::before { bottom: -9px !important; }
body.games-page-v9 .y9-balloon span::after { top: calc(100% + 8px) !important; height: clamp(54px, 4.5vw, 76px) !important; }

body.games-page-v9 .y9-memory-board { display: flex !important; overflow: hidden !important; }
body.games-page-v9 .y9-memory-grid { flex: 1 1 auto !important; min-height: 0 !important; height: auto !important; max-height: none !important; gap: clamp(7px, .6vw, 10px) !important; align-content: stretch !important; }
body.games-page-v9 .y9-memory-card { border-radius: 15px !important; overflow: hidden !important; min-width: 0 !important; }
body.games-page-v9 .y9-memory-card .front,
body.games-page-v9 .y9-memory-card .back { font-size: clamp(22px, 2.1vw, 38px) !important; }
body.games-page-v9 .y9-memory-card .front.is-word { font-size: clamp(13px, 1.1vw, 19px) !important; word-break: break-word !important; }

body.games-page-v9 .y9-feed-stage { flex: 1 1 auto !important; min-height: 0 !important; height: auto !important; grid-template-columns: minmax(175px, .58fr) minmax(0, 1.42fr) !important; gap: clamp(8px, .8vw, 12px) !important; overflow: hidden !important; }
body.games-page-v9 .y9-frog-zone { min-height: 0 !important; padding: clamp(8px, .75vw, 12px) !important; border-radius: 20px !important; }
body.games-page-v9 .y9-food-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; grid-template-rows: repeat(2, minmax(0, 1fr)) !important; height: 100% !important; min-height: 0 !important; gap: clamp(6px, .55vw, 9px) !important; overflow: hidden !important; }
body.games-page-v9 .y9-food-grid-12 { grid-template-rows: repeat(3, minmax(0, 1fr)) !important; }
body.games-page-v9 .y9-food-card { min-height: 0 !important; height: 100% !important; border-radius: 16px !important; padding: 3px !important; }
body.games-page-v9 .y9-food-card .y9-emoji { font-size: clamp(29px, 2.55vw, 50px) !important; }
body.games-page-v9 .y9-food-card small { font-size: clamp(9px, .7vw, 11px) !important; }

body.games-page-v9 .y9-sentence-board { overflow: hidden !important; }
body.games-page-v9 .y9-sentence-slots {
  flex: 0 0 auto !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  gap: clamp(5px, .45vw, 8px) !important;
  min-height: clamp(44px, 5.2vh, 62px) !important;
  margin-bottom: clamp(6px, .6vh, 9px) !important;
  overflow: visible !important;
}
body.games-page-v9 .y9-sentence-slots span { flex: 1 1 0 !important; min-width: 46px !important; max-width: 104px !important; min-height: clamp(38px, 4.5vh, 52px) !important; }
body.games-page-v9 .y9-word-bank { flex: 1 1 auto !important; max-height: none !important; overflow: hidden !important; gap: clamp(5px, .45vw, 8px) !important; align-content: center !important; }
body.games-page-v9 .y9-word-chip { min-height: 34px !important; min-width: 64px !important; padding: 5px 9px !important; font-size: clamp(13px, .83vw, 15px) !important; border-radius: 13px !important; }
body.games-page-v9 .y9-actions { flex: 0 0 auto !important; margin-top: clamp(5px, .6vh, 8px) !important; }
body.games-page-v9 .y9-small,
body.games-page-v9 .y9-main,
body.games-page-v9 .y9-ok { padding: 8px 12px !important; font-size: clamp(13px, .85vw, 15px) !important; }

body.games-page-v9 .y9-match-stage,
body.games-page-v9 .y9-duel-arena { flex: 1 1 auto !important; min-height: 0 !important; height: auto !important; overflow: hidden !important; }
body.games-page-v9 .y9-match-word { font-size: clamp(13px, .92vw, 16px) !important; }
body.games-page-v9 .y9-match-pic { min-height: 0 !important; font-size: clamp(30px, 3.1vw, 54px) !important; }

@media (max-width: 1500px) {
  body.games-page-v9 .y9-board-wrap { width: min(940px, calc(100% - 96px)) !important; }
  body.games-page-v9 .y9-bottom { width: min(880px, calc(100% - 96px)) !important; }
}

@media (max-width: 1150px) {
  body.games-page-v9 { overflow: auto !important; height: auto !important; }
  body.games-page-v9 main#ya-games-root,
  body.games-page-v9 .y9-root,
  body.games-page-v9 .y9-world { height: auto !important; max-height: none !important; overflow: visible !important; }
  body.games-page-v9 .y9-world { padding-top: 100px !important; }
  body.games-page-v9 .y9-board-wrap,
  body.games-page-v9 .y9-bottom { width: calc(100% - 24px) !important; transform: none !important; }
  body.games-page-v9 .y9-game-board,
  body.games-page-v9 .y9-menu-board { height: auto !important; max-height: none !important; }
  body.games-page-v9 .y9-feed-stage,
  body.games-page-v9 .y9-match-stage { grid-template-columns: 1fr !important; }
  body.games-page-v9 .y9-menu-grid,
  body.games-page-v9 .y9-card-grid,
  body.games-page-v9 .y9-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

body.games-page-v9 main#ya-games-root,
body.games-page-v9 .y9-root {
  height: auto !important;
  min-height: 100svh !important;
  max-height: none !important;
  overflow: visible !important;
}

body.games-page-v9 .y9-world {
  min-height: 100svh !important;
  height: 100svh !important;
  max-height: 100svh !important;
  overflow: hidden !important;
  padding-top: clamp(78px, 7.2vh, 92px) !important;
  padding-bottom: clamp(8px, 1vh, 12px) !important;
  padding-left: clamp(20px, 5vw, 88px) !important;
  padding-right: clamp(20px, 5vw, 88px) !important;
  gap: clamp(5px, .55vh, 8px) !important;
  background-position: center center !important;
}

body.games-page-v9 .y9-hud {
  width: min(1480px, 100%) !important;
  margin: 0 auto !important;
  transform: none !important;
}

body.games-page-v9 .y9-home,
body.games-page-v9 .y9-score,
body.games-page-v9 .y9-hearts,
body.games-page-v9 .y9-progress-card {
  min-height: clamp(42px, 5vh, 58px) !important;
}

body.games-page-v9 .y9-board-wrap {
  align-self: center !important;
  width: min(980px, calc(100% - 610px)) !important;
  max-width: 980px !important;
  min-height: 0 !important;
  transform: translateY(clamp(-12px, -1.2vh, -6px)) !important;
}

body.games-page-v9 .y9-game-board,
body.games-page-v9 .y9-menu-board {
  height: clamp(430px, calc(100svh - 230px), 560px) !important;
  max-height: clamp(430px, calc(100svh - 230px), 560px) !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body.games-page-v9 .y9-board { padding: clamp(9px, .8vw, 14px) !important; }

body.games-page-v9 .y9-prompt {
  min-height: clamp(50px, 5.7vh, 66px) !important;
  padding: 7px 12px !important;
  margin-bottom: clamp(4px, .5vh, 7px) !important;
}
body.games-page-v9 .y9-prompt h2 { font-size: clamp(19px, 1.38vw, 25px) !important; line-height: 1 !important; }
body.games-page-v9 .y9-prompt p { font-size: clamp(9px, .62vw, 12px) !important; line-height: 1.08 !important; }
body.games-page-v9 .y9-speaker { width: clamp(40px, 3.35vw, 50px) !important; height: clamp(40px, 3.35vw, 50px) !important; font-size: clamp(18px, 1.5vw, 24px) !important; }
body.games-page-v9 .y9-notes { font-size: clamp(18px, 1.55vw, 29px) !important; }

body.games-page-v9 .y9-menu-grid { gap: clamp(6px, .55vw, 9px) !important; }
body.games-page-v9 .y9-menu-card { padding: 7px 9px !important; border-radius: 17px !important; }
body.games-page-v9 .y9-menu-card strong { font-size: clamp(15px, 1.02vw, 20px) !important; line-height: 1 !important; }
body.games-page-v9 .y9-menu-card small { font-size: 9px !important; }
body.games-page-v9 .y9-menu-card p { font-size: clamp(8.5px, .58vw, 10px) !important; line-height: 1.05 !important; }
body.games-page-v9 .y9-icon { font-size: clamp(21px, 1.7vw, 29px) !important; }

body.games-page-v9 .y9-bottom {
  width: min(850px, calc(100% - 680px)) !important;
  max-width: 850px !important;
  min-height: clamp(42px, 5vh, 56px) !important;
  margin: 0 auto !important;
  transform: translateY(-2px) !important;
}
body.games-page-v9 .y9-round { width: clamp(40px, 3.2vw, 52px) !important; height: clamp(40px, 3.2vw, 52px) !important; }
body.games-page-v9 .y9-prizes { min-width: clamp(124px, 9vw, 156px) !important; height: clamp(43px, 4.9vh, 54px) !important; font-size: clamp(18px, 1.35vw, 24px) !important; }
body.games-page-v9 .y9-track { min-height: clamp(40px, 4.8vh, 52px) !important; }
body.games-page-v9 .y9-track-dot { width: clamp(30px, 2.4vw, 38px) !important; height: clamp(30px, 2.4vw, 38px) !important; }
body.games-page-v9 .y9-track-dot small { top: 34px !important; font-size: 7px !important; }

body.games-page-v9 .y9-listen-board .y9-vocab-card strong,
body.games-page-v9 .y9-picture-only .y9-vocab-card strong { display:none !important; }
body.games-page-v9 .y9-listen-board .y9-vocab-card .y9-emoji,
body.games-page-v9 .y9-picture-only .y9-emoji { font-size: clamp(48px, 4.4vw, 76px) !important; }

body.games-page-v9 .y9-memory-board { overflow: hidden !important; }
body.games-page-v9 .y9-memory-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(0, 1fr) !important;
  height: 100% !important;
  gap: clamp(6px, .55vw, 9px) !important;
}
body.games-page-v9 .y9-memory-card { aspect-ratio: 1 / 1 !important; height: auto !important; background: linear-gradient(180deg,#ff91ca,#a873f4) !important; }
body.games-page-v9 .y9-memory-card.done,
body.games-page-v9 .y9-memory-card.open { opacity: 1 !important; visibility: visible !important; }
body.games-page-v9 .y9-memory-card.done .back,
body.games-page-v9 .y9-memory-card.open .back { opacity: 0 !important; }
body.games-page-v9 .y9-memory-card.done .front,
body.games-page-v9 .y9-memory-card.open .front { opacity: 1 !important; }

body.games-page-v9 .y9-balloon-field { min-height: 0 !important; height: 100% !important; }
body.games-page-v9 .y9-balloon,
body.games-page-v9 .y9-balloon span { overflow: visible !important; }
body.games-page-v9 .y9-balloon span::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: calc(100% + 6px) !important;
  width: 3px !important;
  height: 66px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.92) !important;
  transform: translateX(-50%) !important;
}

body.games-page-v9 .y9-feed-stage { grid-template-columns: minmax(180px, .55fr) minmax(0, 1.45fr) !important; gap: clamp(8px, .7vw, 12px) !important; }
body.games-page-v9 .y9-food-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; grid-template-rows: repeat(2, minmax(0, 1fr)) !important; height: 100% !important; overflow: hidden !important; }
body.games-page-v9 .y9-food-grid-12 { grid-template-rows: repeat(3, minmax(0, 1fr)) !important; }
body.games-page-v9 .y9-food-card .y9-emoji { font-size: clamp(28px, 2.35vw, 48px) !important; }
body.games-page-v9 .y9-cute-feed-frog { width: clamp(126px, 10vw, 168px) !important; height: clamp(114px, 8.8vw, 150px) !important; border: 5px solid #10200f !important; border-radius: 50% 50% 44% 44% !important; background: radial-gradient(circle at 30% 30%, #c8ffb8 0 16%, transparent 18%), #a9f39a !important; position: relative !important; box-shadow: inset 0 -14px 0 rgba(69, 175, 72, .18) !important; transition: transform .22s ease !important; }
body.games-page-v9 .y9-cute-feed-frog::before,
body.games-page-v9 .y9-cute-feed-frog::after { content: "" !important; position: absolute !important; top: -18px !important; width: 48px !important; height: 48px !important; border-radius: 999px !important; background: #a9f39a !important; border: 5px solid #10200f !important; z-index: -1 !important; }
body.games-page-v9 .y9-cute-feed-frog::before { left: 12px !important; }
body.games-page-v9 .y9-cute-feed-frog::after { right: 12px !important; }
body.games-page-v9 .y9-cute-feed-frog .frog-eye { position: absolute !important; top: 28px !important; width: 26px !important; height: 32px !important; border-radius: 999px !important; background: #07110b !important; box-shadow: inset 8px -8px 0 rgba(255,255,255,.95) !important; }
body.games-page-v9 .y9-cute-feed-frog .frog-eye-left { left: 31px !important; }
body.games-page-v9 .y9-cute-feed-frog .frog-eye-right { right: 31px !important; }
body.games-page-v9 .y9-cute-feed-frog .frog-cheek { position: absolute !important; top: 70px !important; width: 18px !important; height: 18px !important; border-radius: 50% !important; background: #7fd76d !important; }
body.games-page-v9 .y9-cute-feed-frog .frog-cheek-left { left: 22px !important; }
body.games-page-v9 .y9-cute-feed-frog .frog-cheek-right { right: 22px !important; }
body.games-page-v9 .y9-cute-feed-frog .frog-mouth { position: absolute !important; left: 50% !important; top: 70px !important; width: 46px !important; height: 24px !important; border-bottom: 6px solid #10200f !important; border-radius: 0 0 999px 999px !important; transform: translateX(-50%) !important; }
body.games-page-v9 .y9-cute-feed-frog .frog-belly { position: absolute !important; left: 50% !important; bottom: 8px !important; width: 76px !important; height: 42px !important; transform: translateX(-50%) !important; border-radius: 50% 50% 44% 44% !important; background: #fff8e9 !important; }
body.games-page-v9 .y9-cute-feed-frog.is-eating { animation: y9FrogEatV19 .46s ease-in-out 2 !important; }
body.games-page-v9 .y9-cute-feed-frog.is-eating .frog-mouth { height: 32px !important; border-bottom-width: 8px !important; }
body.games-page-v9 .y9-cute-feed-frog.is-sad .frog-mouth { top: 86px !important; border-bottom: 0 !important; border-top: 6px solid #10200f !important; border-radius: 999px 999px 0 0 !important; }
@keyframes y9FrogEatV19 { 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.08) translateY(-4px);} }
@keyframes y9FoodFly { to { transform: translate(var(--tx, -260px), var(--ty, -180px)) scale(.25); opacity: 0; } }

body.games-page-v9 .y9-sentence-board { overflow: hidden !important; }
body.games-page-v9 .y9-sentence-slots { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: center !important; align-items: center !important; gap: clamp(4px, .38vw, 7px) !important; min-height: clamp(40px, 4.5vh, 55px) !important; margin: 0 auto clamp(6px, .6vh, 9px) !important; width: 100% !important; overflow: visible !important; }
body.games-page-v9 .y9-sentence-slots span { flex: 1 1 0 !important; min-width: 0 !important; max-width: 112px !important; min-height: clamp(34px, 4vh, 48px) !important; font-size: clamp(11px, .75vw, 14px) !important; padding: 2px 4px !important; }
body.games-page-v9 .y9-word-bank { flex: 1 1 auto !important; max-height: none !important; overflow: hidden !important; gap: clamp(4px, .36vw, 7px) !important; align-content: center !important; }
body.games-page-v9 .y9-word-chip { min-height: 30px !important; min-width: 52px !important; padding: 4px 8px !important; font-size: clamp(12px, .75vw, 14px) !important; }

body.games-page-v9 .y9-match-word { font-size: clamp(12px, .82vw, 15px) !important; min-height: 31px !important; }
body.games-page-v9 .y9-match-pic { font-size: clamp(28px, 2.75vw, 50px) !important; }

@media (max-width: 1500px) {
  body.games-page-v9 .y9-board-wrap { width: min(930px, calc(100% - 500px)) !important; }
  body.games-page-v9 .y9-bottom { width: min(820px, calc(100% - 540px)) !important; }
}

@media (max-width: 1150px) {
  body.games-page-v9 { overflow-y: auto !important; }
  body.games-page-v9 .y9-world { height: auto !important; min-height: 100svh !important; overflow: visible !important; padding-top: 96px !important; }
  body.games-page-v9 .y9-board-wrap,
  body.games-page-v9 .y9-bottom { width: calc(100% - 24px) !important; transform:none !important; }
  body.games-page-v9 .y9-game-board,
  body.games-page-v9 .y9-menu-board { height: auto !important; max-height: none !important; }
  body.games-page-v9 .y9-feed-stage,
  body.games-page-v9 .y9-match-stage { grid-template-columns: 1fr !important; }
}

/* =======================================================
   YAPPERS MINI GAMES V21 - RESTORE OLD V19 INTERFACE + THEMED BACKGROUNDS
   Tylko lekkie dopasowanie wielkości. Bez przebudowy UI z V20.
======================================================= */
body.games-page-v9 .y9-world {
  background-image: var(--y9-bg) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
body.games-page-v9 .y9-board-wrap {
  width: min(1060px, calc(100% - 510px)) !important;
  max-width: 1060px !important;
}
body.games-page-v9 .y9-bottom {
  width: min(900px, calc(100% - 590px)) !important;
  max-width: 900px !important;
}
body.games-page-v9 .y9-game-board {
  height: clamp(455px, calc(100svh - 228px), 590px) !important;
  max-height: clamp(455px, calc(100svh - 228px), 590px) !important;
}
body.games-page-v9 .y9-menu-board {
  height: clamp(430px, calc(100svh - 238px), 560px) !important;
  max-height: clamp(430px, calc(100svh - 238px), 560px) !important;
}
body.games-page-v9 .y9-menu-card {
  min-height: 112px !important;
  padding: 8px 10px !important;
}
body.games-page-v9 .y9-menu-card strong {
  font-size: clamp(16px, 1.08vw, 21px) !important;
  line-height: 1.02 !important;
}
body.games-page-v9 .y9-menu-card p {
  font-size: clamp(9px, .62vw, 10.5px) !important;
  line-height: 1.06 !important;
}
body.games-page-v9 .y9-prompt h2 {
  font-size: clamp(21px, 1.5vw, 28px) !important;
}
body.games-page-v9 .y9-prompt p {
  font-size: clamp(10px, .68vw, 12.5px) !important;
}
body.games-page-v9 .y9-word-chip,
body.games-page-v9 .y9-match-word {
  font-size: clamp(12px, .82vw, 15px) !important;
}
body.games-page-v9 .y9-sentence-slots {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
}
body.games-page-v9 .y9-sentence-slots span {
  max-width: 128px !important;
}
body.games-page-v9 .y9-round span {
  display: none !important;
}
@media (max-width: 1500px) {
  body.games-page-v9 .y9-board-wrap { width: min(1000px, calc(100% - 500px)) !important; }
  body.games-page-v9 .y9-bottom { width: min(850px, calc(100% - 540px)) !important; }
}
@media (max-width: 1150px) {
  body.games-page-v9 .y9-board-wrap,
  body.games-page-v9 .y9-bottom { width: calc(100% - 24px) !important; max-width: none !important; }
}

body.games-page-v9 .y9-auth-world {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(110px, 9vw, 150px) 20px 46px;
  background-image: var(--y9-bg) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

body.games-page-v9 .y9-auth-card {
  width: min(720px, calc(100vw - 34px));
  border-radius: 30px;
  border: 4px solid rgba(255,255,255,.78);
  background: rgba(255, 250, 240, .92);
  color: #5a2b21;
  padding: clamp(22px, 3vw, 36px);
  text-align: center;
  font-family: 'Nunito','Baloo 2',Arial,sans-serif;
  box-shadow: 0 14px 34px rgba(74, 50, 36, .18);
}

body.games-page-v9 .y9-auth-icon {
  font-size: clamp(38px, 5vw, 64px);
  margin-bottom: 10px;
}

body.games-page-v9 .y9-auth-card h1 {
  margin: 0 0 10px;
  font-family: 'Baloo 2','Nunito',Arial,sans-serif;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1;
}

body.games-page-v9 .y9-auth-card p {
  margin: 0 auto 18px;
  max-width: 560px;
  color: rgba(85,48,38,.82);
  font-size: clamp(14px, 1.5vw, 18px);
  line-height: 1.4;
  font-weight: 900;
}

body.games-page-v9 .y9-hud {
  font-family: 'Nunito', 'Baloo 2', Arial, sans-serif !important;
}

body.games-page-v9 .y9-hearts:empty {
  display: none !important;
}

body.games-page-v9 .y9-color-board .y9-hearts,
body.games-page-v9 .y9-theme-colors .y9-hearts {
  display: none !important;
}

body.games-page-v9 .y9-bottom {
  width: min(1080px, calc(100% - 420px)) !important;
  max-width: 1080px !important;
  min-height: clamp(74px, 8.4vh, 96px) !important;
  grid-template-columns: auto auto minmax(0, 1fr) auto !important;
  gap: clamp(10px, 1vw, 16px) !important;
  padding: clamp(6px, .7vw, 10px) !important;
}

body.games-page-v9 .y9-round {
  width: clamp(58px, 4.4vw, 76px) !important;
  height: clamp(58px, 4.4vw, 76px) !important;
  font-size: clamp(25px, 2vw, 34px) !important;
  border-radius: 50% !important;
}

body.games-page-v9 .y9-prizes {
  min-width: clamp(188px, 14vw, 244px) !important;
  height: clamp(64px, 7.2vh, 82px) !important;
  font-size: clamp(24px, 1.9vw, 34px) !important;
  padding: 0 clamp(18px, 1.6vw, 26px) !important;
  border-radius: 999px !important;
  letter-spacing: .01em !important;
}

body.games-page-v9 .y9-track {
  min-height: clamp(64px, 7.3vh, 84px) !important;
  padding: clamp(7px, .7vw, 10px) clamp(14px, 1.2vw, 20px) !important;
  gap: clamp(12px, 1.1vw, 20px) !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: thin !important;
  scrollbar-color: #ffc34f rgba(255,255,255,.55) !important;
}

body.games-page-v9 .y9-track::-webkit-scrollbar { height: 9px !important; }
body.games-page-v9 .y9-track::-webkit-scrollbar-track { background: rgba(255, 255, 255, .55) !important; border-radius: 999px !important; }
body.games-page-v9 .y9-track::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #ffdb65, #ff9f31) !important; border-radius: 999px !important; border: 2px solid rgba(255,255,255,.78) !important; }

body.games-page-v9 .y9-track-dot {
  position: relative !important;
  width: clamp(54px, 4.2vw, 70px) !important;
  height: clamp(54px, 4.2vw, 70px) !important;
  flex: 0 0 auto !important;
  border-radius: 22px !important;
}

body.games-page-v9 .y9-track-dot span { font-size: clamp(27px, 2.2vw, 38px) !important; filter: none !important; }
body.games-page-v9 .y9-track-dot small { top: auto !important; bottom: -18px !important; font-size: clamp(9px, .66vw, 12px) !important; color: #346d45 !important; white-space: nowrap !important; }

body.games-page-v9 .y9-lock-mini {
  position: absolute !important;
  right: -7px !important;
  top: -9px !important;
  width: 24px !important;
  height: 24px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  background: #fff8e8 !important;
  border: 2px solid #e0ba78 !important;
  font-size: 12px !important;
  box-shadow: 0 3px 0 rgba(138,92,43,.18) !important;
}

body.games-page-v9 .y9-track-dot.is-locked { opacity: .88 !important; filter: saturate(.65) grayscale(.1) !important; }
body.games-page-v9 .y9-track-dot.is-locked span { opacity: .54 !important; }

body.games-page-v9 .y9-modal-box {
  overflow: hidden !important;
  border: 5px solid rgba(255,255,255,.92) !important;
  background: linear-gradient(180deg, #fffaf0, #fff1dc) !important;
}

body.games-page-v9 .y9-modal.is-prizes .y9-modal-box {
  width: min(700px, calc(100vw - 30px)) !important;
  max-height: min(82vh, 720px) !important;
  display: flex !important;
  flex-direction: column !important;
}

body.games-page-v9 .y9-prize-grid {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  max-height: min(52vh, 460px) !important;
  padding: 4px 12px 4px 4px !important;
  margin: 14px 0 !important;
  scrollbar-width: thin !important;
  scrollbar-color: #ffb341 #fff2d1 !important;
}
body.games-page-v9 .y9-prize-grid::-webkit-scrollbar { width: 12px !important; }
body.games-page-v9 .y9-prize-grid::-webkit-scrollbar-track { background: #fff2d1 !important; border-radius: 999px !important; border: 2px solid rgba(255,255,255,.8) !important; }
body.games-page-v9 .y9-prize-grid::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #ffdc61, #ff9e2c) !important; border-radius: 999px !important; border: 2px solid #fff2d1 !important; }

body.games-page-v9 .y9-prize-card { border: 3px solid #f1d0aa !important; border-radius: 22px !important; box-shadow: 0 5px 0 rgba(217,164,96,.42) !important; }

body.games-page-v9 .y9-prize-card button,
body.games-page-v9 .y9-prize-buy,
body.games-page-v9 .y9-ok,
body.games-page-v9 .y9-main,
body.games-page-v9 .y9-small {
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: 0 5px 0 #c8701c, 0 12px 18px rgba(91,58,30,.12) !important;
  background: linear-gradient(180deg, #ffdf69, #ffa928) !important;
  color: #63341f !important;
  cursor: pointer !important;
  font-family: 'Nunito', 'Baloo 2', Arial, sans-serif !important;
  font-weight: 1000 !important;
}

body.games-page-v9 .y9-prize-card button:disabled,
body.games-page-v9 .y9-prize-buy:disabled {
  opacity: .58 !important;
  cursor: not-allowed !important;
  box-shadow: 0 4px 0 #bba07a !important;
  background: linear-gradient(180deg, #f4e7d2, #d9c3a8) !important;
}

body.games-page-v9 .y9-root select,
body.games-page-v9 .y9-root input,
body.games-page-v9 .y9-root button { font-family: 'Nunito', 'Baloo 2', Arial, sans-serif; }
body.games-page-v9 .y9-duel-controls select,
body.games-page-v9 .y9-duel-controls input { appearance: none !important; -webkit-appearance: none !important; background: #fffdf8 !important; box-shadow: 0 4px 0 #5b9ed4, 0 10px 16px rgba(67,81,112,.12) !important; }

@media (max-width: 1500px) { body.games-page-v9 .y9-bottom { width: min(980px, calc(100% - 120px)) !important; } }
@media (max-width: 1150px) { body.games-page-v9 .y9-bottom { width: calc(100% - 24px) !important; max-width: none !important; } body.games-page-v9 .y9-track { justify-content: flex-start !important; } }
@media (max-width: 720px) { body.games-page-v9 .y9-bottom { grid-template-columns: auto auto 1fr !important; } body.games-page-v9 .y9-prizes { grid-column: 1 / -1 !important; width: 100% !important; } }

body.games-page-v9 .y9-world::before,
body.games-page-v9 .y9-world::after,
body.games-page-v9 .y9-root::before,
body.games-page-v9 .y9-root::after,
body.games-page-v9 main#ya-games-root::before,
body.games-page-v9 main#ya-games-root::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 0 !important;
}

/* Navbar i stopka mają pochodzić z main.js, bez lokalnych wersji i bez nadpisywania ich fontów/kolorów. */

body.games-page-v9 .y9-world {
  background-image: var(--y9-bg) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

body.games-page-v9 .y9-board-wrap {
  width: min(1060px, calc(100% - 510px)) !important;
  max-width: 1060px !important;
  transform: translateY(clamp(-18px, -1.7vh, -8px)) !important;
}

body.games-page-v9 .y9-game-board {
  height: clamp(485px, calc(100svh - 205px), 620px) !important;
  max-height: clamp(485px, calc(100svh - 205px), 620px) !important;
  min-height: 485px !important;
  overflow: hidden !important;
}

body.games-page-v9 .y9-menu-board {
  height: clamp(440px, calc(100svh - 232px), 575px) !important;
  max-height: clamp(440px, calc(100svh - 232px), 575px) !important;
}

body.games-page-v9 .y9-hud.is-menu .y9-home,
body.games-page-v9 .y9-hud.is-menu .y9-hearts {
  display: none !important;
}

body.games-page-v9 .y9-hud-left:has(.y9-score:only-child) {
  padding-left: clamp(12px, 1.2vw, 22px) !important;
}

/* Gwiezdne zdania: bez wielkiej pustej przestrzeni między slotami i słowami. */
body.games-page-v9 .y9-sentence-board {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  gap: clamp(8px, 1vh, 13px) !important;
  overflow: hidden !important;
}

body.games-page-v9 .y9-sentence-board .y9-prompt {
  flex: 0 0 auto !important;
  margin-bottom: 0 !important;
}

body.games-page-v9 .y9-sentence-board .y9-pill {
  flex: 0 0 auto !important;
  margin: 0 auto clamp(4px, .5vh, 8px) !important;
}

body.games-page-v9 .y9-sentence-slots {
  flex: 0 0 auto !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: clamp(7px, .62vw, 11px) !important;
  min-height: clamp(44px, 5vh, 62px) !important;
  margin: clamp(4px, .8vh, 10px) auto clamp(8px, 1vh, 14px) !important;
  width: min(88%, 760px) !important;
  overflow: visible !important;
}

body.games-page-v9 .y9-sentence-slots span {
  flex: 1 1 92px !important;
  max-width: 138px !important;
  min-width: 74px !important;
  min-height: clamp(38px, 4.7vh, 54px) !important;
  padding: 4px 8px !important;
  font-size: clamp(12px, .86vw, 15px) !important;
}

body.games-page-v9 .y9-word-bank {
  flex: 0 0 auto !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-content: flex-start !important;
  gap: clamp(7px, .58vw, 10px) !important;
  margin: clamp(18px, 2.8vh, 34px) auto 0 !important;
  max-height: none !important;
  overflow: visible !important;
  width: min(92%, 820px) !important;
}

body.games-page-v9 .y9-word-chip {
  min-height: clamp(32px, 4vh, 42px) !important;
  min-width: clamp(60px, 4.6vw, 82px) !important;
  padding: 5px 10px !important;
  font-size: clamp(12px, .84vw, 15px) !important;
}

body.games-page-v9 .y9-sentence-board .y9-actions {
  flex: 0 0 auto !important;
  margin-top: clamp(14px, 2vh, 24px) !important;
  justify-content: center !important;
}

body.games-page-v9 .y9-sentence-board .y9-small,
body.games-page-v9 .y9-sentence-board .y9-main {
  min-height: clamp(36px, 4.2vh, 46px) !important;
  padding: 0 clamp(12px, 1vw, 18px) !important;
}

/* Dolny pasek: odznaki mniejsze, ale nic nie jest ucięte. */
body.games-page-v9 .y9-bottom {
  width: min(920px, calc(100% - 580px)) !important;
  max-width: 920px !important;
  min-height: clamp(72px, 8vh, 92px) !important;
  padding: clamp(8px, .8vw, 12px) !important;
  align-items: center !important;
  overflow: visible !important;
}

body.games-page-v9 .y9-track {
  min-height: clamp(60px, 6.8vh, 76px) !important;
  padding: clamp(7px, .7vw, 10px) clamp(14px, 1.1vw, 18px) clamp(17px, 1.4vw, 22px) !important;
  gap: clamp(9px, .9vw, 15px) !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: thin !important;
  scrollbar-color: #ffc34f rgba(255,255,255,.55) !important;
}

body.games-page-v9 .y9-track-dot {
  width: clamp(44px, 3.3vw, 56px) !important;
  height: clamp(44px, 3.3vw, 56px) !important;
  border-radius: clamp(14px, 1.1vw, 18px) !important;
  flex: 0 0 auto !important;
}

body.games-page-v9 .y9-track-dot span {
  font-size: clamp(21px, 1.7vw, 30px) !important;
}

body.games-page-v9 .y9-track-dot small {
  top: auto !important;
  bottom: -15px !important;
  font-size: clamp(8px, .58vw, 10px) !important;
  line-height: 1 !important;
}

body.games-page-v9 .y9-lock-mini {
  right: -6px !important;
  top: -7px !important;
  width: 18px !important;
  height: 18px !important;
  font-size: 9px !important;
}

body.games-page-v9 .y9-prizes {
  min-width: clamp(174px, 13vw, 220px) !important;
  height: clamp(58px, 6.5vh, 76px) !important;
  font-size: clamp(22px, 1.75vw, 31px) !important;
}

body.games-page-v9 .y9-round {
  width: clamp(54px, 4vw, 70px) !important;
  height: clamp(54px, 4vw, 70px) !important;
  font-size: clamp(24px, 1.8vw, 32px) !important;
}

body.games-page-v9 .y9-prize-grid {
  scrollbar-width: thin !important;
  scrollbar-color: #ffae33 #fff1cc !important;
}
body.games-page-v9 .y9-prize-grid::-webkit-scrollbar { width: 12px !important; }
body.games-page-v9 .y9-prize-grid::-webkit-scrollbar-track {
  background: #fff1cc !important;
  border-radius: 999px !important;
  border: 2px solid #fffaf0 !important;
}
body.games-page-v9 .y9-prize-grid::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #ffe177, #ff9d2e) !important;
  border-radius: 999px !important;
  border: 2px solid #fff1cc !important;
}

@media (max-width: 1500px) {
  body.games-page-v9 .y9-board-wrap { width: min(1000px, calc(100% - 500px)) !important; }
  body.games-page-v9 .y9-bottom { width: min(870px, calc(100% - 530px)) !important; }
}

@media (max-width: 1150px) {
  body.games-page-v9 .y9-board-wrap,
  body.games-page-v9 .y9-bottom {
    width: calc(100% - 24px) !important;
    max-width: none !important;
  }
}

@media (max-width: 720px) {
  body.games-page-v9 .y9-game-board { height: auto !important; max-height: none !important; min-height: 520px !important; }
  body.games-page-v9 .y9-sentence-slots { width: 100% !important; flex-wrap: wrap !important; }
  body.games-page-v9 .y9-word-bank { width: 100% !important; }
  body.games-page-v9 .y9-bottom { grid-template-columns: auto auto 1fr !important; }
  body.games-page-v9 .y9-prizes { grid-column: 1 / -1 !important; width: 100% !important; }
}

/* =======================================================
   YAPPERS GAMES V25 - layout polish
======================================================= */

body.games-page-v9 .y9-game-board {
  height: clamp(520px, calc(100svh - 182px), 680px) !important;
  max-height: clamp(520px, calc(100svh - 182px), 680px) !important;
  min-height: 520px !important;
}

body.games-page-v9 .y9-board-wrap {
  transform: translateY(clamp(-20px, -1.8vh, -8px)) !important;
}

/* Gwiezdne zdania: większa treść i mniej pustej przestrzeni. */
body.games-page-v9 .y9-sentence-board {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: clamp(10px, 1.15vh, 16px) !important;
  padding-bottom: clamp(14px, 1.4vh, 22px) !important;
}

body.games-page-v9 .y9-sentence-board .y9-prompt {
  padding: clamp(10px, .9vw, 15px) clamp(13px, 1.1vw, 18px) !important;
}

body.games-page-v9 .y9-sentence-board .y9-prompt h2 {
  font-size: clamp(24px, 1.65vw, 33px) !important;
}

body.games-page-v9 .y9-sentence-board .y9-prompt p {
  font-size: clamp(11px, .72vw, 14px) !important;
}

body.games-page-v9 .y9-sentence-board .y9-pill {
  margin: 0 auto !important;
  padding: 8px 18px !important;
  font-size: clamp(12px, .85vw, 15px) !important;
}

body.games-page-v9 .y9-sentence-slots {
  width: min(94%, 860px) !important;
  min-height: clamp(62px, 7.5vh, 92px) !important;
  gap: clamp(10px, .85vw, 15px) !important;
  margin: clamp(8px, .8vh, 12px) auto 0 !important;
}

body.games-page-v9 .y9-sentence-slots span {
  flex: 1 1 118px !important;
  min-width: 106px !important;
  max-width: 165px !important;
  min-height: clamp(48px, 5.6vh, 66px) !important;
  padding: 7px 12px !important;
  border-width: 4px !important;
  font-size: clamp(14px, .98vw, 18px) !important;
}

body.games-page-v9 .y9-word-bank {
  flex: 1 1 auto !important;
  width: min(95%, 940px) !important;
  margin: 0 auto !important;
  display: flex !important;
  justify-content: center !important;
  align-content: center !important;
  align-items: center !important;
  gap: clamp(10px, .78vw, 15px) !important;
  padding: clamp(12px, 1.4vh, 22px) 0 !important;
  min-height: clamp(110px, 18vh, 210px) !important;
}

body.games-page-v9 .y9-word-chip {
  min-height: clamp(40px, 4.6vh, 54px) !important;
  min-width: clamp(72px, 5.1vw, 105px) !important;
  padding: 7px 15px !important;
  font-size: clamp(15px, .98vw, 18px) !important;
  border-width: 4px !important;
}

body.games-page-v9 .y9-sentence-board .y9-actions {
  margin: 0 auto !important;
  padding-bottom: 0 !important;
  justify-content: center !important;
  gap: clamp(10px, .9vw, 16px) !important;
}

body.games-page-v9 .y9-sentence-board .y9-small,
body.games-page-v9 .y9-sentence-board .y9-main {
  min-height: clamp(42px, 4.7vh, 56px) !important;
  padding: 0 clamp(17px, 1.3vw, 25px) !important;
  font-size: clamp(15px, .98vw, 18px) !important;
}

/* Dopasuj słowa: nie ucina dolnego rzędu obrazków ani ostatniego słowa. */
body.games-page-v9 .y9-match-board {
  display: flex !important;
  flex-direction: column !important;
  overflow: visible !important;
}

body.games-page-v9 .y9-match-stage {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: visible !important;
  display: grid !important;
  grid-template-columns: minmax(230px, .7fr) minmax(480px, 1.3fr) !important;
  gap: clamp(12px, 1vw, 18px) !important;
  padding-bottom: clamp(8px, .8vh, 14px) !important;
}

body.games-page-v9 .y9-match-words {
  display: grid !important;
  grid-template-rows: repeat(6, minmax(0, 1fr)) !important;
  gap: clamp(8px, .65vh, 12px) !important;
  min-height: 0 !important;
  padding-bottom: 4px !important;
}

body.games-page-v9 .y9-match-word {
  min-height: clamp(43px, 5.3vh, 62px) !important;
  padding: 6px 10px !important;
  font-size: clamp(13px, .86vw, 16px) !important;
}

body.games-page-v9 .y9-match-pictures {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(10px, .8vw, 14px) !important;
  min-height: 0 !important;
  padding-bottom: 4px !important;
}

body.games-page-v9 .y9-match-pic {
  min-height: 0 !important;
  padding: 6px !important;
  font-size: clamp(32px, 2.8vw, 54px) !important;
}

/* Balony: krótszy nagłówek, cel w jednej linii i wyższe pole balonów. */
body.games-page-v9 .y9-color-board {
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(8px, .8vh, 12px) !important;
}

body.games-page-v9 .y9-color-board .y9-prompt {
  padding: clamp(9px, .78vw, 13px) clamp(12px, 1vw, 16px) !important;
  margin-bottom: 0 !important;
}

body.games-page-v9 .y9-color-board .y9-prompt h2 {
  font-size: clamp(21px, 1.42vw, 29px) !important;
}

body.games-page-v9 .y9-color-board .y9-prompt p {
  font-size: clamp(10px, .66vw, 12px) !important;
  line-height: 1.1 !important;
}

body.games-page-v9 .y9-color-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(10px, .9vw, 18px) !important;
  flex-wrap: nowrap !important;
  margin: 0 auto !important;
  max-width: 96% !important;
}

body.games-page-v9 .y9-color-row .y9-pill {
  margin: 0 !important;
  padding: 7px 14px !important;
  font-size: clamp(12px, .84vw, 15px) !important;
  white-space: nowrap !important;
  letter-spacing: .03em !important;
}

body.games-page-v9 .y9-color-row .y9-color-target {
  margin: 0 !important;
  min-width: clamp(112px, 8.2vw, 148px) !important;
  padding: 6px 18px !important;
  font-size: clamp(16px, 1.1vw, 22px) !important;
  white-space: nowrap !important;
}

body.games-page-v9 .y9-color-board .y9-balloon-field {
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: clamp(405px, calc(100svh - 330px), 570px) !important;
  margin-top: clamp(4px, .5vh, 8px) !important;
}

@media (max-width: 1150px) {
  body.games-page-v9 .y9-match-stage {
    grid-template-columns: 1fr !important;
  }
  body.games-page-v9 .y9-match-pictures {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  body.games-page-v9 .y9-color-row {
    flex-wrap: wrap !important;
  }
}

@media (max-width: 720px) {
  body.games-page-v9 .y9-game-board {
    height: auto !important;
    max-height: none !important;
    min-height: 540px !important;
  }
  body.games-page-v9 .y9-sentence-slots span {
    flex-basis: calc(50% - 8px) !important;
    max-width: none !important;
  }
  body.games-page-v9 .y9-word-bank {
    min-height: auto !important;
  }
  body.games-page-v9 .y9-match-pictures {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* =======================================================
   /GRY FINAL FIX V2
   Tło gry ma zaczynać się od samej góry strony i być widoczne za navbarem.
   Footer nie jest tu stylowany: ma zostać dokładnie z globalnego partiala.
======================================================= */

body.games-page-v9 {
  padding-top: 0 !important;
  margin-top: 0 !important;
  background: #7ed8ff !important;
}

body.games-page-v9 header#main-header {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background: linear-gradient(180deg, rgba(26, 26, 26, 0.50) 0%, rgba(26, 26, 26, 0.18) 48%, rgba(26, 26, 26, 0) 100%) !important;
  z-index: 1000 !important;
}

body.games-page-v9 main#ya-games-root {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
  height: auto !important;
  min-height: 100svh !important;
  max-height: none !important;
  overflow: visible !important;
  background: transparent !important;
}

body.games-page-v9 .y9-root {
  height: auto !important;
  min-height: 100svh !important;
  max-height: none !important;
  overflow: visible !important;
  background: transparent !important;
}

body.games-page-v9 .y9-world {
  height: auto !important;
  min-height: 100svh !important;
  max-height: none !important;
  overflow: hidden !important;
  padding-top: clamp(126px, 7.4vw, 154px) !important;
  background-position: center center !important;
}

body.games-page-v9 .y9-board-wrap {
  transform: translateY(clamp(-8px, -0.8vh, 0px)) !important;
}

body.games-page-v9 .y9-bottom {
  transform: translateY(0) !important;
}

@media (max-width: 900px) {
  body.games-page-v9 header#main-header {
    height: 84px !important;
  }

  body.games-page-v9 main#ya-games-root,
  body.games-page-v9 .y9-root {
    min-height: 100svh !important;
  }

  body.games-page-v9 .y9-world {
    min-height: 100svh !important;
    padding-top: 96px !important;
    overflow: visible !important;
  }

  body.games-page-v9 .y9-board-wrap,
  body.games-page-v9 .y9-bottom {
    width: 100% !important;
    transform: none !important;
  }
}

/* =======================================================
   /GRY FINAL FIX V3
   - HUD wyżej, tło dalej pod navbarem
   - lekko mniejsze okno gry, żeby dolny pasek mieścił się w widoku
   - etykiety postępu są w kafelkach, nie wypadają poza dolny pasek
======================================================= */

body.games-page-v9 {
  padding-top: 0 !important;
  margin-top: 0 !important;
  background: #1a1a1a !important;
}

body.games-page-v9 header#main-header {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background: linear-gradient(180deg, rgba(26, 26, 26, 0.44) 0%, rgba(26, 26, 26, 0.16) 52%, rgba(26, 26, 26, 0) 100%) !important;
  z-index: 1000 !important;
}

body.games-page-v9 main#ya-games-root,
body.games-page-v9 .y9-root {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
  height: auto !important;
  min-height: 100svh !important;
  max-height: none !important;
  overflow: visible !important;
  background: transparent !important;
}

body.games-page-v9 .y9-world {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  height: 100svh !important;
  min-height: 100svh !important;
  max-height: 100svh !important;
  overflow: hidden !important;
  align-content: stretch !important;
  padding-top: clamp(92px, 5.6vw, 112px) !important;
  padding-bottom: clamp(30px, 3vh, 48px) !important;
  padding-left: clamp(20px, 5vw, 88px) !important;
  padding-right: clamp(20px, 5vw, 88px) !important;
  gap: clamp(3px, .45vh, 7px) !important;
  background-image: var(--y9-bg) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

body.games-page-v9 .y9-hud {
  width: min(1500px, 100%) !important;
  margin: 0 auto !important;
  transform: translateY(clamp(-14px, -1.35vh, -7px)) !important;
  z-index: 65 !important;
  flex: 0 0 auto !important;
}

body.games-page-v9 .y9-home,
body.games-page-v9 .y9-score,
body.games-page-v9 .y9-hearts,
body.games-page-v9 .y9-progress-card {
  min-height: clamp(40px, 4.7vh, 56px) !important;
}

body.games-page-v9 .y9-home {
  width: clamp(44px, 3.5vw, 58px) !important;
  font-size: clamp(21px, 1.8vw, 28px) !important;
}

body.games-page-v9 .y9-score {
  padding: 4px clamp(10px, 1.05vw, 16px) !important;
  grid-template-rows: 13px 1fr !important;
}

body.games-page-v9 .y9-score span {
  font-size: clamp(23px, 1.8vw, 32px) !important;
}

body.games-page-v9 .y9-score small {
  font-size: 10px !important;
}

body.games-page-v9 .y9-score strong {
  font-size: clamp(23px, 1.85vw, 34px) !important;
}

body.games-page-v9 .y9-hearts {
  padding: 0 clamp(13px, 1.3vw, 22px) !important;
}

body.games-page-v9 .y9-heart {
  font-size: clamp(16px, 1.15vw, 22px) !important;
}

body.games-page-v9 .y9-progress-card {
  min-width: clamp(158px, 12.4vw, 224px) !important;
  padding: 5px 14px !important;
  font-size: clamp(15px, 1.14vw, 20px) !important;
}

body.games-page-v9 .y9-mini-bar {
  width: clamp(70px, 6vw, 108px) !important;
  height: 11px !important;
}

body.games-page-v9 .y9-board-wrap {
  position: relative !important;
  z-index: 20 !important;
  align-self: center !important;
  width: min(1000px, calc(100% - 560px)) !important;
  max-width: 1000px !important;
  min-height: 0 !important;
  display: grid !important;
  place-items: center !important;
  transform: translateY(clamp(-24px, -2.2vh, -12px)) !important;
}

body.games-page-v9 .y9-board {
  width: 100% !important;
  max-width: 100% !important;
  padding: clamp(8px, .72vw, 13px) !important;
  border-width: 3px !important;
  border-radius: 23px !important;
}

body.games-page-v9 .y9-game-board,
body.games-page-v9 .y9-menu-board {
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

body.games-page-v9 .y9-game-board {
  height: clamp(390px, calc(100svh - 286px), 535px) !important;
  max-height: clamp(390px, calc(100svh - 286px), 535px) !important;
}

body.games-page-v9 .y9-menu-board {
  height: clamp(370px, calc(100svh - 304px), 500px) !important;
  max-height: clamp(370px, calc(100svh - 304px), 500px) !important;
}

body.games-page-v9 .y9-prompt {
  min-height: clamp(48px, 5.2vh, 64px) !important;
  padding: 6px 11px !important;
  margin-bottom: clamp(4px, .45vh, 7px) !important;
  border-radius: 18px !important;
}

body.games-page-v9 .y9-prompt h2 {
  font-size: clamp(18px, 1.32vw, 24px) !important;
  line-height: 1 !important;
}

body.games-page-v9 .y9-prompt p {
  font-size: clamp(8.5px, .58vw, 11px) !important;
  line-height: 1.08 !important;
}

body.games-page-v9 .y9-speaker {
  width: clamp(38px, 3.1vw, 48px) !important;
  height: clamp(38px, 3.1vw, 48px) !important;
  font-size: clamp(18px, 1.35vw, 23px) !important;
}

body.games-page-v9 .y9-notes {
  font-size: clamp(17px, 1.45vw, 27px) !important;
}

body.games-page-v9 .y9-menu-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(6px, .55vw, 9px) !important;
}

body.games-page-v9 .y9-menu-card {
  min-height: 0 !important;
  padding: 7px 9px !important;
  border-radius: 16px !important;
}

body.games-page-v9 .y9-icon {
  font-size: clamp(21px, 1.6vw, 28px) !important;
}

body.games-page-v9 .y9-menu-card strong {
  font-size: clamp(15px, 1vw, 19px) !important;
  line-height: 1 !important;
}

body.games-page-v9 .y9-menu-card small {
  font-size: 9px !important;
}

body.games-page-v9 .y9-menu-card p {
  font-size: clamp(8.2px, .55vw, 10px) !important;
  line-height: 1.05 !important;
}

body.games-page-v9 .y9-bottom {
  position: relative !important;
  z-index: 55 !important;
  width: min(980px, calc(100% - 500px)) !important;
  max-width: 980px !important;
  min-height: clamp(54px, 6vh, 74px) !important;
  margin: 0 auto !important;
  transform: translateY(clamp(-18px, -1.7vh, -8px)) !important;
  display: grid !important;
  grid-template-columns: auto auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: clamp(7px, .72vw, 11px) !important;
  padding: 4px !important;
}

body.games-page-v9 .y9-round {
  width: clamp(48px, 3.8vw, 62px) !important;
  height: clamp(48px, 3.8vw, 62px) !important;
  font-size: clamp(21px, 1.65vw, 28px) !important;
}

body.games-page-v9 .y9-prizes {
  min-width: clamp(156px, 11.2vw, 202px) !important;
  height: clamp(52px, 5.8vh, 68px) !important;
  padding: 0 clamp(14px, 1.1vw, 20px) !important;
  font-size: clamp(20px, 1.55vw, 28px) !important;
}

body.games-page-v9 .y9-track {
  min-height: clamp(52px, 5.9vh, 68px) !important;
  padding: 5px clamp(8px, .85vw, 15px) !important;
  gap: clamp(7px, .75vw, 12px) !important;
  overflow: hidden !important;
  justify-content: center !important;
}

body.games-page-v9 .y9-track-dot {
  width: clamp(44px, 3.5vw, 58px) !important;
  height: clamp(46px, 3.8vw, 62px) !important;
  border-radius: 17px !important;
  padding: 3px 3px 12px !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 auto !important;
}

body.games-page-v9 .y9-track-dot span {
  font-size: clamp(22px, 1.75vw, 31px) !important;
  line-height: 1 !important;
  transform: translateY(-3px) !important;
}

body.games-page-v9 .y9-track-dot small {
  top: auto !important;
  bottom: 4px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  font-size: clamp(7px, .55vw, 9px) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

body.games-page-v9 .y9-lock-mini {
  right: -5px !important;
  top: -6px !important;
  width: 20px !important;
  height: 20px !important;
  font-size: 10px !important;
}

body.games-page-v9 .y9-card-grid,
body.games-page-v9 .y9-choice-grid {
  gap: clamp(6px, .56vw, 10px) !important;
}

body.games-page-v9 .y9-vocab-card {
  min-height: 0 !important;
  padding: 5px !important;
}

body.games-page-v9 .y9-listen-board .y9-vocab-card .y9-emoji,
body.games-page-v9 .y9-picture-only .y9-emoji {
  font-size: clamp(42px, 3.85vw, 68px) !important;
}

body.games-page-v9 .y9-color-board .y9-balloon-field {
  min-height: clamp(300px, calc(100svh - 350px), 480px) !important;
}

body.games-page-v9 .y9-memory-grid,
body.games-page-v9 .y9-food-grid,
body.games-page-v9 .y9-match-stage,
body.games-page-v9 .y9-word-bank {
  min-height: 0 !important;
}

@media (max-width: 1500px) {
  body.games-page-v9 .y9-board-wrap {
    width: min(930px, calc(100% - 440px)) !important;
    max-width: 930px !important;
  }

  body.games-page-v9 .y9-bottom {
    width: min(910px, calc(100% - 360px)) !important;
    max-width: 910px !important;
  }
}

@media (max-width: 1150px) {
  body.games-page-v9 {
    overflow-y: auto !important;
  }

  body.games-page-v9 .y9-world {
    height: auto !important;
    min-height: 100svh !important;
    max-height: none !important;
    overflow: visible !important;
    padding-top: 96px !important;
    padding-bottom: 22px !important;
  }

  body.games-page-v9 .y9-hud,
  body.games-page-v9 .y9-board-wrap,
  body.games-page-v9 .y9-bottom {
    width: calc(100% - 24px) !important;
    max-width: none !important;
    transform: none !important;
  }

  body.games-page-v9 .y9-game-board,
  body.games-page-v9 .y9-menu-board {
    height: auto !important;
    max-height: none !important;
  }

  body.games-page-v9 .y9-menu-grid,
  body.games-page-v9 .y9-card-grid,
  body.games-page-v9 .y9-choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.games-page-v9 .y9-feed-stage,
  body.games-page-v9 .y9-match-stage {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 720px) {
  body.games-page-v9 .y9-bottom {
    grid-template-columns: auto auto 1fr !important;
  }

  body.games-page-v9 .y9-prizes {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }

  body.games-page-v9 .y9-track {
    justify-content: flex-start !important;
    overflow-x: auto !important;
  }
}


/* =======================================================
   V4 OVERRIDES - większy odstęp prompt/pill, nowa żabka, gra ubieranki, wzmocnienie stopki
======================================================= */
body.games-page-v9 .y9-prompt {
  margin-bottom: clamp(18px, 1.55vh, 24px) !important;
}

body.games-page-v9 .y9-pill {
  margin-bottom: clamp(18px, 1.55vh, 24px) !important;
}

body.games-page-v9 .y9-card-dress { --b:#ff93c8; --s:#d86a9a; }

body.games-page-v9 .y9-feed-frog-shell {
  width: clamp(146px, 11.5vw, 198px) !important;
  aspect-ratio: 1.12 / 1;
  display: grid;
  place-items: center;
  margin: 0 auto;
  filter: drop-shadow(0 14px 22px rgba(33, 84, 28, 0.18));
}

body.games-page-v9 .y9-feed-frog-image {
  width: 100%;
  height: auto;
  display: block;
  user-select: none;
  pointer-events: none;
}

body.games-page-v9 .y9-feed-frog-shell[data-feed-state="eating"] {
  animation: y9FrogEatV4 .44s ease-in-out 2;
}

@keyframes y9FrogEatV4 {
  0%,100% { transform: translateY(0) scale(1); }
  45% { transform: translateY(-5px) scale(1.03); }
}

/* min-height dress-board usuniety (przywrocenie standardowego okna, jak reszta
   gier) - patrz komentarz przy nastepnym takim usunieciu nizej w tym pliku. */

body.games-page-v9 .y9-dress-stage {
  display: grid;
  grid-template-columns: minmax(250px, .82fr) minmax(0, 1.18fr);
  gap: clamp(16px, 1.4vw, 24px);
  align-items: stretch;
  min-height: 0;
}

body.games-page-v9 .y9-princess-zone {
  border-radius: 26px;
  border: 3px solid rgba(255,255,255,.72);
  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,244,251,.94));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 10px 24px rgba(70, 45, 63, .10);
  padding: clamp(14px, 1.1vw, 18px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

body.games-page-v9 .y9-princess-bubble {
  max-width: 92%;
  border-radius: 20px;
  padding: 12px 14px;
  background: linear-gradient(180deg, #ffffff, #fff3f8);
  border: 3px solid rgba(245, 151, 187, .45);
  color: #7d3558;
  font-weight: 1000;
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.25;
  text-align: center;
  position: relative;
  box-shadow: 0 8px 18px rgba(110, 57, 84, .08);
}

body.games-page-v9 .y9-princess-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -12px;
  transform: translateX(-50%);
  border: 12px solid transparent;
  border-top-color: #fff4f8;
}

body.games-page-v9 .y9-princess-avatar {
  position: relative;
  width: clamp(180px, 15vw, 250px);
  height: clamp(260px, 24vw, 360px);
  margin: 4px auto;
}
body.games-page-v9 .y9-princess-shadow { position:absolute; left:50%; bottom:8px; transform:translateX(-50%); width:62%; height:22px; border-radius:999px; background:rgba(112,66,83,.14); filter: blur(1px); }
body.games-page-v9 .y9-princess-hair { position:absolute; left:50%; top:34px; transform:translateX(-50%); width:98px; height:112px; border-radius:50px 50px 42px 42px; background:linear-gradient(180deg,#4f2b2a,#2f1718); }
body.games-page-v9 .y9-princess-head { position:absolute; left:50%; top:44px; transform:translateX(-50%); width:74px; height:84px; border-radius:38px; background:#ffd9c7; z-index:2; }
body.games-page-v9 .y9-princess-eye { position:absolute; top:82px; width:12px; height:18px; border-radius:999px; background:#3c1b24; z-index:3; }
body.games-page-v9 .y9-princess-eye.left { left:calc(50% - 20px); }
body.games-page-v9 .y9-princess-eye.right { right:calc(50% - 20px); }
body.games-page-v9 .y9-princess-blush { position:absolute; top:96px; width:14px; height:10px; border-radius:999px; background:#ffb0c8; opacity:.82; z-index:3; }
body.games-page-v9 .y9-princess-blush.left { left:calc(50% - 34px); }
body.games-page-v9 .y9-princess-blush.right { right:calc(50% - 34px); }
body.games-page-v9 .y9-princess-smile { position:absolute; left:50%; top:102px; transform:translateX(-50%); width:22px; height:12px; border-bottom:4px solid #8d3856; border-radius:0 0 999px 999px; z-index:3; }
body.games-page-v9 .y9-princess-neck { position:absolute; left:50%; top:118px; transform:translateX(-50%); width:18px; height:18px; border-radius:8px; background:#ffd9c7; z-index:1; }
body.games-page-v9 .y9-princess-arm { position:absolute; top:145px; width:24px; height:86px; background:#ffd9c7; border-radius:18px; z-index:1; }
body.games-page-v9 .y9-princess-arm.left { left:50px; transform:rotate(12deg); }
body.games-page-v9 .y9-princess-arm.right { right:50px; transform:rotate(-12deg); }
body.games-page-v9 .y9-princess-top-shape { position:absolute; left:50%; top:130px; transform:translateX(-50%); width:88px; height:68px; border-radius:26px 26px 18px 18px; background:var(--cloth); box-shadow: inset 0 -10px 0 rgba(255,255,255,.22); z-index:2; }
body.games-page-v9 .y9-princess-top-shape::after { content:""; position:absolute; left:50%; top:12px; transform:translateX(-50%); width:36px; height:10px; border-radius:0 0 999px 999px; border:3px solid var(--accent); border-top:0; opacity:.85; }
body.games-page-v9 .y9-princess-bottom-shape { position:absolute; left:50%; top:186px; transform:translateX(-50%); width:112px; height:78px; background:var(--cloth); z-index:2; box-shadow: inset 0 -12px 0 rgba(255,255,255,.12); }
body.games-page-v9 .y9-princess-bottom-shape.is-skirt, body.games-page-v9 .y9-princess-bottom-shape.is-default { clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%); border-radius:12px; }
body.games-page-v9 .y9-princess-bottom-shape.is-pants { clip-path: polygon(15% 0, 85% 0, 92% 100%, 60% 100%, 54% 54%, 46% 54%, 40% 100%, 8% 100%); border-radius:12px; }
body.games-page-v9 .y9-princess-bottom-shape.is-shorts { clip-path: polygon(10% 0, 90% 0, 90% 60%, 66% 68%, 60% 100%, 40% 100%, 34% 68%, 10% 60%); border-radius:14px; }
body.games-page-v9 .y9-princess-dress-shape { position:absolute; left:50%; top:128px; transform:translateX(-50%); width:126px; height:138px; background:var(--cloth); clip-path: polygon(34% 0, 66% 0, 76% 13%, 86% 28%, 100% 100%, 0 100%, 14% 28%, 24% 13%); border-radius:16px; box-shadow: inset 0 -18px 0 rgba(255,255,255,.17); z-index:2; }
body.games-page-v9 .y9-princess-dress-shape::after { content:""; position:absolute; left:50%; top:20px; transform:translateX(-50%); width:58px; height:12px; border-radius:999px; border:3px solid var(--accent); border-top:0; }
body.games-page-v9 .y9-princess-legs { position:absolute; left:50%; top:250px; transform:translateX(-50%); width:54px; height:56px; background:linear-gradient(90deg,#ffd9c7 0 43%, transparent 43% 57%, #ffd9c7 57% 100%); z-index:1; }
body.games-page-v9 .y9-princess-shoes { position:absolute; left:50%; top:292px; transform:translateX(-50%); width:78px; text-align:center; font-size:24px; z-index:2; }
body.games-page-v9 .y9-princess-headpiece { position:absolute; left:50%; transform:translateX(-50%); z-index:4; text-align:center; }
body.games-page-v9 .y9-princess-headpiece.is-crown { top:12px; font-size:36px; filter: drop-shadow(0 4px 4px rgba(117,87,24,.18)); }
body.games-page-v9 .y9-princess-headpiece.is-bow { top:26px; font-size:30px; }
body.games-page-v9 .y9-princess-headpiece.is-hat { top:18px; font-size:34px; }
body.games-page-v9 .y9-princess-headpiece.is-headband { top:28px; font-size:22px; color: var(--cloth); text-shadow: 0 0 0 var(--cloth); }
body.games-page-v9 .y9-princess-cape { position:absolute; left:50%; top:132px; transform:translateX(-50%); width:132px; height:130px; background:linear-gradient(180deg,var(--cloth), color-mix(in srgb, var(--cloth) 72%, #492554)); clip-path: polygon(18% 0, 82% 0, 100% 90%, 50% 100%, 0 90%); opacity:.55; z-index:0; }
body.games-page-v9 .y9-princess-scarf { position:absolute; left:50%; top:130px; transform:translateX(-50%); width:72px; height:28px; border-radius:999px; background:var(--cloth); box-shadow: 0 12px 0 0 var(--accent); z-index:3; }
body.games-page-v9 .y9-princess-bag { position:absolute; right:34px; top:190px; font-size:30px; z-index:3; }
body.games-page-v9 .y9-princess-necklace { position:absolute; left:50%; top:136px; transform:translateX(-50%); color:#f4c646; font-size:12px; letter-spacing:2px; z-index:3; }

body.games-page-v9 .y9-dress-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, .9vw, 14px);
  align-content: start;
}

body.games-page-v9 .y9-dress-card {
  appearance: none;
  border: 3px solid rgba(255,255,255,.82);
  border-radius: 22px;
  background: linear-gradient(180deg, #fffefb, #fff1ec);
  padding: 10px 10px 12px;
  box-shadow: 0 7px 0 rgba(196, 131, 103, .26), 0 10px 18px rgba(79, 58, 48, .11);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  text-align: center;
  color: #5a2b21;
}
body.games-page-v9 .y9-dress-card-topline { font-size: 11px; text-transform: uppercase; font-weight: 1000; color: #de5d8b; }
body.games-page-v9 .y9-dress-card strong { font-size: clamp(13px, .95vw, 16px); line-height: 1.12; font-weight: 1000; }
body.games-page-v9 .y9-dress-card small { color: rgba(90,43,33,.68); font-size: 11px; font-weight: 900; }
body.games-page-v9 .y9-dress-card.is-good { border-color: #7cdd7c; background: linear-gradient(180deg, #fffefb, #edffe8); }
body.games-page-v9 .y9-dress-card.is-bad { border-color: #ff93ae; background: linear-gradient(180deg, #fffefb, #fff0f4); }
body.games-page-v9 .y9-dress-card-icon {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: linear-gradient(180deg, var(--accent), #ffffff);
  border: 3px solid rgba(255,255,255,.92);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.04);
  font-size: 33px;
  position: relative;
}
body.games-page-v9 .y9-dress-card-icon::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--cloth) 78%, white);
  opacity: .22;
}

body.games-page-v9 #site-footer {
  background: rgba(26,26,26,0.92) !important;
  color: #fff !important;
}
body.games-page-v9 #site-footer,
body.games-page-v9 #site-footer * {
  font-family: 'Quicksand', sans-serif !important;
}
body.games-page-v9 #site-footer .footer-col-title {
  color: #ffda59 !important;
  font-weight: 800 !important;
}

@media (max-width: 1150px) {
  body.games-page-v9 .y9-dress-stage {
    grid-template-columns: 1fr !important;
  }
}


/* =======================================================
   V5 OVERRIDES - ilustracyjne assety księżniczki i żabki
======================================================= */
body.games-page-v9 .y9-feed-frog-shell {
  width: clamp(170px, 12vw, 220px) !important;
  aspect-ratio: 1 / 1;
}
body.games-page-v9 .y9-feed-frog-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

body.games-page-v9 .y9-sprite {
  display: block;
  background-repeat: no-repeat;
  image-rendering: auto;
}
body.games-page-v9 .y9-sprite.is-large {
  width: 100%;
  height: 100%;
}
body.games-page-v9 .y9-dress-stage {
  grid-template-columns: minmax(280px, .82fr) minmax(0, 1.18fr) !important;
}
body.games-page-v9 .y9-princess-zone {
  min-height: clamp(430px, 51vh, 620px) !important;
}
body.games-page-v9 .y9-princess-avatar {
  position: relative;
  width: min(260px, 88%);
  aspect-ratio: 3 / 4;
  margin: 6px auto 0;
}
body.games-page-v9 .y9-princess-base {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 2;
}
body.games-page-v9 .y9-princess-layer {
  position: absolute;
  pointer-events: none;
}
body.games-page-v9 .y9-layer-cape { left: 8%; top: 16%; width: 84%; height: 46%; z-index: 1; }
body.games-page-v9 .y9-layer-dress { left: 17%; top: 29%; width: 66%; height: 48%; z-index: 3; }
body.games-page-v9 .y9-layer-top { left: 22%; top: 28%; width: 56%; height: 28%; z-index: 3; }
body.games-page-v9 .y9-layer-bottom { left: 19%; top: 47%; width: 62%; height: 30%; z-index: 3; }
body.games-page-v9 .y9-layer-shoes { left: 29%; top: 77%; width: 42%; height: 13%; z-index: 4; }
body.games-page-v9 .y9-layer-head { left: 24%; top: 5%; width: 52%; height: 18%; z-index: 5; }
body.games-page-v9 .y9-layer-bag { left: 62%; top: 52%; width: 22%; height: 16%; z-index: 4; }
body.games-page-v9 .y9-layer-necklace { left: 34%; top: 29%; width: 30%; height: 12%; z-index: 5; }
body.games-page-v9 .y9-layer-scarf { left: 28%; top: 25%; width: 44%; height: 16%; z-index: 5; }

body.games-page-v9 .y9-dress-card {
  min-height: 196px;
}
body.games-page-v9 .y9-dress-card-sprite {
  width: 92px;
  height: 92px;
  margin: 0 auto 2px;
}

@media (max-width: 1150px) {
  body.games-page-v9 .y9-dress-stage {
    grid-template-columns: 1fr !important;
  }
  body.games-page-v9 .y9-princess-avatar {
    width: min(240px, 70vw);
  }
}


/* =======================================================
   V7 OVERRIDES - transparent assets, frog timing, princess fit
======================================================= */
body.games-page-v9 .y9-feed-frog-shell {
  width: clamp(176px, 12.5vw, 230px) !important;
}
body.games-page-v9 .y9-feed-frog-shell[data-feed-state="sad"] .y9-feed-frog-image,
body.games-page-v9 .y9-feed-frog-shell[data-feed-state="eating"] .y9-feed-frog-image {
  transform: scale(1.02);
}

/* min-height dress-board usuniety - patrz komentarz przy dalszym usunieciu. */
body.games-page-v9 .y9-dress-stage {
  grid-template-columns: minmax(255px, .82fr) minmax(0, 1.18fr) !important;
  gap: clamp(12px, 1vw, 18px) !important;
  align-items: start !important;
}
body.games-page-v9 .y9-princess-zone {
  min-height: clamp(470px, 58vh, 720px) !important;
  padding: 14px 14px 22px !important;
  overflow: visible !important;
}
body.games-page-v9 .y9-princess-bubble {
  margin-bottom: 2px !important;
}
body.games-page-v9 .y9-princess-avatar {
  width: min(245px, 82%) !important;
  aspect-ratio: 3 / 4 !important;
  margin: 10px auto 0 !important;
  overflow: visible !important;
}
body.games-page-v9 .y9-princess-base {
  width: 92% !important;
  height: 92% !important;
  left: 4% !important;
  top: 4% !important;
  right: auto !important;
  bottom: auto !important;
  object-fit: contain !important;
}
body.games-page-v9 .y9-princess-layer { overflow: visible !important; }
body.games-page-v9 .y9-layer-cape { left: 12% !important; top: 20% !important; width: 76% !important; height: 38% !important; }
body.games-page-v9 .y9-layer-dress { left: 23% !important; top: 34% !important; width: 54% !important; height: 35% !important; }
body.games-page-v9 .y9-layer-top { left: 26% !important; top: 33% !important; width: 48% !important; height: 18% !important; }
body.games-page-v9 .y9-layer-bottom { left: 24% !important; top: 50% !important; width: 52% !important; height: 20% !important; }
body.games-page-v9 .y9-layer-shoes { left: 33% !important; top: 71% !important; width: 34% !important; height: 8.5% !important; }
body.games-page-v9 .y9-layer-head { left: 29% !important; top: 10% !important; width: 42% !important; height: 11% !important; }
body.games-page-v9 .y9-layer-bag { left: 61% !important; top: 52% !important; width: 17% !important; height: 11% !important; }
body.games-page-v9 .y9-layer-necklace { left: 37% !important; top: 33.5% !important; width: 22% !important; height: 7% !important; }
body.games-page-v9 .y9-layer-scarf { left: 33% !important; top: 31% !important; width: 30% !important; height: 10% !important; }

body.games-page-v9 .y9-dress-grid {
  gap: clamp(8px, .7vw, 12px) !important;
}
body.games-page-v9 .y9-dress-card {
  min-height: 168px !important;
  padding: 8px 8px 10px !important;
  gap: 4px !important;
}
body.games-page-v9 .y9-dress-card-sprite {
  width: 74px !important;
  height: 74px !important;
}
body.games-page-v9 .y9-dress-card strong {
  font-size: clamp(12px, .92vw, 15px) !important;
}
body.games-page-v9 .y9-dress-card small {
  font-size: 10px !important;
}

@media (max-width: 1150px) {
  body.games-page-v9 .y9-dress-stage {
    grid-template-columns: 1fr !important;
  }
  body.games-page-v9 .y9-princess-zone {
    min-height: 430px !important;
  }
  body.games-page-v9 .y9-princess-avatar {
    width: min(230px, 70vw) !important;
  }
}


/* =======================================================
   V8 OVERRIDES - princess vertical fit and layer mapping
======================================================= */
/* min-height dress-board usuniety - patrz komentarz przy dalszym usunieciu. */
body.games-page-v9 .y9-dress-stage {
  grid-template-columns: minmax(255px, .8fr) minmax(0, 1.2fr) !important;
  min-height: clamp(440px, 53vh, 660px) !important;
  max-height: none !important;
  align-items: stretch !important;
}
body.games-page-v9 .y9-princess-zone {
  min-height: clamp(500px, 60vh, 760px) !important;
  padding: 12px 12px 28px !important;
}
body.games-page-v9 .y9-princess-bubble {
  margin-bottom: 4px !important;
}
body.games-page-v9 .y9-princess-avatar {
  width: min(220px, 74%) !important;
  aspect-ratio: 3 / 4 !important;
  margin: 0 auto !important;
}
body.games-page-v9 .y9-princess-base {
  width: 88% !important;
  height: 88% !important;
  left: 6% !important;
  top: -2% !important;
}
body.games-page-v9 .y9-layer-cape { left: 18% !important; top: 31% !important; width: 64% !important; height: 23% !important; z-index: 1 !important; }
body.games-page-v9 .y9-layer-dress { left: 29% !important; top: 48% !important; width: 40% !important; height: 21% !important; z-index: 3 !important; }
body.games-page-v9 .y9-layer-top { left: 31% !important; top: 43% !important; width: 36% !important; height: 12% !important; z-index: 3 !important; }
body.games-page-v9 .y9-layer-bottom { left: 31% !important; top: 56% !important; width: 35% !important; height: 12% !important; z-index: 3 !important; }
body.games-page-v9 .y9-layer-shoes { left: 37% !important; top: 77.5% !important; width: 20% !important; height: 4.5% !important; z-index: 4 !important; }
body.games-page-v9 .y9-layer-head { left: 33% !important; top: 13% !important; width: 24% !important; height: 6.5% !important; z-index: 5 !important; }
body.games-page-v9 .y9-layer-bag { left: 60% !important; top: 58% !important; width: 12% !important; height: 8% !important; z-index: 4 !important; }
body.games-page-v9 .y9-layer-necklace { left: 39% !important; top: 46% !important; width: 14% !important; height: 4% !important; z-index: 5 !important; }
body.games-page-v9 .y9-layer-scarf { left: 36% !important; top: 43% !important; width: 20% !important; height: 6% !important; z-index: 5 !important; }

body.games-page-v9 .y9-dress-grid {
  max-height: clamp(430px, 53vh, 640px) !important;
  overflow-y: auto !important;
  padding-right: 4px !important;
  grid-auto-rows: minmax(0, auto) !important;
}
body.games-page-v9 .y9-dress-grid::-webkit-scrollbar { width: 8px; }
body.games-page-v9 .y9-dress-grid::-webkit-scrollbar-thumb { background: rgba(187,124,151,.45); border-radius: 999px; }
body.games-page-v9 .y9-dress-grid::-webkit-scrollbar-track { background: rgba(255,255,255,.35); border-radius: 999px; }
body.games-page-v9 .y9-dress-card {
  min-height: 148px !important;
  padding: 8px 8px 8px !important;
  border-radius: 20px !important;
}
body.games-page-v9 .y9-dress-card-sprite {
  width: 60px !important;
  height: 60px !important;
}
body.games-page-v9 .y9-dress-card-topline {
  font-size: 10px !important;
}
body.games-page-v9 .y9-dress-card strong {
  font-size: clamp(11px, .86vw, 14px) !important;
  line-height: 1.05 !important;
}
body.games-page-v9 .y9-dress-card small {
  font-size: 9px !important;
  line-height: 1.05 !important;
}

@media (max-width: 1150px) {
  body.games-page-v9 .y9-dress-stage {
    grid-template-columns: 1fr !important;
  }
  body.games-page-v9 .y9-dress-grid {
    max-height: none !important;
    overflow: visible !important;
  }
  body.games-page-v9 .y9-princess-zone {
    min-height: 460px !important;
  }
}


/* =======================================================
   V9 OVERRIDES - individual princess assets + custom dress background
======================================================= */
/* min-height dress-board .y9-dress-board USUNIETY (bylo az 5 osobnych rund
   z coraz wieksza wartoscia w tym pliku!) - to jedyny powod, dla ktorego
   okno "Ubierz ksiezniczke" bylo wieksze niz standardowe okno reszty gier
   (.y9-game-board ma wlasna, uniwersalna regule height/max-height gdzie
   indziej w tym pliku - .y9-dress-board teraz jej po prostu nie nadpisuje). */
body.games-page-v9 .y9-dress-stage {
  grid-template-columns: minmax(250px, 0.78fr) minmax(0, 1.22fr) !important;
  min-height: clamp(470px, 56vh, 700px) !important;
  gap: clamp(10px, .9vw, 16px) !important;
  align-items: stretch !important;
}
body.games-page-v9 .y9-princess-zone {
  min-height: clamp(515px, 62vh, 760px) !important;
  padding: 12px 12px 34px !important;
  justify-content: flex-start !important;
  overflow: visible !important;
}
body.games-page-v9 .y9-princess-avatar {
  position: relative;
  width: min(210px, 72%) !important;
  aspect-ratio: 0.58 / 1 !important;
  margin: 4px auto 0 !important;
  overflow: visible !important;
}
body.games-page-v9 .y9-princess-base {
  position: absolute;
  left: 0; top: 0; width: 100% !important; height: 100% !important;
  object-fit: contain;
  z-index: 2;
}
body.games-page-v9 .y9-princess-piece {
  position: absolute;
  display: block;
  object-fit: contain;
  pointer-events: none;
}
body.games-page-v9 .y9-layer-cape { left: 13%; top: 36%; width: 74%; height: 25%; z-index: 1; }
body.games-page-v9 .y9-layer-top { left: 28%; top: 43%; width: 44%; height: 16%; z-index: 3; }
body.games-page-v9 .y9-layer-bottom { left: 27%; top: 57%; width: 46%; height: 17%; z-index: 3; }
body.games-page-v9 .y9-layer-bottom.kind-pants { left: 28%; top: 57%; width: 43%; height: 18%; }
body.games-page-v9 .y9-layer-bottom.kind-shorts { left: 30%; top: 57%; width: 40%; height: 16%; }
body.games-page-v9 .y9-layer-dress { left: 25%; top: 42%; width: 50%; height: 34%; z-index: 3; }
body.games-page-v9 .y9-layer-shoes { left: 34%; top: 84%; width: 30%; height: 8%; z-index: 4; }
body.games-page-v9 .y9-layer-head { left: 31%; top: 10%; width: 38%; height: 10%; z-index: 5; }
body.games-page-v9 .y9-layer-head.kind-bow { left: 34%; top: 14%; width: 28%; height: 8%; }
body.games-page-v9 .y9-layer-head.kind-headband { left: 31%; top: 17%; width: 38%; height: 6%; }
body.games-page-v9 .y9-layer-head.kind-hat { left: 26%; top: 8%; width: 48%; height: 16%; }
body.games-page-v9 .y9-layer-accessory.kind-bag { left: 63%; top: 63%; width: 12%; height: 10%; z-index: 4; }
body.games-page-v9 .y9-layer-accessory.kind-necklace { left: 40%; top: 47%; width: 18%; height: 5%; z-index: 5; }
body.games-page-v9 .y9-layer-accessory.kind-scarf { left: 35%; top: 45%; width: 30%; height: 10%; z-index: 5; }

body.games-page-v9 .y9-dress-grid {
  max-height: clamp(450px, 56vh, 670px) !important;
  overflow-y: auto !important;
  padding-right: 4px !important;
}
body.games-page-v9 .y9-dress-card {
  min-height: 150px !important;
  padding: 8px !important;
  gap: 4px !important;
}
body.games-page-v9 .y9-dress-card-img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  margin: 0 auto 2px;
  display: block;
}
body.games-page-v9 .y9-dress-card strong { font-size: clamp(11px, .86vw, 14px) !important; line-height: 1.06 !important; }
body.games-page-v9 .y9-dress-card small { font-size: 9px !important; line-height: 1.06 !important; }

@media (max-width: 1150px) {
  body.games-page-v9 .y9-dress-stage { grid-template-columns: 1fr !important; }
  body.games-page-v9 .y9-princess-zone { min-height: 470px !important; }
  body.games-page-v9 .y9-princess-avatar { width: min(200px, 66vw) !important; }
  body.games-page-v9 .y9-dress-grid { max-height: none !important; overflow: visible !important; }
}


/* =======================================================
   V10 OVERRIDES - proper princess mannequin layering + new BG with frog/princess
======================================================= */
/* .y9-dress-board mial WLASNY, WIEKSZY min-height (590-820px) niz standardowy
   .y9-game-board uzywany przez reszte gierek (390-680px, zalezy od rundy w
   tym pliku) - stad okno "Ubierz ksiezniczke" bylo faktycznie WIEKSZE niz u
   wszystkich innych gier. Usuniete - plansza wraca do STANDARDOWEGO rozmiaru
   (ta sama regula .y9-game-board co reszta), a fitPrincessAvatar() w
   games.js dopasowuje awatara do TEGO, co faktycznie zostaje z tego okna. */
body.games-page-v9 .y9-dress-stage {
  grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr) !important;
  gap: clamp(12px, 1vw, 18px) !important;
  align-items: stretch !important;
}
body.games-page-v9 .y9-princess-zone {
  /* 44px na dole bylo zapasem pod usuniety juz dymek/etykiete (patrz
     renderDress() w games.js) - zbedne teraz, kradlo wysokosc awatarowi. */
  padding: 12px !important;
  overflow: hidden !important;
}
body.games-page-v9 .y9-princess-avatar {
  width: min(215px, 74%) !important;
  aspect-ratio: 0.58 / 1 !important;
  margin: 8px auto 8px !important;
}
body.games-page-v9 .y9-princess-base {
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
body.games-page-v9 .y9-princess-piece {
  position: absolute;
  display: block;
  height: auto !important;
  max-width: none;
  object-fit: contain;
  pointer-events: none;
}
/* general center anchoring for wearable pieces */
body.games-page-v9 .y9-layer-top,
body.games-page-v9 .y9-layer-bottom,
body.games-page-v9 .y9-layer-dress,
body.games-page-v9 .y9-layer-head,
body.games-page-v9 .y9-layer-shoes,
body.games-page-v9 .y9-layer-accessory.kind-necklace,
body.games-page-v9 .y9-layer-accessory.kind-scarf,
body.games-page-v9 .y9-layer-cape {
  transform: translateX(-50%);
}
body.games-page-v9 .y9-layer-cape { left: 50% !important; top: 35% !important; width: 66% !important; z-index: 1 !important; }
body.games-page-v9 .y9-layer-top { left: 50% !important; top: 40.5% !important; width: 45% !important; z-index: 3 !important; }
body.games-page-v9 .y9-layer-top.item-purple_hoodie { top: 39.5% !important; width: 43% !important; }
body.games-page-v9 .y9-layer-top.item-teal_tunic { top: 39.5% !important; width: 44% !important; }
body.games-page-v9 .y9-layer-bottom { left: 50% !important; top: 55.5% !important; width: 42% !important; z-index: 3 !important; }
body.games-page-v9 .y9-layer-bottom.kind-pants { top: 55.5% !important; width: 40% !important; }
body.games-page-v9 .y9-layer-bottom.kind-shorts { top: 56% !important; width: 37% !important; }
body.games-page-v9 .y9-layer-dress { left: 50% !important; top: 39% !important; width: 52% !important; z-index: 3 !important; }
body.games-page-v9 .y9-layer-dress.item-blue_party_dress { top: 40% !important; width: 50% !important; }
body.games-page-v9 .y9-layer-dress.item-red_dress { top: 39.5% !important; width: 52% !important; }
body.games-page-v9 .y9-layer-dress.item-yellow_summer_dress { top: 39% !important; width: 49% !important; }
body.games-page-v9 .y9-layer-dress.item-mint_star_dress { top: 39.5% !important; width: 51% !important; }
body.games-page-v9 .y9-layer-dress.item-purple_dress { top: 39.2% !important; width: 51% !important; }
body.games-page-v9 .y9-layer-dress.item-pink_princess_dress { top: 39.5% !important; width: 52% !important; }
body.games-page-v9 .y9-layer-shoes { left: 50% !important; top: 84.4% !important; width: 25% !important; z-index: 4 !important; }
body.games-page-v9 .y9-layer-shoes.item-blue_boots { top: 82.8% !important; width: 24% !important; }
body.games-page-v9 .y9-layer-shoes.item-pink_trainers { top: 84.2% !important; width: 24% !important; }
body.games-page-v9 .y9-layer-shoes.item-ruby_shoes { top: 84.5% !important; width: 22% !important; }
body.games-page-v9 .y9-layer-shoes.item-golden_slippers { top: 84.6% !important; width: 21% !important; }
body.games-page-v9 .y9-layer-head { left: 50% !important; top: 3.5% !important; width: 26% !important; z-index: 5 !important; }
body.games-page-v9 .y9-layer-head.kind-bow { top: 12% !important; width: 21% !important; }
body.games-page-v9 .y9-layer-head.kind-headband { top: 14.8% !important; width: 29% !important; }
body.games-page-v9 .y9-layer-head.kind-hat { top: 2% !important; width: 33% !important; }
body.games-page-v9 .y9-layer-accessory.kind-bag { left: 63% !important; top: 62.5% !important; width: 13% !important; z-index: 4 !important; }
body.games-page-v9 .y9-layer-accessory.kind-necklace { left: 50% !important; top: 45.4% !important; width: 16% !important; z-index: 5 !important; }
body.games-page-v9 .y9-layer-accessory.kind-scarf { left: 50% !important; top: 43% !important; width: 29% !important; z-index: 5 !important; }

body.games-page-v9 .y9-dress-grid {
  max-height: clamp(440px, 55vh, 660px) !important;
  overflow-y: auto !important;
  /* Zapas, zeby ostatni rzad kafelkow nie stykal sie z zaokraglonym dolnym
     rogiem .y9-game-board (wygladalo to jak lekkie "obciecie" rogow kart). */
  padding-bottom: 10px !important;
  margin-bottom: 6px !important;
}
body.games-page-v9 .y9-dress-card {
  /* 180px/104px obrazek dawaly scroll na siatce 3x3 (budzet .y9-dress-grid to
     clamp(440px,55vh,660px), a 3x180+2xgap ~564px > 440px). Zmniejszone tak,
     zeby 3 rzedy + 2 odstepy (3x128+2x14=412px) zawsze zmiescily sie ponizej
     nawet dolnej granicy tego clamp(). */
  min-height: 128px !important;
}
body.games-page-v9 .y9-dress-card-img {
  width: 84px !important;
  height: 84px !important;
  margin: 0 auto !important;
}

@media (max-width: 1150px) {
  body.games-page-v9 .y9-dress-stage {
    grid-template-columns: 1fr !important;
  }
  body.games-page-v9 .y9-princess-zone {
    min-height: 500px !important;
    padding-bottom: 32px !important;
  }
  body.games-page-v9 .y9-dress-grid {
    max-height: none !important;
    overflow: visible !important;
  }
}

/* ===== Zakladki menu: Gry ogolne / Twoje minigry ===== */
.y9-menu-tabs { display: flex; justify-content: flex-end; gap: 10px; margin: 6px 4px 16px; flex-wrap: wrap; }
.y9-menu-tab {
  border-radius: 999px;
  border: 3px solid rgba(171,109,70,.35);
  background: #fff6e8;
  color: #9a5636;
  font-family: 'Baloo 2','Nunito',Arial,sans-serif;
  font-weight: 800;
  font-size: clamp(13px, 1.3vw, 16px);
  padding: 8px 22px;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(171,109,70,.25);
}
.y9-menu-tab:hover { transform: translateY(-1px); filter: brightness(1.03); }
.y9-menu-tab.is-active { background: #ffd270; color: #7a4a1e; border-color: #d79b42; box-shadow: 0 4px 0 #b97f2e; }
@media (max-width: 560px) {
  .y9-menu-tabs { justify-content: center; }
  .y9-menu-tab { font-size: 13px; padding: 7px 16px; }
}

/* ===== Gra prywatna: Konik ===== */
/* Ten board dostaje własne przewijanie w pionie - zabezpieczenie na bardzo niskich
   ekranach, gdzie nawet po zmniejszeniu grafiki i wyborów całość by się nie zmieściła. */
body.games-page-v9 .y9-game-board.y9-horse-board {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 4px;
}
.y9-horse-stage { display: flex; justify-content: center; margin: 2px 0 8px; }
.y9-horse-svg { width: clamp(100px, 20vh, 220px); height: auto; flex: none; filter: drop-shadow(0 6px 8px rgba(90,59,37,.18)); }
.y9-horse-choices { display: grid; grid-template-columns: 1fr; gap: 8px; max-width: 620px; margin: 0 auto; width: 100%; }
.y9-horse-choice {
  display: flex;
  align-items: center;
  width: 100%;
  text-align: left;
  border-radius: 14px;
  border: 3px solid #d9a066;
  background: #fff8ec;
  color: #6b3d1f;
  font-family: 'Baloo 2','Nunito',Arial,sans-serif;
  font-weight: 800;
  font-size: clamp(12.5px, 1.3vw, 17px);
  line-height: 1.15;
  padding: 8px 14px;
  box-shadow: 0 4px 0 #a9743f;
  cursor: pointer;
}
.y9-horse-choice:hover { transform: translateY(-2px); filter: brightness(1.03); }
.y9-horse-choice.is-good { animation: y9Good .55s ease both; border-color: #5bbf5e; background: #eafff0; color: #2c7a30; }
.y9-horse-choice.is-bad { animation: y9Bad .4s ease both; border-color: #e2635f; background: #fff0ee; color: #a3372f; }
@media (min-width: 640px) {
  .y9-horse-choices { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .y9-horse-choice { font-size: 13px !important; padding: 8px 12px !important; }
  .y9-horse-svg { width: clamp(90px, 16vh, 170px) !important; }
}

.y9-waiting {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 160px;
  padding: 24px;
  font-family: 'Baloo 2','Nunito',Arial,sans-serif;
  font-weight: 700;
  font-size: clamp(15px, 1.6vw, 19px);
  color: #6b3d1f;
  opacity: .85;
}

/* ===== YA-PRINCESS-V4-START ===== */
/* Nowy zestaw grafik (laleczka_warstwy_ubrane_v4): wszystkie PNG maja wspolne,
   spasowane plotno, wiec kazda warstwa lezy na calym kadrze. Stare reguly
   pozycjonowaly kazdy element osobno (left/top/width per sukienka!), czesto z
   !important i specyficznoscia (0,3,1) - dlatego celujemy w `img[class]` wewnatrz
   awatara, co daje (0,3,2)/(0,4,2) i pewnie je pokrywa.
   Kolejnosc wg README_LAYER_ORDER.txt: za lalka -> baza -> niskie buty -> spodnie
   -> gora/sukienka -> wysokie kozaki -> akcesoria przod -> nakrycie glowy. */
body.games-page-v9 .y9-princess-avatar img[class],
.minigry-mount .y9-princess-avatar img[class] {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  transform: none !important;
}
body.games-page-v9 .y9-princess-avatar img[class].y9-princess-behind,
.minigry-mount .y9-princess-avatar img[class].y9-princess-behind { z-index: 1 !important; }
body.games-page-v9 .y9-princess-avatar img[class].y9-princess-base,
.minigry-mount .y9-princess-avatar img[class].y9-princess-base { z-index: 2 !important; }
body.games-page-v9 .y9-princess-avatar img[class].y9-layer-shoes,
.minigry-mount .y9-princess-avatar img[class].y9-layer-shoes { z-index: 3 !important; }
body.games-page-v9 .y9-princess-avatar img[class].y9-layer-bottom,
.minigry-mount .y9-princess-avatar img[class].y9-layer-bottom { z-index: 4 !important; }
body.games-page-v9 .y9-princess-avatar img[class].y9-layer-top,
body.games-page-v9 .y9-princess-avatar img[class].y9-layer-dress,
.minigry-mount .y9-princess-avatar img[class].y9-layer-top,
.minigry-mount .y9-princess-avatar img[class].y9-layer-dress { z-index: 5 !important; }
/* Wyjatek "wysokie kozaki NA spodnie" usuniety na wyrazna prosbe - buty maja
   byc POD innymi ubrankami jak reszta obuwia (z-index:3, jak .y9-layer-shoes
   ogolnie, ponizej .y9-layer-bottom:4). */
body.games-page-v9 .y9-princess-avatar img[class].y9-layer-accessory,
.minigry-mount .y9-princess-avatar img[class].y9-layer-accessory { z-index: 7 !important; }
body.games-page-v9 .y9-princess-avatar img[class].y9-layer-head,
.minigry-mount .y9-princess-avatar img[class].y9-layer-head { z-index: 8 !important; }
/* ===== YA-PRINCESS-V4-END ===== */

/* ===== Wyjatek: yellow_cardigan (2026-09-06) =====
   Ten konkretny PNG ma rekawy narysowane szerzej/inaczej niz reka doll pod
   spodem (widac to na zlozeniu z base.png - rece "wystaja" pod dziwnym
   katem) - wada samego zasobu graficznego, nie da sie tego naprawic samym
   pozycjonowaniem w ramach uniwersalnego systemu V4 (kazdy inny top ma
   rekaw dopasowany 1:1 do pozy laleczki, ten nie). Na prosbe: zwezamy w
   poziomie i lekko przesuwamy w dol jako doraznie lepsze dopasowanie -
   transform nie koliduje z regulami V4 powyzej (one ustawiaja tylko
   position/left/top/width/height/object-fit, nie transform), wiec dziala
   niezaleznie od kolejnosci w pliku o ile selektor ma wyzsza specyficznosc
   niz `img[class]` sam w sobie (stad powtorzenie klasy .item-... tutaj). */
body.games-page-v9 .y9-princess-avatar img[class].item-yellow_cardigan,
.minigry-mount .y9-princess-avatar img[class].item-yellow_cardigan {
  transform: scaleX(0.85) translateY(3%) !important;
}

/* ===== YA-PANEL-WIDTH-START ===== */
/* gry.css liczy szerokosc wierszy jako `min(1180px, calc(100% - 300px))` (a w
   niektorych breakpointach -360/-390/-420px). Te sztywne odjecia rezerwuja
   miejsce na dekoracyjne postacie po bokach szerokiej strony /gry. W panelu
   Minigry (~930 jednostek) zjadaja prawie cala szerokosc: zmierzone 194 px
   planszy przy 754 px dostepnego toru siatki - stad ciasne, ucinajace sie
   kafelki menu. Tutaj zamieniamy stale odjecie na margines PROPORCJONALNY,
   ktory skaluje sie razem z panelem. /gry pozostaje nietkniete. */
.minigry-mount .y9-hud,
.minigry-mount .y9-board-wrap,
.minigry-mount .y9-menu-board,
.minigry-mount .y9-bottom {
  width: min(1180px, 94%) !important;
  max-width: 94% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* ===== YA-PANEL-WIDTH-END ===== */

/* ===== YA-PANEL-FIT-START ===== */
/* Plansze mialy z /gry sztywne limity dobrane do pelnego ekranu:
   `.y9-game-board { max-height: 535px }` oraz `min-height` na elementach w srodku
   (`.y9-balloon-field: 480px`, stage przebieranki). W panelu tresc byla przez to
   ucinana (colors: 638 przy 531, dress: 818 przy 654) i - co wazne - ZMNIEJSZANIE
   skali tego nie naprawialo, bo limity sa w px i nie skaluja sie razem z ukladem.
   Zdejmujemy je tutaj; plansza bierze wysokosc swojego wiersza, a `fitMinigryScale()`
   dobiera skale tak, zeby tresc rzeczywiscie sie zmiescila. */
.minigry-mount .y9-game-board,
.minigry-mount .y9-menu-board {
  max-height: none !important;
  min-height: 0 !important;
  height: 100% !important;
}
.minigry-mount .y9-balloon-field,
.minigry-mount .y9-dress-stage,
.minigry-mount .y9-dress-grid,
.minigry-mount .y9-princess-zone {
  min-height: 0 !important;
}
/* ===== YA-PANEL-FIT-END ===== */

/* ===== Zabka w grze "Nakarm zabke": usunieta miska (przeniesiona z markupu w
   games.js, podpis "Kliknij wlasciwe jedzenie" zostaje), zabka wieksza - ma
   wypelniac praktycznie cale pole .y9-frog-zone, nie plywac mala wysepka w
   srodku. Dotyczy i /gry (body.games-page-v9) i osadzonego panelu /spotkanie
   (.minigry-mount). */
body.games-page-v9 .y9-feed-frog-shell,
.minigry-mount .y9-feed-frog-shell {
  width: 92% !important;
  height: 92% !important;
  max-width: none !important;
  aspect-ratio: auto !important;
}
body.games-page-v9 .y9-feed-frog-image,
.minigry-mount .y9-feed-frog-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* ===== Moj konik: wybor rasy / nadanie imienia / opieka (2026-09-04).
   Celowo elastyczne jednostki (flex/%, bez sztywnych px na kontenerach) -
   dziala jednakowo na pelnym /gry i w przeskalowanym (CSS `zoom`) panelu
   /spotkanie, bez potrzeby osobnych .minigry-mount overrides. */
.y9-horse-select-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  overflow-y: auto;
  max-height: 100%;
  width: 100%;
}
.y9-horse-select-card {
  appearance: none;
  border: 3px solid rgba(171, 109, 70, .35);
  border-radius: 18px;
  background: linear-gradient(180deg, #fffefb, #fff3e6);
  padding: 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  box-shadow: 0 4px 0 rgba(171, 109, 70, .2);
  transition: transform .15s ease;
}
.y9-horse-select-card:hover { transform: translateY(-2px); }
.y9-horse-select-card img { width: 100%; max-width: 120px; height: auto; object-fit: contain; }
.y9-horse-select-card small { font-size: 11px; font-weight: 800; color: #6b382b; text-align: center; line-height: 1.2; }

.y9-horse-name-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px;
  height: 100%;
}
.y9-horse-name-stage img { width: min(220px, 55%); height: auto; }
.y9-horse-name-stage input {
  width: min(320px, 90%);
  min-height: 46px;
  border-radius: 16px;
  border: 3px solid #8dccff;
  background: #fff;
  padding: 0 16px;
  font-family: inherit;
  font-size: 17px;
  font-weight: 800;
  text-align: center;
}

.y9-horse-care-stage {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  gap: 16px;
  align-items: stretch;
  overflow: visible;
}
.y9-horse-care-visual {
  flex: 1 1 40%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  overflow: visible;
  /* Mały zapas ze wszystkich stron, zeby grzywa/kopyta nigdy nie dotykaly
     dokladnie krawedzi swojej strefy (wyglada wtedy jak "przyciete" nawet
     gdy technicznie nic nie jest obciete). */
  padding: 14px;
  box-sizing: border-box;
}
.y9-horse-care-visual img { width: 100%; max-width: 300px; height: auto; object-fit: contain; }
.y9-horse-care-panel {
  flex: 1 1 55%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  /* NIE centrujemy w pionie: gdy panel (statystyki+akcje+prompt) jest wyzszy
     niz jego wlasny box (waskie okno /spotkanie, .y9-horse-care-stage w kolumnie),
     `justify-content:center` rozlewa dzieci SYMETRYCZNIE poza box (i gora, i dol) -
     to wlasnie wywolywalo nachodzenie "Clean" na statusPill nad nim. */
  justify-content: flex-start;
  overflow-y: auto;
  /* Domyslny (systemowy) scrollbar wyglada tu obco na tle reszty strony -
     ten sam styl "cienki + kolorowy kciuk" co gdzie indziej w tej grze
     (np. .y9-dress-grid, .y9-track). */
  scrollbar-width: thin;
  scrollbar-color: #b98fe6 rgba(255, 255, 255, .5);
}
.y9-horse-care-panel::-webkit-scrollbar { width: 8px; }
.y9-horse-care-panel::-webkit-scrollbar-track { background: rgba(255, 255, 255, .4); border-radius: 999px; }
.y9-horse-care-panel::-webkit-scrollbar-thumb { background: #b98fe6; border-radius: 999px; }
.y9-horse-stat { display: flex; align-items: center; gap: 8px; }
.y9-horse-stat-label { flex: 0 0 auto; font-weight: 800; font-size: 13px; color: #6b382b; min-width: 90px; }
.y9-horse-stat-track { flex: 1 1 auto; height: 14px; border-radius: 999px; background: rgba(0, 0, 0, .08); overflow: hidden; }
.y9-horse-stat-fill { height: 100%; background: linear-gradient(90deg, #7ee269, #4fb84f); border-radius: 999px; transition: width .3s ease; }
.y9-horse-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.y9-horse-action {
  flex: 1 1 auto;
  appearance: none;
  border: 3px solid rgba(141, 204, 255, .6);
  border-radius: 14px;
  background: linear-gradient(180deg, #fff, #eef7ff);
  padding: 10px 8px;
  font-weight: 900;
  font-size: 13px;
  cursor: pointer;
  color: #2b5a82;
  transition: transform .15s ease;
}
.y9-horse-action:disabled { opacity: .5; cursor: not-allowed; }
.y9-horse-action:hover:not(:disabled) { transform: translateY(-1px); }

.y9-horse-prompt {
  margin-top: 10px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .7);
  border: 2px dashed rgba(171, 109, 70, .35);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.y9-horse-prompt p { margin: 0; font-weight: 800; color: #6b382b; }
.y9-horse-prompt-word { font-size: 22px; font-weight: 1000; letter-spacing: .1em; color: #855032; }
.y9-horse-prompt input {
  width: min(260px, 90%);
  min-height: 42px;
  border-radius: 14px;
  border: 3px solid #8dccff;
  background: #fff;
  padding: 0 14px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  text-align: center;
}
.y9-horse-prompt-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

@media (max-width: 900px) {
  .y9-horse-select-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .y9-horse-care-stage { flex-direction: column; }
}

/* ===== Moj konik - dwujezyczny UI + zdanie-nagroda po udanej akcji (2026-09-04) ===== */
.y9-horse-select-card em,
.y9-horse-stat-label em,
.y9-horse-action em {
  font-style: normal;
  font-weight: 700;
  opacity: .62;
  font-size: .82em;
}
.y9-horse-select-card small { display: block; }
.y9-horse-sentence {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(126, 226, 105, .16);
  border: 2px dashed rgba(126, 226, 105, .5);
  font-weight: 800;
  font-size: 13px;
  color: #2e6b1f;
  text-align: center;
  line-height: 1.35;
  min-height: 20px;
}
.y9-horse-sentence:empty { display: none; }
.y9-horse-sentence em { font-style: normal; opacity: .72; }

/* ===== Wyscig z przeszkodami (Moj konik) - wybor tematu + tor (2026-09-04) ===== */
/* Wash/Feed/Play maja flex:1 1 AUTO (baza = szerokosc tekstu) - trzy razem
   czesto byly SZERSZE niz rzad, wiec trzeci ("Play with the horse") zawijal
   sie do kolejnego rzedu i tam "zabieral" miejsce, ktore mialo byc na Race+Dino
   w parze. Jawny flex-basis gwarantuje, ze te trzy ZAWSZE trzymaja sie w
   jednym rzedzie (tekst w przycisku moze sam zawinac sie na 2 linie, to ok). */
.y9-horse-action[data-horse-action] {
  flex: 1 1 calc(33.333% - 6px);
}
/* Obok Sprint Run (nie w calej szerokosci) - dwa pelnowidokowe rzedy zamiast
   trzech zabieraly za duzo wysokosci, wymuszajac scroll na planszy opieki. */
.y9-horse-action-race {
  flex: 1 1 calc(50% - 4px);
  background: linear-gradient(180deg, #fff6e0, #ffe4a3);
  border-color: rgba(255, 180, 60, .6);
  color: #7a4a1e;
}
.y9-horse-action-learn {
  flex: 1 1 100%;
  background: linear-gradient(180deg, #f0e6ff, #dcc7ff);
  border-color: rgba(154, 92, 219, .55);
  color: #5b3592;
}
.y9-horse-action-stable {
  flex: 1 1 100%;
  background: linear-gradient(180deg, #e0f5e9, #b9e6cc);
  border-color: rgba(60, 168, 111, .55);
  color: #1f6b45;
}

/* ===== Stajnia: wiele koników naraz (2026-09-05) ===== */
.y9-horse-stable-board { overflow-y: auto !important; }
.y9-horse-stable-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.y9-horse-stable-card {
  appearance: none;
  border: 3px solid rgba(154, 92, 219, .35);
  border-radius: 16px;
  background: #fff;
  padding: 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}
.y9-horse-stable-card:hover { transform: translateY(-2px); }
.y9-horse-stable-card.is-active { border-color: #3ca86f; background: #f0fbf4; box-shadow: 0 0 0 3px rgba(60, 168, 111, .25); }
.y9-horse-stable-card img { width: 80px; height: 80px; object-fit: contain; }
.y9-horse-stable-card strong { font-size: 13px; color: #6b382b; }
.y9-horse-stable-card small { font-size: 10px; color: #a17a5c; }
.y9-horse-stable-mini { font-size: 10px; font-weight: 800; }
.y9-horse-stable-ribbons { font-size: 11px; font-weight: 900; color: #b97f2e; }
.y9-horse-stable-add {
  justify-content: center;
  border-style: dashed;
  background: rgba(255, 255, 255, .5);
  color: #8a6fb0;
}
.y9-horse-stable-add-icon { font-size: 28px; }
.y9-horse-theme-grid {
  display: grid;
  /* 3 kolumny (nie 2) - z wiecej kategoriami wyscigow 2 kolumny robily za
     dlugi, przewijany slupek; nizsze kafelki (patrz padding/font-size nizej)
     + 3 kolumny mieszcza wszystkie kategorie bez scrolla. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
  /* Odstep od przycisku "Back" nad siatka (ten stoi w normalnym przepływie
     na tej planszy, margin-bottom:0 - bez tego siatka zaczynala sie od razu
     pod przyciskiem). */
  margin-top: 10px;
}
.y9-horse-theme-card {
  appearance: none;
  border: 3px solid rgba(171, 109, 70, .35);
  border-radius: 14px;
  background: linear-gradient(180deg, #fffefb, #fff3e6);
  /* Jeszcze nizsze (11 kategorii teraz = 4 rzedy w 3 kolumnach) - padding/
     icon/font ponownie obniżone, zeby caly zestaw zmiescil sie bez scrolla. */
  padding: 5px 4px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  transition: transform .15s ease;
}
.y9-horse-theme-card:hover { transform: translateY(-2px); }
.y9-horse-theme-card .y9-icon { font-size: 18px; }
.y9-horse-theme-card strong { font-weight: 900; color: #6b382b; font-size: 12px; }
.y9-horse-theme-card em { font-style: normal; opacity: .65; font-size: .85em; }
.y9-horse-race-back, .y9-horse-learn-back-fab {
  /* JEDNA regula dla WSZYSTKICH przyciskow "Back" w grze z konikiem (stajnia,
     wybor tematu wyscigu, siatka Poznaj konie, plansza szczegolowa Poznaj
     konie) - musi byc identyczna, inaczej kazdy przycisk ma inny odstep od
     karty tytulu i "skacze" w pionie miedzy ekranami. Bezposrednie dziecko
     flex-column .y9-game-board (domyslne align-items:stretch) rozciagaloby
     ten przycisk na cala szerokosc plansz, mimo ze .y9-small ma
     display:inline-flex - align-self:flex-start to naprawia. */
  align-self: flex-start !important;
  display: inline-flex;
  margin: 4px 0 0 !important;
  font-size: 13px !important;
  padding: 8px 16px !important;
}
/* Plansza szczegolowa "Poznaj konie": przycisk floatuje NAD gornym-lewym
   rogiem obrazka (position:absolute, top/left ustawiane w JS przez
   fitHorseLearnStage()) - obrazek zaczyna sie od tej samej linii co gorna
   krawedz przycisku, zamiast zostawiac pod przyciskiem caly osobny wiersz.
   Odzyskana w ten sposob wysokosc idzie na wieksze (szersze) zdjecie. */
.y9-horse-learn-board-detail { position: relative; }
.y9-horse-learn-board-detail .y9-horse-learn-back-fab {
  position: absolute;
  z-index: 5;
  margin: 0 !important;
}
/* "Sama linia z kafelkami" dziala dobrze na siatce Poznaj konie / wybor rasy
   (krotki, jednolinijkowy tekst karty tytulu, stala wysokosc). Na wyborze
   tematu wyscigu tekst karty jest dluzszy/dwulinijkowy i zmienny (dlugosc
   imienia konika) - floatujacy przycisk nachodzil na karte/kafelki przy
   dluzszym tekscie. Ta plansza wraca wiec do normalnego przeplywu (przycisk
   w swoim wierszu nad siatka, patrz wspolna regula .y9-horse-race-back
   wyzej) - NIE dodajemy jej do selektorow position:absolute nizej. */
.y9-horse-learn-board, .y9-horse-select-board { position: relative; }
.y9-horse-learn-board .y9-horse-race-back {
  position: absolute;
  z-index: 5;
  margin: 0 !important;
}
/* Wybor rasy: przycisk "Back to stable" NIE floatuje juz nad karta - na /gry
   siedzi w prawym-dolnym rogu CALEGO okna planszy (position:absolute wzgledem
   .y9-horse-select-board, ktora ma juz position:relative wyzej). Na /spotkanie
   (mountGameInto, patrz .y9-horse-select-back-cell nizej) jest zamiast tego
   OSTATNIM elementem samej siatki ras - w normalnym przeplywie, grid
   auto-placement sam wsadza go w pusta komorke po nieparzystej liczbie ras. */
.y9-horse-select-back-corner,
.y9-horse-select-back-cell {
  /* Ta sama "mala" wersja przycisku co reszta gry (.y9-small samo w sobie ma
     duzy domyslny rozmiar - padding:12px 18px, font-size:17px) - odziedziczone
     wczesniej przez wspolna klase .y9-horse-race-back, ktora te dwa nowe
     warianty juz nie uzywaja. */
  font-size: 13px !important;
  padding: 8px 16px !important;
  margin: 0 !important;
}
.y9-horse-select-back-corner {
  position: absolute;
  bottom: 14px;
  right: 14px;
  z-index: 5;
}
.y9-horse-select-back-cell {
  align-self: center;
  justify-self: center;
}
/* Plansze konika (opieka/wyscig/wybor tematu/nazywanie) czesto maja wiecej
   tresci (obrazek+staty+akcje+prompt, albo tor+prompt) niz bazowy .y9-game-board
   clamp(...) ma miejsca - obcinalo to dolna czesc (przyciski Hint/Check).
   Wiecej miejsca + scroll jako siatka bezpieczenstwa zamiast twardego ucinania. */
/* body.games-page-v9 .y9-game-board (gdzies wyzej w tym pliku, kilka wersji)
   ma WYZSZA SPECYFICZNOSC (klasa body-elementu + .y9-game-board = 0-2-1) niz
   sam .y9-horse-*-board (0-1-0) - wygrywala niezaleznie od tego, czy ta
   regula fizycznie siedzi PONIZEJ w pliku. Trzeba dopasowac specyficznosc
   (dodac body.games-page-v9), zeby faktycznie wygrac przez kolejnosc. */
/* WAZNE: NIE zmieniamy tu wysokosci/rozmiaru samego okna planszy (height/
   max-height) - to musi zostac takie samo jak dla kazdej innej gry (ten sam
   clamp() co zawsze). Zmieniamy TYLKO to, co jest W TYM oknie (obrazki, siatki,
   fonty - nizej w tym pliku), zeby zmiescilo sie w NIEZMIENIONYM oknie. Tu
   naprawiamy jedynie prawdziwy, odrebny blad: overflow-x zostawal "hidden" z
   bazowej .y9-game-board (skrot "overflow:hidden" ustawia OBIE osie), mimo
   ze inna regula ustawiala overflow-y:auto - overflow-y samo nie dotyka
   overflow-x, stad realne przycinanie W POZIOMIE. */
body.games-page-v9 .y9-horse-care-board, body.games-page-v9 .y9-horse-race-board,
body.games-page-v9 .y9-horse-race-themes-board, body.games-page-v9 .y9-horse-select-board,
body.games-page-v9 .y9-horse-name-board, body.games-page-v9 .y9-horse-learn-board,
body.games-page-v9 .y9-horse-stable-board, body.games-page-v9 .y9-horse-dino-board {
  overflow-x: visible !important;
  overflow-y: auto !important;
  scrollbar-width: thin;
  scrollbar-color: #ffc34f rgba(255, 255, 255, .55);
}
.y9-horse-care-board::-webkit-scrollbar, .y9-horse-race-board::-webkit-scrollbar, .y9-horse-race-themes-board::-webkit-scrollbar,
.y9-horse-select-board::-webkit-scrollbar, .y9-horse-name-board::-webkit-scrollbar, .y9-horse-learn-board::-webkit-scrollbar, .y9-horse-stable-board::-webkit-scrollbar { width: 8px; }
.y9-horse-care-board::-webkit-scrollbar-thumb, .y9-horse-race-board::-webkit-scrollbar-thumb, .y9-horse-race-themes-board::-webkit-scrollbar-thumb,
.y9-horse-select-board::-webkit-scrollbar-thumb, .y9-horse-name-board::-webkit-scrollbar-thumb, .y9-horse-learn-board::-webkit-scrollbar-thumb, .y9-horse-stable-board::-webkit-scrollbar-thumb { background: #ffc34f; border-radius: 999px; }
.y9-horse-race-track {
  position: relative;
  width: 100%;
  /* Bez znacznikow przeszkod tor juz nie potrzebuje wysokiego pasa na ich
     ikonki - nizszy tor = mniej scrollowania na niskich oknach (720px itp).
     Zmniejszone z 125 - to i kompaktowe .y9-horse-prompt nizej pozwolily
     usunac scroll calkowicie na wyscigu z przeszkodami (bez ruszania
     wielkosci samego okna planszy - patrz komentarz przy .y9-horse-race-back). */
  min-height: 90px;
  border-radius: 18px;
  /* Proste CSS "tlo" (bez nowych grafik) zamiast plaskiego, pustego gradientu:
     pasek nieba/trawy w gorze + ubity piaskowy tor w dole + delikatne linie
     "grabek" na piasku (repeating-linear-gradient), zeby tor nie wygladal na
     goly/pusty. */
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .35) 0 2px, transparent 2px 26px),
    linear-gradient(180deg, #eaf7d8 0%, #d9efb8 46%, #d1a86b 46%, #c99a56 100%);
  border: 2px dashed rgba(126, 226, 105, .4);
  padding: 6px;
  margin-bottom: 2px;
  /* overflow:hidden tutaj obcinalo koniki wiekszych ras (np. duzy kon pociagowy)
     przy wyzszym skoku/wiekszym naturalnym rozmiarze klatki - lepiej niech
     rzadko lekko wystaje niz regularnie ucina glowe/kopyta. */
  overflow: visible;
}
body.games-page-v9 .y9-horse-race-board .y9-prompt {
  min-height: auto !important;
  padding: 5px 10px !important;
  margin-bottom: 4px !important;
}
body.games-page-v9 .y9-horse-race-board .y9-prompt h2 { font-size: 15px !important; line-height: 1.05 !important; }
body.games-page-v9 .y9-horse-race-board .y9-prompt p { font-size: 10px !important; line-height: 1.1 !important; }
body.games-page-v9 .y9-horse-race-board .y9-pill { margin-bottom: 20px !important; }
body.games-page-v9 .y9-horse-race-board .y9-horse-prompt {
  margin-top: 2px !important;
  padding: 4px 8px !important;
  gap: 2px !important;
}
body.games-page-v9 .y9-horse-race-board .y9-horse-prompt-icon { font-size: 22px !important; margin-bottom: 0 !important; }
body.games-page-v9 .y9-horse-race-board .y9-horse-prompt input { min-height: 32px !important; }
.y9-horse-race-runner {
  position: absolute;
  bottom: 8px;
  /* Zmniejszone z 145 - przy nizszym torze (patrz .y9-horse-race-track) obrazek
     konia (aspect ~4:3) wystawal ~45px NAD gorna krawedz toru (overflow:visible
     to pozwala) i naklejal sie na pole "Obstacle X/Y" nad torem. Wezszy obrazek
     = mniejsza wysokosc = mniejszy zasieg wystawania. */
  width: 125px;
  overflow: visible;
  transform: translateX(-50%);
  transition: left .5s ease;
}
.y9-horse-race-runner img { width: 100%; height: auto; object-fit: contain; display: block; }
.y9-horse-race-finish {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.y9-horse-race-finish p { font-weight: 900; color: #2e6b1f; font-size: 16px; }
/* Sprint Run po przegranej: "Run again"/"Back to horse" w JEDNEJ linii
   horyzontalnej (nie jeden pod drugim jak domyslny column layout wyzej). */
.y9-horse-dino-overlay .y9-horse-race-finish { flex-direction: row; flex-wrap: wrap; justify-content: center; }

@media (max-width: 900px) {
  .y9-horse-theme-grid { grid-template-columns: 1fr; }
}

/* ===== "Listen & spell" prompt (ikonka+glos zamiast polskiego slowa) + wiecej
   ruchu na torze wyscigu (2026-09-04, druga runda poprawek) ===== */
.y9-horse-prompt-icon {
  font-size: 48px;
  line-height: 1;
  margin-bottom: 2px;
}
.y9-horse-replay {
  appearance: none;
  border: 2px solid rgba(141, 204, 255, .6);
  border-radius: 999px;
  background: #fff;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 800;
  color: #2b5a82;
  cursor: pointer;
  margin-bottom: 4px;
}
.y9-horse-replay:hover { background: #eef7ff; }

/* scaleX(-1) MUSI byc czescia keyframes, nie osobna regula na .y9-horse-race-runner
   img (transform) - animacja na tym samym elemencie i tej samej wlasciwosci
   (transform) ZAWSZE wygrywa z jakakolwiek statyczna deklaracja transform,
   niezaleznie od specyficznosci/kolejnosci - dlatego koniki w wyscigu wciaz
   biegly "w lewo" mimo istniejacej reguly scaleX(-1) nizej w tym pliku. */
@keyframes y9HorseBounce {
  0%, 100% { transform: scaleX(-1) translateY(0); }
  50% { transform: scaleX(-1) translateY(-6px); }
}
.y9-horse-race-runner-bounce img { animation: y9HorseBounce 1.1s ease-in-out infinite; }

/* Znaczniki przeszkod (zolte/zielone slupki) usuniete z pola biegu per explicit
   prosba - tor ma pokazywac TYLKO konika. "Potrzasniecie" przy zlej odpowiedzi
   przeniesione wiec na samego konika (.y9-horse-race-runner) zamiast na (juz
   nieistniejacy) znacznik przeszkody. translateX(-50%) MUSI byc czescia tych
   keyframes (ten sam powod co scaleX(-1) w y9HorseBounce wyzej) - .y9-horse-race-runner
   ma to jako STATYCZNY transform do centrowania na pozycji "left:%".*/
@keyframes y9HorseShake {
  0%, 100% { transform: translateX(-50%) rotate(0); }
  20% { transform: translateX(calc(-50% - 4px)) rotate(-6deg); }
  40% { transform: translateX(calc(-50% + 4px)) rotate(6deg); }
  60% { transform: translateX(calc(-50% - 3px)) rotate(-4deg); }
  80% { transform: translateX(calc(-50% + 3px)) rotate(4deg); }
}
.y9-horse-race-runner.is-shake { animation: y9HorseShake .5s ease; }

@keyframes y9HorsePoof {
  0% { opacity: 0; transform: translate(-50%, 0) scale(.6); }
  40% { opacity: 1; transform: translate(-50%, -14px) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -28px) scale(1.3); }
}
.y9-horse-race-poof {
  position: absolute;
  left: 50%;
  top: -6px;
  font-size: 24px;
  pointer-events: none;
  animation: y9HorsePoof .9s ease-out forwards;
}

/* ===== Zabezpieczenie: statusPill w Moim koniku moze byc dluzszy niz zwykle
   (imie konika jest dowolne, dziecko moze wpisac cos dlugiego) - bazowe
   .y9-pill { width:max-content } bez max-width potrafi wtedy wystawac poza
   wlasne tlo i nachodzic na elementy pod spodem. Wlasny, wezszy wariant tylko
   dla plansz Moj konik. ===== */
.y9-horse-care-board .y9-pill,
.y9-horse-race-board .y9-pill {
  width: min(94%, 460px) !important;
  white-space: normal !important;
  line-height: 1.3 !important;
  text-align: center !important;
}
/* Koniki w paczce sa narysowane zwrocone w lewo - w wyscigu, gdzie biegna w
   PRAWO (od startu do mety), wygladaloby to jak biegniecie tylem. Odwracamy
   sam obrazek. Baza na wszelki wypadek (gdyby kiedys zniknela klasa -bounce) -
   faktyczny flip podczas animacji jest w keyframes y9HorseBounce powyzej. */
.y9-horse-race-runner img {
  transform: scaleX(-1);
  display: block;
  width: 100%;
  height: auto;
}

/* ===== Nagrody (wstazki) + brak-glosu fallback (2026-09-04, czwarta runda) ===== */
.y9-horse-ribbons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 2px 0 4px;
}
.y9-horse-ribbon {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 9px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff6e0, #ffe4a3);
  border: 2px solid rgba(255, 180, 60, .55);
  font-size: 12px;
  font-weight: 900;
  color: #7a4a1e;
}
.y9-horse-theme-card small {
  margin-top: 2px;
  font-size: 11px;
  font-weight: 900;
  color: #b97f2e;
}
/* "Poznaj konie" - dedykowany, WIEKSZY budzet wysokosci niz reszta plansz
   konika (7 kafelkow w 3 kolumnach = 3 rzedy, albo pojedyncza plansza + nawigacja
   pod nia - obie wersje realnie potrzebuja wiecej miejsca niz typowa plansza
   ze slowkiem). Jawne, duze `height` (nie tylko min-height) - wypelnia
   dostepna wysokosc .y9-world zamiast liczyc sie z zawartosci. */
/* Widok JEDNEJ planszy (nie picker-grid) ma duzo mniej konkurujacej tresci
   (tytul + obrazek + 1 maly przycisk "Back" w rogu, bez osobnego rzedu
   nawigacji) niz siatka 7 kafelkow - moze wiec byc DUZO wiekszy niz kafelki
   w pickerze, mimo ze okno (.y9-game-board) ma ten sam, niezmieniony rozmiar
   co kazda inna gra. */
/* width jest tu EXPLICIT (%, nie auto/fit-content) - to jest normalny,
   dobrze wsparty przypadek dla aspect-ratio (w przeciwienstwie do
   avatara ksiezniczki, gdzie width:auto na bloku psulo wyliczanie).
   max-height jako zabezpieczenie: gdyby przy tej szerokosci wyliczona
   wysokosc przekroczyla dostepne miejsce, aspect-ratio+max-height razem
   poprawnie dociagna szerokosc w dol, bez zgadywania w JS. */
.y9-horse-learn-stage {
  /* width:100% dawal 480px wysokosci obrazka - wiecej niz budzet planszy (~307px),
     co psulo caly rozmiar okna (192px scrolla). Szerokosc musi byc explicit
     liczba (nie auto) zeby aspect-ratio poprawnie liczylo z niej wysokosc -
     na flex-column dziecku "height:auto + width od aspect-ratio" nie dziala. */
  width: min(94%, 406px) !important;
  height: auto !important;
  aspect-ratio: 840 / 600 !important;
}
/* Rama (skorzana obwodka) jest TERAZ OSOBNYM elementem OPAKOWUJACYM stage
   (patrz renderHorseLearnBoard() w games.js), a nie wlasnoscia samego stage -
   dodanie ramki NA stage przesuwalo obrazek wzgledem hotspotow (hotspoty licza
   % do TEGO SAMEGO pudelka co obrazek; ramka "zjadala" border+padding z tego
   pudelka, obrazek byl mniejszy/wsuniety, hotspoty przestawaly pasowac do
   przedmiotow na zdjeciu). Centorwanie (margin:auto) tez przenosi sie na
   rame - to ONA ma byc na srodku planszy, nie goly stage w jej wnetrzu. */
.y9-horse-learn-frame {
  /* width:fit-content (nie inline-block) - dziecko blokowe z margin:auto
     centruje sie SAMO na podstawie wlasnej szerokosci, niezaleznie od
     text-align rodzica. inline-block wymagalby text-align:center NA
     RODZICU do centrowania, a explicit margin-left w embeddedMode
     (nizej, JS) inaczej "walczylby" o to centrowanie - fit-content+block
     jest przewidywalne w obu przypadkach. */
  display: block;
  width: fit-content;
  margin: 2px auto 0 !important;
  border: 5px solid #8a5a34;
  box-shadow: 0 0 0 3px #e8c88a inset, 0 6px 18px rgba(90, 59, 130, .18);
  background: #6b4526;
  padding: 5px;
  border-radius: 16px;
  max-width: 100%;
}
/* Regula .y9-horse-learn-back-fab przeniesiona wyzej - polaczona z
   .y9-horse-race-back w jedna wspolna regule (identyczny odstep/wyglad
   wszedzie, patrz komentarz przy .y9-horse-race-back). */
.y9-horse-learn-grid {
  margin-top: 4px !important;
}
/* Mniejsze kafelki (stale px, nie 1fr - zeby faktycznie byly male, nie
   rozciagac sie na cala szerokosc kolumny), ale czcionka WIEKSZA i bardziej
   czytelna niz wczesniej (10px/8px bylo zbyt drobne przy tak duzym obrazku -
   teraz odwrotnie, maly obrazek + wyrazny podpis). */
.y9-horse-learn-grid {
  grid-template-columns: repeat(4, minmax(0, 150px)) !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-top: 2px !important;
}
.y9-horse-learn-card { padding: 4px !important; gap: 2px !important; }
.y9-horse-learn-card img { aspect-ratio: 1/1 !important; }
.y9-horse-learn-card strong { font-size: 13px !important; line-height: 1.15 !important; margin: 0 !important; }
.y9-horse-learn-card small { font-size: 11px !important; line-height: 1.1 !important; }
.y9-horse-novoice {
  font-size: 11px;
  font-weight: 800;
  color: #a15b2e;
  background: rgba(255, 180, 60, .18);
  border-radius: 999px;
  padding: 3px 10px;
  margin-bottom: 4px;
}

/* ===== Ksiezniczka: powiekszenie awatara (2026-09-05) =====
   Wczesniejsze reguly (wyzej w tym pliku, duzo powtorzen) ustawiaja width I
   height NIEZALEZNIE (osobne clamp() na kazdej wlasciwosci) - aspect-ratio
   wtedy nie ma czego "dopelnic" i jest ignorowany, bo obie wymiary sa juz
   jawnie podane. Ta regula (ostatnia w pliku = wygrywa przy tej samej
   specyficznosci/!important) ustawia TYLKO width, height:auto - aspect-ratio
   sam wyliczy wysokosc z szerokosci, bez konfliktu. */
/* /gry: kolumna awatara (.y9-princess-zone) jest z ZALOZENIA wezsza niz kolumna
   ubranek (grid 0.8fr/1.2fr) - skalowanie przez SZEROKOSC wiec zawsze bylo
   niepotrzebnie male, bo ograniczala je waska kolumna, a strefa ma mnostwo
   wolnej WYSOKOSCI (patrz komentarz przy .y9-princess-zone nizej). Skalujemy
   wiec przez wysokosc (jak juz zrobiono w /spotkanie) - awatar moze przy tym
   odrobine wyjsc poza waska kolumne w szerz, stad overflow:visible na zonie. */
body.games-page-v9 .y9-princess-avatar {
  /* aspect-ratio + width:auto/fit-content nie dawaly spodziewanego wyniku tutaj
     (element jest dzieckiem flex .y9-princess-zone - dokladny powod niejasny,
     ale zmierzony empirycznie na zywo: mimo poprawnie zaaplikowanej reguly
     wyliczona wysokosc zostawala "przyklejona" do wartosci sprzed zmiany).
     Zamiast polegac na aspect-ratio, liczymy width WPROST z tego samego
     clamp() co height, przez calc() - dwie jawne wartosci, zero zgadywania.
     Znaczaco powiekszone (260/56vh/440 -> 320/72vh/540) na wyrazna prosbe
     "bardzo powieksz ksiezniczke". */
  height: clamp(320px, 72vh, 540px) !important;
  width: calc(clamp(320px, 72vh, 540px) * 0.58) !important;
  /* auto na wszystkich 4 stronach = w flex-column samosrodkowanie w pionie
     (i poziomie), niezaleznie od tego czy rodzic ma justify-content:center czy
     flex-start - dziala nawet jesli awatar jest odrobine za wysoki na box,
     bo wtedy nadmiar dzieli sie po równo miedzy gora i dolem, a nie caly
     "spada" na jedna strone (przez co znikala pod dolna krawedzia okna). */
  margin: auto !important;
}
body.games-page-v9 .y9-princess-zone {
  overflow: visible !important;
}

/* ===== "Poznaj konie" - plansze z hotspotami (2026-09-05) ===== */
.y9-horse-learn-board, .y9-horse-learn-board-detail {
  overflow-y: auto !important;
  scrollbar-width: thin;
  scrollbar-color: #b98fe6 rgba(255, 255, 255, .5);
}
.y9-horse-learn-board::-webkit-scrollbar, .y9-horse-learn-board-detail::-webkit-scrollbar { width: 8px; }
.y9-horse-learn-board::-webkit-scrollbar-track, .y9-horse-learn-board-detail::-webkit-scrollbar-track { background: rgba(255, 255, 255, .4); border-radius: 999px; }
.y9-horse-learn-board::-webkit-scrollbar-thumb, .y9-horse-learn-board-detail::-webkit-scrollbar-thumb { background: #b98fe6; border-radius: 999px; }
.y9-horse-learn-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 10px;
}
@media (max-width: 640px) {
  .y9-horse-learn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.y9-horse-learn-card {
  appearance: none;
  border: 3px solid rgba(154, 92, 219, .4);
  border-radius: 14px;
  background: #fff;
  padding: 6px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
}
.y9-horse-learn-card:hover { transform: translateY(-2px); border-color: rgba(154, 92, 219, .8); }
/* Male kafelki-podglady: cover (wypelnia caly kafelek, lekko przycina brzegi
   sceny) wyglada o wiele lepiej niz contain przy takim plaskim proporcjonalnie
   pudelku (contain zostawial puste pasy gora/dol - "rozciagniete dziwnie").
   Przy tak malym podgladzie lekkie przyciecie tla nie szkodzi - cala plansza
   (bez przyciecia, wszystkie hotspoty) i tak jest widoczna po kliknieciu, w
   .y9-horse-learn-stage nizej. */
/* Kwadratowe kafelki jak na glownym menu gier (jednakowy rozmiar) - cover
   przycina PNG do kwadratu (nie rozciaga go, tylko kadruje wystajace boki). */
.y9-horse-learn-card img { width: 100%; aspect-ratio: 1/1; object-fit: cover; background: #f3e9ff; border-radius: 10px; }
.y9-horse-learn-card strong { font-size: 14px; color: #5b3592; text-transform: uppercase; letter-spacing: .02em; }
.y9-horse-learn-card small { font-size: 11px; color: #8a6fb0; }

.y9-horse-learn-stage {
  position: relative;
  max-width: 100%;
  border-radius: 11px;
  /* hidden tutaj obcinal podpisy hotspotow blisko krawedzi planszy (np. "HALTER
     & LEAD ROPE" w lewym gornym rogu) - visible pozwala im wystawac poza
     plansze, obrazek i tak jest juz w dokladnym aspect-ratio (bez potrzeby
     kadrowania). Rama/border/padding/tlo przeniesione na .y9-horse-learn-frame
     (osobny element OPAKOWUJACY stage) - patrz komentarz tam. */
  overflow: visible;
}
.y9-horse-learn-img { width: 100%; height: 100%; object-fit: contain; display: block; background: #f3e9ff; border-radius: 11px; }

.y9-horse-hotspot {
  appearance: none;
  border: none;
  background: none;
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 0;
  cursor: pointer;
  z-index: 2;
}
.y9-horse-hotspot-dot {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  border: 2px solid rgba(255, 255, 255, .9);
  box-shadow: 0 0 0 rgba(255, 210, 90, .7);
  animation: y9HotspotPulse 1.8s ease-in-out infinite;
}
@keyframes y9HotspotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 210, 90, .55); }
  50% { box-shadow: 0 0 0 8px rgba(255, 210, 90, 0); }
}
.y9-horse-hotspot:hover .y9-horse-hotspot-dot,
.y9-horse-hotspot.is-open .y9-horse-hotspot-dot {
  background: rgba(255, 210, 90, .9);
  border-color: #fff;
}
.y9-horse-hotspot-tip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) scale(.85);
  background: #fff;
  color: #5b3592;
  font-weight: 900;
  font-size: 13px;
  line-height: 1.3;
  padding: 6px 12px;
  border-radius: 10px;
  border: 2px solid rgba(154, 92, 219, .5);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .18);
  white-space: normal;
  width: max-content;
  max-width: 150px;
  /* Plansze same maja podpisy drukowanymi (WERSALKI) - hotspoty maja
     wyglądac tak samo, nie "zwyklym" tekstem. */
  text-transform: uppercase;
  letter-spacing: .02em;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
}
.y9-horse-hotspot-tip em { display: block; font-style: normal; font-weight: 700; opacity: .7; font-size: .85em; color: #8a6fb0; }
.y9-horse-hotspot:hover .y9-horse-hotspot-tip,
.y9-horse-hotspot.is-open .y9-horse-hotspot-tip {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}
.y9-horse-learn-nav {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}

/* ===== "Sprint Run" - drugi tryb wyscigu, refleks nie slownictwo (2026-09-05) ===== */
.y9-horse-action-dino {
  flex: 1 1 calc(50% - 4px);
  background: linear-gradient(180deg, #e0f0ff, #b9dcff);
  border-color: rgba(60, 130, 219, .55);
  color: #1f4d8a;
}
.y9-horse-dino-lanes {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 10px 0;
}
.y9-horse-dino-lane { display: flex; align-items: center; gap: 8px; }
.y9-horse-dino-lane-label { flex: 0 0 auto; width: 64px; font-size: 11px; font-weight: 800; color: #6b382b; text-align: right; }
.y9-horse-dino-lane.is-you .y9-horse-dino-lane-label { color: #1f6b45; }
.y9-horse-dino-lane-track {
  flex: 1 1 auto;
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .08);
}
.y9-horse-dino-dot {
  position: absolute;
  top: 50%;
  left: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #b98f5c;
  border: 2px solid #fff;
  transform: translate(-50%, -50%);
  transition: left .15s linear;
}
.y9-horse-dino-dot.is-you { background: #3ca86f; width: 16px; height: 16px; }
.y9-horse-dino-finish {
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translate(-50%, -50%);
  font-size: 13px;
  line-height: 1;
  pointer-events: none;
}
.y9-horse-dino-stage {
  position: relative;
  width: 100%;
  height: clamp(120px, 22vh, 190px);
  border-radius: 16px;
  /* Proste CSS "tlo" (bez nowych grafik): niebo + kilka miekkich "krzaczkow"
     nad linia trawy + sama trawa - zamiast plaskiego, pustego bladoniebieskiego
     gradientu. */
  background-image:
    radial-gradient(circle at 15% 82%, rgba(90, 160, 90, .35) 0 22px, transparent 23px),
    radial-gradient(circle at 45% 88%, rgba(90, 160, 90, .3) 0 18px, transparent 19px),
    radial-gradient(circle at 75% 80%, rgba(90, 160, 90, .35) 0 24px, transparent 25px),
    radial-gradient(circle at 92% 86%, rgba(90, 160, 90, .28) 0 16px, transparent 17px),
    linear-gradient(180deg, #dff3ff 0%, #eef9ff 66%, #d7ecb8 66%, #c3e0a0 100%);
  border: 2px solid rgba(60, 130, 219, .25);
  overflow: hidden;
  cursor: pointer;
}
.y9-horse-dino-track { position: absolute; inset: 0; }
.y9-horse-dino-obstacle {
  position: absolute;
  bottom: 8px;
  width: 14px;
  height: 34px;
  border-radius: 4px;
  background: linear-gradient(180deg, #7a4a1e, #5a3512);
  transform: translateX(-50%);
}
.y9-horse-dino-runner {
  position: absolute;
  bottom: 8px;
  width: 130px;
  transform: translateX(-50%);
}
.y9-horse-dino-runner img { width: 100%; height: auto; object-fit: contain; display: block; transform: scaleX(-1); }
@keyframes y9DinoJump {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  40% { transform: translateX(-50%) translateY(-46px); }
  60% { transform: translateX(-50%) translateY(-46px); }
}
.y9-horse-dino-runner.is-jumping { animation: y9DinoJump .48s ease; }
.y9-horse-dino-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
  font-weight: 800;
  color: #6b382b;
}
/* [hidden] domyslnie ma display:none, ale to TA SAMA specyficznosc (0-1-0)
   co .y9-horse-dino-footer{display:flex} wyzej - bez !important atrybut
   hidden (ustawiany w endHorseDino() po przegranej) byl ignorowany, footer
   (SPACE + stary "Back to horse") zostawal widoczny pod nowym overlayem. */
.y9-horse-dino-footer[hidden] { display: none !important; }
.y9-horse-dino-overlay {
  /* Nie position:absolute/inset:0 nad .y9-horse-dino-stage - stage ma
     overflow:hidden + ograniczona wysokosc (clamp 120-190px), co obcinalo
     przyciski. Teraz to zwykla karta W PRZEPLYWIE, jako siostrzany element
     PO stage (patrz endHorseDino() w games.js) - nic jej nie moze przyciac. */
  margin-top: 8px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .92);
  border: 2px solid rgba(60, 130, 219, .25);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  font-weight: 800;
  color: #1f4d8a;
  padding: 10px;
}
.y9-horse-dino-overlay p { margin: 0; }


/* ==========================================================================
   MAGICAL ENGLISH QUEST (.mq-*) - wspolna historia Luna + smoczek.
   Selektory BEZ body.games-page-v9, zeby dzialaly i na /gry, i w panelu
   Minigry na /spotkanie (.minigry-mount, skalowane zoomem). Rozmiary w px/%,
   nie w vw (vw liczy sie od calego okna, nie od waskiego panelu).
   ========================================================================== */
.y9-card-quest { --b: #b48cff; --s: #7c4dff; }
/* Kafelek przygody = zwykly kafelek jak "Moj konik" (ten sam rozmiar), tylko w fiolecie. */

/* Okienko gry = TA SAMA szklana ramka co w innych minigrach (rozmiar, obwodka,
   zaokraglenie) - bez wlasnego rozciagania. Scena historii (.mq-scene) wypelnia je
   w calosci, od krawedzi do krawedzi. */
.y9-world.mq-world { background-color: #3a2766 !important; }
html body .y9-world .y9-board-wrap > .y9-board.y9-game-board.mq-board,
html body .minigry-mount .y9-world .y9-board-wrap > .y9-board.y9-game-board.mq-board,
.y9-game-board.mq-board {
  position: relative !important;
  padding: 0 !important;
  overflow: hidden !important;
  font-family: Nunito, Quicksand, "Segoe UI", sans-serif;
}
.mq-scene {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border-radius: inherit;
  overflow: hidden;
  background: #3a2766 var(--mq-scene) center / cover no-repeat;
}
.mq-scene.is-enter { animation: mqSceneIn .7s ease both; }
.mq-scene.is-enter .mq-char { animation: mqCharIn .8s cubic-bezier(.2,1.2,.4,1) both; }
@keyframes mqSceneIn { 0% { opacity: 0; filter: brightness(1.6) blur(3px); } 100% { opacity: 1; filter: none; } }
@keyframes mqCharIn { 0% { opacity: 0; transform: translateX(-50%) translateY(18px); } 100% { opacity: 1; transform: translateX(-50%) translateY(0); } }
.mq-top {
  position: relative;
  z-index: 4;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 14px;
  border-radius: 16px;
  background: rgba(46, 20, 84, .62);
  color: #fff;
  backdrop-filter: blur(4px);
}
.mq-title { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; }
.mq-title small { font-weight: 900; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #ffd86b; }
.mq-title strong { font-family: "Baloo 2", Nunito, sans-serif; font-weight: 800; font-size: 19px; line-height: 1.1; }
.mq-title em { font-style: normal; font-size: 12px; opacity: .8; }
.mq-stars { display: flex; gap: 3px; flex: none; }
.mq-star { width: 28px; height: 28px; object-fit: contain; filter: grayscale(1) brightness(.75); opacity: .4; transition: filter .4s, opacity .4s; }
.mq-star.is-lit { filter: none; opacity: 1; }
.mq-star.is-new { animation: mqStarPop 1.2s ease both; }

.mq-stage { position: relative; flex: 1 1 auto; min-height: 110px; }
.mq-char {
  position: absolute;
  bottom: 0;
  width: auto;
  max-width: none;
  transform: translateX(-50%);
  object-fit: contain;
  filter: drop-shadow(0 8px 10px rgba(40,10,60,.35));
  pointer-events: none;
  user-select: none;
}
.mq-char.is-speaking { animation: mqTalk 1.5s ease-in-out infinite; }
.mq-char.is-float { animation: mqCharFloat 3.2s ease-in-out infinite; }
.mq-char.is-cheer { animation: mqHop .6s ease 2; }
.mq-char.is-oops { animation: mqOops .5s ease; }
@keyframes mqCharFloat { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-10px); } }
@keyframes mqHop { 0%, 100% { transform: translateX(-50%) translateY(0); } 40% { transform: translateX(-50%) translateY(-16px) scale(1.04); } }
@keyframes mqOops { 0%, 100% { transform: translateX(-50%) rotate(0); } 25% { transform: translateX(-50%) rotate(-4deg); } 75% { transform: translateX(-50%) rotate(4deg); } }
.mq-fx-pop { animation: mqFxPop .8s cubic-bezier(.2,1.4,.4,1) both, mqFloat 3s ease-in-out .8s infinite; }
@keyframes mqFxPop { 0% { transform: translate(-50%, -50%) scale(0) rotate(-20deg); opacity: 0; } 100% { transform: translate(-50%, -50%) scale(1) rotate(0); opacity: 1; } }
.mq-confetti { position: absolute; top: -12%; font-size: 26px; pointer-events: none; animation: mqConfetti 4s linear infinite; }
@keyframes mqConfetti { 0% { transform: translateY(0) rotate(0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translateY(560%) rotate(360deg); opacity: 0; } }
.mq-inv { display: flex; align-items: center; gap: 4px; margin-left: auto; margin-right: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.16); }
.mq-inv > img { height: 24px; width: auto; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.mq-pages { display: inline-flex; gap: 2px; margin-left: 4px; padding-left: 6px; border-left: 1px solid rgba(255,255,255,.3); }
.mq-pages img { height: 18px; width: auto; filter: grayscale(1) brightness(.8); opacity: .45; }
.mq-pages img.is-lit { filter: drop-shadow(0 0 5px #ffe38a); opacity: 1; }
.mq-friends { margin-left: 4px; padding-left: 6px; border-left: 1px solid rgba(255,255,255,.3); font-size: 17px; letter-spacing: 1px; }
.mq-fx { position: absolute; width: auto; max-width: none; transform: translate(-50%, -50%); pointer-events: none; filter: drop-shadow(0 0 14px rgba(255,230,140,.95)); }
.mq-fx-drop { animation: mqDrop 1.1s cubic-bezier(.3,1.35,.5,1) both; }
.mq-fx-glow { animation: mqGlow 1.8s ease-in-out infinite; }
.mq-fx-float { animation: mqFloat 3s ease-in-out infinite; }
.mq-hidden {
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.mq-hidden img { display: block; height: 100%; width: auto; max-width: none; filter: drop-shadow(0 0 6px rgba(255,255,255,.75)); animation: mqPeek 2.6s ease-in-out infinite; }
.mq-hidden:hover img { filter: drop-shadow(0 0 12px #fff6a8); }
.mq-hidden.is-found { cursor: default; }
.mq-hidden.is-found img { animation: none; filter: drop-shadow(0 0 14px #7dff9b); }
.mq-hidden.is-found::after {
  content: "✓";
  position: absolute;
  right: -6px;
  top: -6px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #3fbf5e;
  color: #fff;
  font-weight: 900;
  font-size: 15px;
}

.mq-panel {
  position: relative;
  flex: 0 0 auto;
  max-height: none;
  overflow: hidden;
  z-index: 4;
  padding: 12px 16px 10px;
  border-radius: 22px;
  background: rgba(255, 251, 255, .95);
  border: 3px solid #cdb4ff;
  box-shadow: 0 10px 30px rgba(60, 20, 90, .35);
  color: #2e1f4d;
  scrollbar-width: thin;
  scrollbar-color: #b98fe6 transparent;
}
.mq-speaker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  padding: 3px 12px;
  border-radius: 999px;
  background: #7c4dff;
  color: #fff;
  font-weight: 900;
  font-size: 14px;
}
.mq-sp-luna { background: #b05bd6; }
.mq-sp-dragon { background: #3d8bff; }
.mq-sp-pip { background: #3fae5e; }
.mq-sp-owl { background: #9a7b4f; }
.mq-sp-tree { background: #5c8f3a; }
.mq-sp-key { background: #8a93a8; }
.mq-sp-book { background: #7c4dff; }
.mq-sp-fox { background: #e07b2e; }
.mq-sp-note { background: #ff5fa2; }
.mq-text { font-size: 19px; font-weight: 800; line-height: 1.38; }
.mq-text.is-note {
  padding: 8px 12px;
  border-radius: 10px;
  background: #ffe3ef;
  font-family: "Architects Daughter", Nunito, cursive;
  font-weight: 400;
  transform: rotate(-.5deg);
}
.mq-pl { margin-top: 4px; color: #6b5a8e; font-size: 14px; font-style: italic; font-weight: 600; }
.mq-task { margin-top: 8px; }
.mq-task:empty { display: none; }
.mq-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.mq-options { display: flex; flex-wrap: wrap; gap: 8px; }
.mq-option, .mq-btn, .mq-chip, .mq-choice, .mq-pack-item, .mq-path {
  font-family: Nunito, Quicksand, sans-serif;
  transition: transform .12s, box-shadow .12s, background .15s, border-color .15s;
}
.mq-option {
  padding: 9px 16px;
  border-radius: 14px;
  border: 2px solid #d9c8ff;
  background: #fff;
  color: #3b2470;
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
}
.mq-option:hover:not(:disabled) { transform: translateY(-2px); border-color: #9c6bff; }
.mq-option.is-good { background: #e3ffea; border-color: #3fbf5e; color: #1f6b35; }
.mq-option.is-bad { background: #ffe8ea; border-color: #ff7b89; animation: mqShake .4s; }
.mq-option:disabled { cursor: default; }
.mq-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; }
.mq-choice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 2px solid #d9c8ff;
  background: linear-gradient(#fff, #f6f0ff);
  color: #3b2470;
  text-align: left;
  cursor: pointer;
  font-size: 15px;
}
.mq-choice:hover { transform: translateY(-2px); border-color: #9c6bff; box-shadow: 0 6px 14px rgba(124,77,255,.2); }
.mq-choice strong { display: block; font-weight: 900; }
.mq-choice small { display: block; margin-top: 2px; color: #7a6a9c; font-size: 12.5px; font-weight: 600; }
.mq-choice-icon { flex: none; width: 44px; height: 44px; display: grid; place-items: center; font-size: 28px; }
.mq-choice-icon img { max-width: 44px; max-height: 44px; object-fit: contain; }
.mq-choice-custom { cursor: default; grid-column: 1 / -1; }
.mq-choice-custom:hover { transform: none; }
.mq-choice-custom > span:last-child { flex: 1; }
.mq-result {
  padding: 10px 14px;
  border-radius: 14px;
  border: 2px dashed #f2b705;
  background: #fff6d8;
  font-size: 16.5px;
  font-weight: 800;
  line-height: 1.4;
  animation: mqPop .45s ease both;
}
.mq-result.is-kid { background: #e8fff0; border-color: #3fbf5e; }
.mq-result.mq-ready { margin-top: 8px; background: #f3ecff; border-color: #9c6bff; }
.mq-talk {
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 14px;
  border-left: 4px solid #3d8bff;
  background: #eef6ff;
  font-size: 14.5px;
  font-weight: 800;
}
.mq-talk small { display: block; color: #5a6f8e; font-weight: 600; font-size: 12.5px; }
.mq-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.mq-spacer { flex: 1; }
.mq-btn {
  padding: 7px 14px;
  border-radius: 12px;
  border: 2px solid #d9c8ff;
  background: #fff;
  color: #4b2d86;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
}
.mq-btn:hover:not(:disabled) { transform: translateY(-1px); border-color: #9c6bff; }
.mq-btn-main { background: linear-gradient(#9c6bff, #7c4dff); border-color: #6a3df0; color: #fff; box-shadow: 0 4px 0 #5530c9; }
.mq-btn:disabled { opacity: .42; cursor: default; box-shadow: none; }
.mq-btn-icon { min-width: 40px; padding: 7px 8px; }
.mq-btn-icon.is-on { background: #f2b705; border-color: #d9a200; color: #1a1a1a; }
.mq-next:not(:disabled) { animation: mqNudge 1.8s ease-in-out infinite; }
.mq-panel { padding-right: 34px !important; }
.mq-restart { position: absolute; top: 6px; right: 10px; border: 0; background: none; color: #c3b3e3; font-size: 16px; cursor: pointer; }
.mq-restart:hover { color: #7c4dff; }
.mq-chip {
  padding: 7px 12px;
  border-radius: 12px;
  border: 2px solid #cdb4ff;
  background: #fff;
  color: #3b2470;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
}
.mq-chip:hover:not(:disabled) { transform: translateY(-2px); }
.mq-chip.is-placed { background: #efe6ff; border-color: #9c6bff; }
.mq-chip.is-static { cursor: default; }
.mq-chip.is-static:hover { transform: none; }
.mq-starter { font-size: 13.5px; background: #fff8e6; border-color: #f2c94c; }
.mq-starters { display: flex; flex-wrap: wrap; gap: 6px; }
.mq-slots { display: flex; flex-wrap: wrap; gap: 6px; min-height: 46px; padding: 6px; border: 2px dashed #cdb4ff; border-radius: 12px; background: #faf7ff; }
.mq-slots-empty { align-self: center; color: #a393c7; font-weight: 700; font-size: 13.5px; }
.mq-bank { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mq-built { padding: 8px 12px; border-radius: 12px; font-weight: 900; font-size: 17px; }
.mq-built.is-good { background: #e3ffea; color: #1f6b35; }
.mq-feedback { margin-top: 8px; font-weight: 900; font-size: 15px; }
.mq-feedback small { display: block; font-weight: 700; font-size: 13px; opacity: .85; }
.mq-feedback.is-good { color: #238a43; }
.mq-feedback.is-bad { color: #d6455a; }
.mq-hint { color: #7a6a9c; font-weight: 700; font-size: 13.5px; margin-top: 6px; }
.mq-hint-btn { margin-top: 8px; padding: 5px 12px; font-size: 13px; background: #fff8e6; border-color: #f2c94c; color: #8a6400; }
.mq-type-row { display: flex; gap: 8px; margin-top: 6px; }
.mq-input, .mq-textarea {
  min-width: 0;
  flex: 1;
  padding: 8px 12px;
  border: 2px solid #cdb4ff;
  border-radius: 12px;
  background: #fff;
  color: #2e1f4d;
  font: 800 16px Nunito, sans-serif;
  outline: none;
}
.mq-input:focus, .mq-textarea:focus { border-color: #7c4dff; box-shadow: 0 0 0 3px rgba(124,77,255,.18); }
.mq-textarea { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; resize: vertical; }
.mq-pack { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.mq-pack.is-done { display: flex; flex-wrap: wrap; }
.mq-pack-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 6px;
  border-radius: 14px;
  border: 2px solid #e3d7ff;
  background: #fff;
  color: #3b2470;
  font-size: 13px;
  cursor: pointer;
}
.mq-pack-item img { height: 52px; width: auto; object-fit: contain; }
.mq-pack-item small { color: #7a6a9c; font-size: 11.5px; }
.mq-pack-item.is-on { border-color: #7c4dff; background: #f1e9ff; box-shadow: 0 0 0 3px rgba(124,77,255,.25); }
.mq-paths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mq-path {
  position: relative;
  min-height: 104px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 8px 10px;
  border: 3px solid #fff;
  border-radius: 16px;
  background: var(--mq-thumb) center / cover;
  color: #fff;
  text-align: left;
  text-shadow: 0 2px 6px rgba(0,0,0,.75);
  box-shadow: 0 6px 18px rgba(40,10,60,.35);
  cursor: pointer;
}
.mq-path:hover:not(:disabled) { transform: translateY(-3px) scale(1.02); }
.mq-path-name { font-family: "Baloo 2", Nunito, sans-serif; font-weight: 800; font-size: 16px; line-height: 1.1; }
.mq-path small { font-weight: 700; font-size: 12px; }
.mq-path.is-done { filter: grayscale(.45) brightness(.85); cursor: default; }
.mq-path-done { position: absolute; top: 6px; left: 8px; padding: 2px 8px; border-radius: 999px; background: #3fbf5e; font-size: 12px; font-weight: 900; text-shadow: none; }
.mq-star-big { display: flex; justify-content: center; }
.mq-star-big img { height: 104px; width: auto; animation: mqStarPop 1.2s ease both; filter: drop-shadow(0 0 18px rgba(255,230,120,.9)); }
.mq-code-pics { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.mq-code-pics figure { margin: 0; text-align: center; }
.mq-code-pics img { height: 54px; width: auto; object-fit: contain; }
.mq-code-pics figcaption { font-weight: 900; font-size: 14px; color: #7c4dff; }
.mq-found { display: flex; flex-wrap: wrap; gap: 6px; }
.mq-found-item { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px 3px 4px; border-radius: 999px; background: #f1ecfa; font-weight: 800; font-size: 13.5px; color: #9b8cbd; }
.mq-found-item img { height: 26px; width: auto; opacity: .35; filter: grayscale(1); }
.mq-found-item.is-found { background: #e3ffea; color: #1f6b35; }
.mq-found-item.is-found img { opacity: 1; filter: none; }
.mq-timer { font-weight: 900; font-size: 22px; color: #d6455a; }
.mq-door {
  position: relative;
  display: block;
  width: 118px;
  height: 182px;
  margin: 0 auto 10px;
  padding: 0;
  border: 0;
  background: none;
  cursor: default;
}
.mq-door.is-ready { cursor: pointer; animation: mqGlow 1.8s ease-in-out infinite; }
.mq-door-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .35s; }
.mq-door .mq-door-closed { opacity: 1; }
.mq-door.is-ready.is-hover .mq-door-closed { opacity: 0; }
.mq-door.is-ready.is-hover .mq-door-hover { opacity: 1; }
.mq-door.is-open .mq-door-closed,
.mq-door.is-open .mq-door-hover { opacity: 0; }
.mq-door.is-open .mq-door-open { opacity: 1; }
.mq-door-label { position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); white-space: nowrap; padding: 2px 10px; border-radius: 999px; background: #7c4dff; color: #fff; font-weight: 900; font-size: 12.5px; }
.mq-final-row { justify-content: center; }
/* Klikalne namalowane drzwi (krok "door") - ustawiane z JS dokladnie na drzwiach tla. */
.mq-door-spot {
  position: absolute;
  z-index: 3;
  padding: 0;
  border: 3px dashed rgba(255, 236, 160, .55);
  border-radius: 46% 46% 6px 6px / 22% 22% 6px 6px;
  background: rgba(255, 240, 190, .05);
  cursor: not-allowed;
  transition: background .2s, box-shadow .2s, border-color .2s;
}
.mq-door-spot.is-ready {
  cursor: pointer;
  border: 3px solid #ffe38a;
  animation: mqDoorGlow 1.6s ease-in-out infinite;
}
.mq-door-spot.is-ready:hover { background: rgba(255, 240, 190, .22); }
.mq-door-spot-label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(124, 77, 255, .92);
  color: #fff;
  font: 900 15px Nunito, sans-serif;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(40,10,80,.35);
}
@keyframes mqDoorGlow { 0%, 100% { box-shadow: 0 0 14px 4px rgba(255, 226, 120, .55), inset 0 0 18px rgba(255, 236, 160, .35); } 50% { box-shadow: 0 0 34px 12px rgba(255, 236, 150, .9), inset 0 0 30px rgba(255, 244, 190, .6); } }
.mq-book {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  padding: 12px;
  border-radius: 20px;
  background: rgba(34, 14, 60, .72);
  animation: mqPop .3s ease both;
}
.mq-book-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; color: #fff; font-family: "Baloo 2", Nunito, sans-serif; font-size: 20px; }
.mq-book-nav { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: auto; padding-top: 8px; color: #fff; font-weight: 900; font-size: 15px; }
.mq-book-body {
  flex: 0 0 auto;
  overflow: hidden;
  padding: 18px 22px;
  border-radius: 16px;
  background: linear-gradient(#fffaf0, #fff3dc);
  border: 3px solid #e8c98a;
  color: #3a2a1a;
  font-size: 16px;
  line-height: 1.55;
  scrollbar-width: thin;
}
.mq-book-body p { margin: 0 0 8px; }
.mq-book-body p.is-kid { color: #1f6b35; font-weight: 800; }

@keyframes mqTalk { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-5px); } }
@keyframes mqDrop { 0% { transform: translate(-50%, -420%) rotate(-30deg); opacity: 0; } 60% { opacity: 1; } 100% { transform: translate(-50%, -50%) rotate(0); opacity: 1; } }
@keyframes mqGlow { 0%, 100% { filter: drop-shadow(0 0 8px rgba(255,230,140,.7)); } 50% { filter: drop-shadow(0 0 22px rgba(255,240,170,1)); } }
@keyframes mqFloat { 0%, 100% { transform: translate(-50%, -50%) translateY(0); } 50% { transform: translate(-50%, -50%) translateY(-10px); } }
@keyframes mqPeek { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes mqStarPop { 0% { transform: scale(0) rotate(-90deg); opacity: 0; } 70% { transform: scale(1.25) rotate(10deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } }
@keyframes mqPop { 0% { transform: scale(.94); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes mqShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@keyframes mqNudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }

@media (max-width: 760px) {
  .mq-top { flex-wrap: wrap; }
  .mq-inv { order: 3; margin-left: 0; }
  .mq-paths { grid-template-columns: 1fr; }
  .mq-path { min-height: 70px; }
  .mq-text { font-size: 17px; }
  .mq-panel { max-height: none; }
}

/* Waskie okienko (panel /spotkanie, telefon): gorny pasek przygody w jednym-dwoch
   niskich rzedach, zeby zostalo miejsce na postacie i okienko zadania. */
.mq-scene { container-type: inline-size; }
@container (max-width: 640px) {
  .mq-top { padding: 4px 10px; gap: 6px; row-gap: 3px; }
  .mq-title strong { font-size: 16px; }
  .mq-title small { font-size: 9px; }
  .mq-star { width: 20px; height: 20px; }
  .mq-inv { margin-right: 0; padding: 1px 6px; }
  .mq-inv > img { height: 18px; }
  .mq-pages img { height: 14px; }
  .mq-friends { font-size: 13px; white-space: nowrap; }
}
@container (max-width: 420px) {
  .mq-title small, .mq-title em { display: none; }
  .mq-title strong { font-size: 15px; }
  .mq-star { width: 17px; height: 17px; }
}

/* ==========================================================================
   KOSMICZNA ZABKA (.sf-*) - lot statkiem po rzeczy do eksperymentu + laboratorium.
   Jak przygoda Luny: standardowa szklana ramka, w srodku .sf-scene od krawedzi
   do krawedzi. Dziala na /gry i w panelu Minigry na /spotkanie (bez vw).
   ========================================================================== */
.y9-card-space { --b: #7fd3ff; --s: #5b4bd6; }
.y9-world.sf-world { background-color: #1c1242 !important; }
html body .y9-world .y9-board-wrap > .y9-board.y9-game-board.sf-board,
html body .minigry-mount .y9-world .y9-board-wrap > .y9-board.y9-game-board.sf-board,
.y9-game-board.sf-board {
  position: relative !important;
  padding: 0 !important;
  overflow: hidden !important;
  font-family: Nunito, Quicksand, "Segoe UI", sans-serif;
}
.sf-scene {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border-radius: inherit;
  overflow: hidden;
  container-type: inline-size;
  background: #1c1242 url("/assets/games/space/bg/sky.jpg?v=1") center / cover no-repeat;
}
.sf-scene.is-enter { animation: sfIn .6s ease both; }
@keyframes sfIn { 0% { opacity: 0; filter: brightness(1.5) blur(3px); } 100% { opacity: 1; filter: none; } }

.sf-top {
  position: relative; z-index: 4; flex: none;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 6px 12px; border-radius: 16px;
  background: rgba(20, 10, 60, .62); color: #fff; backdrop-filter: blur(4px);
}
.sf-title { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; }
.sf-title small { font-weight: 900; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #8fe3ff; }
.sf-title strong { font-family: "Baloo 2", Nunito, sans-serif; font-weight: 800; font-size: 19px; line-height: 1.1; }
.sf-title em { font-style: normal; font-size: 12px; opacity: .8; }
.sf-focus { padding: 2px 10px; border-radius: 999px; background: #ffe27a; color: #3b2a00; font-weight: 900; font-size: 12px; white-space: nowrap; }
.sf-badges { display: flex; gap: 2px; margin-left: auto; }
.sf-badge { width: 26px; height: 26px; padding: 1px; border: 0; border-radius: 8px; background: rgba(255,255,255,.08); cursor: pointer; }
.sf-badge img { width: 100%; height: 100%; object-fit: contain; filter: grayscale(1) brightness(.7); opacity: .45; }
.sf-badge.is-done img { filter: drop-shadow(0 0 4px #ffe38a); opacity: 1; }
.sf-badge.is-cur { outline: 2px solid #8fe3ff; }
.sf-dict-btn { border: 0; border-radius: 999px; padding: 4px 10px; background: #fff; color: #3a2a7a; font: 900 13px Nunito, sans-serif; cursor: pointer; white-space: nowrap; }

.sf-stage { position: relative; flex: 1 1 auto; min-height: 110px; }
.sf-ship-big { position: absolute; left: 1%; bottom: 4%; height: 78%; max-height: 190px; width: auto; max-width: 46%; object-fit: contain; animation: sfHover 3s ease-in-out infinite; filter: drop-shadow(0 8px 18px rgba(0,0,0,.35)); }
.sf-ship-big.is-happy { animation: sfHover 1.2s ease-in-out infinite; }
@keyframes sfHover { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-8px) rotate(1deg); } }
.sf-captain { position: absolute; right: 3%; bottom: 6%; display: flex; flex-direction: column; align-items: center; gap: 2px; height: 82%; max-height: 190px; }
.sf-captain img { flex: 1; min-height: 0; width: auto; max-width: 100%; object-fit: contain; border-radius: 50%; background: radial-gradient(circle, rgba(143,227,255,.35), rgba(143,227,255,0) 70%); }
.sf-captain span { padding: 2px 10px; border-radius: 999px; background: rgba(20,10,60,.7); color: #fff; font-weight: 900; font-size: 12px; white-space: nowrap; }
.sf-captain.is-talking img { animation: sfTalk 1.4s ease-in-out infinite; }
@keyframes sfTalk { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

.sf-vis-wrap { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; height: 92%; width: min(62%, 440px); }
/* W laboratorium statek z boku jest mniejszy, a obrazek zadania stoi po prawej - nie nachodza na siebie. */
.sf-ph-lab .sf-ship-big { max-width: 30%; }
.sf-ph-lab .sf-vis-wrap { left: 63%; width: min(64%, 470px); }
.sf-vis-wrap.is-solved .sf-vis, .sf-vis-wrap.is-solved .sf-prep { animation: sfPopIn .5s ease both; filter: drop-shadow(0 0 16px rgba(125,255,155,.8)); }
.sf-vis { display: flex; align-items: center; justify-content: center; gap: 10px; height: 100%; width: 100%; min-width: 0; }
.sf-vis img { height: 100%; max-height: 160px; width: auto; max-width: 100%; min-width: 0; object-fit: contain; filter: drop-shadow(0 0 12px rgba(143,227,255,.7)); animation: sfFloat 3s ease-in-out infinite; }
.sf-vs b { color: #ffe27a; font: 900 22px "Baloo 2", Nunito, sans-serif; text-shadow: 0 2px 6px rgba(0,0,0,.5); }
.sf-vs img { max-height: 120px; max-width: 40%; }
.sf-count img, .sf-dist .sf-many img { max-height: 90px; max-width: calc(33% - 6px); }
.sf-dist { flex-direction: column; gap: 2px; }
.sf-dist .sf-many { display: flex; gap: 6px; align-items: center; justify-content: center; height: 70%; width: 100%; }
.sf-dist.is-far .sf-many { transform: scale(.55); opacity: .75; }
.sf-dist small { padding: 1px 8px; border-radius: 999px; background: rgba(20,10,60,.7); color: #fff; font-weight: 900; font-size: 11px; }
@keyframes sfFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes sfPopIn { 0% { transform: scale(.8); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }

/* Scenka z przyimkami z grafik gry: A (duze) + B (male) ulozone wzgledem siebie. */
.sf-prep { position: relative; height: 100%; max-height: 160px; aspect-ratio: 1; display: grid; place-items: center; }
.sf-prep img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 10px rgba(143,227,255,.6)); }
.sf-prep-a { width: 62%; height: 62%; }
.sf-prep-b { position: absolute; width: 36%; height: 36%; }
/* on / under: rzeczy stykaja sie ze soba (B stoi NA A albo lezy POD A). */
.sf-prep-on .sf-prep-a, .sf-prep-under .sf-prep-a { position: absolute; left: 50%; transform: translateX(-50%); }
.sf-prep-on .sf-prep-a { bottom: 0; }
.sf-prep-on .sf-prep-b { left: 50%; bottom: 57%; transform: translateX(-50%); }
.sf-prep-under .sf-prep-a { top: 0; }
.sf-prep-under .sf-prep-b { left: 50%; top: 60%; transform: translateX(-50%); }
.sf-prep-in .sf-prep-b { top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.7); }
.sf-prep-around .sf-prep-a { width: 50%; height: 50%; }
.sf-prep-around .sf-prep-b { top: 32%; left: 32%; animation: sfAround 3.6s linear infinite; }
@keyframes sfAround { from { transform: rotate(0) translateX(118%) rotate(0); } to { transform: rotate(360deg) translateX(118%) rotate(-360deg); } }
.sf-vis-ship { height: 100%; max-height: 170px; width: auto; animation: sfHover 2.4s ease-in-out infinite; }
.sf-row-imgs img { max-width: 45%; }
/* magnes -> rzeczy z zielonym ✓ / czerwonym ✗ */
.sf-marks { gap: 6px; }
.sf-marks > img { max-width: 30%; }
.sf-pull { color: #8fe3ff; font: 900 26px Nunito, sans-serif; text-shadow: 0 0 10px rgba(143,227,255,.8); }
.sf-mark { position: relative; height: 80%; max-width: 28%; display: grid; place-items: center; }
.sf-mark img { height: 100%; max-height: 110px; }
.sf-mark b { position: absolute; right: -2px; top: -2px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 900 18px Nunito, sans-serif; border: 3px solid #fff; box-shadow: 0 3px 8px rgba(0,0,0,.35); }
.sf-mark.is-ok b { background: #36b25a; }
.sf-mark.is-no b { background: #e45b5b; }
.sf-mark.is-no img { filter: grayscale(.4) drop-shadow(0 0 8px rgba(228,91,91,.6)); }
/* tecza, pulpit z czerwonym guzikiem, karta z liczba - rysowane w CSS */
.sf-rainbow-mini { width: min(280px, 100%); aspect-ratio: 2; border-radius: 999px 999px 0 0; background: radial-gradient(circle at 50% 100%, transparent 38%, #9b5cff 38% 44%, #4b5bff 44% 50%, #3d8bff 50% 56%, #37d67a 56% 62%, #ffe14d 62% 68%, #ff9a3c 68% 74%, #ff4f5e 74% 80%, transparent 80%); filter: drop-shadow(0 0 14px rgba(255,255,255,.35)); }
.sf-console { position: relative; width: 190px; max-width: 100%; height: 110px; border-radius: 18px 18px 10px 10px; background: linear-gradient(#e9e4ff, #b9b1e6); border: 3px solid #fff; box-shadow: inset 0 -10px 0 rgba(70,50,150,.25), 0 8px 20px rgba(0,0,0,.35); display: grid; place-items: center; }
.sf-console i { position: absolute; top: 12px; width: 10px; height: 10px; border-radius: 50%; background: #37d67a; box-shadow: 0 0 8px #37d67a; animation: sfBlinkLed 1.2s steps(2, jump-none) infinite; }
.sf-console i:nth-child(1) { left: 16px; }
.sf-console i:nth-child(2) { left: 32px; background: #ffe14d; box-shadow: 0 0 8px #ffe14d; animation-delay: .3s; }
.sf-console i:nth-child(3) { left: 48px; background: #3d8bff; box-shadow: 0 0 8px #3d8bff; animation-delay: .6s; }
.sf-redbtn { width: 66px; height: 66px; border-radius: 50%; margin-top: 10px; background: radial-gradient(circle at 35% 30%, #ff9a9a, #ff3b3b 45%, #b81414 100%); border: 5px solid #5a4a9a; box-shadow: 0 6px 0 #7a1010, 0 0 22px rgba(255,60,60,.7); animation: sfPress 1.6s ease-in-out infinite; }
@keyframes sfBlinkLed { 50% { opacity: .3; } }
@keyframes sfPress { 0%, 70%, 100% { transform: translateY(0); box-shadow: 0 6px 0 #7a1010, 0 0 22px rgba(255,60,60,.7); } 80% { transform: translateY(4px); box-shadow: 0 2px 0 #7a1010, 0 0 30px rgba(255,90,90,.95); } }
.sf-card { padding: 10px 26px; border-radius: 18px; background: rgba(20,10,60,.75); border: 3px solid #8fe3ff; color: #fff; font: 800 clamp(30px, 9cqw, 52px) "Baloo 2", Nunito, sans-serif; letter-spacing: .06em; text-shadow: 0 0 14px rgba(143,227,255,.9); box-shadow: 0 0 24px rgba(143,227,255,.45); white-space: nowrap; }
.sf-machine-core img.is-dim { opacity: .45; filter: grayscale(.3); }

/* Maszyna eksperymentu: zebrane rzeczy kraza wokol rdzenia. */
.sf-machine { position: absolute; left: 50%; top: 50%; height: min(180px, 92%); aspect-ratio: 1; transform: translate(-50%, -50%); }
.sf-machine-ring { position: absolute; inset: 0; border-radius: 50%; border: 3px dashed rgba(143,227,255,.6); animation: sfSpin 14s linear infinite; }
.sf-orbit-item { position: absolute; left: 35%; top: 35%; width: 30%; height: 30%; object-fit: contain; transform: rotate(var(--a)) translateY(-150%) rotate(calc(-1 * var(--a))); }
.sf-machine-core { position: absolute; left: 50%; top: 50%; width: 42%; height: 42%; transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-items: center; font-size: 34px; background: radial-gradient(circle, #fff 0%, #bfefff 35%, #6f5bff 100%); box-shadow: 0 0 24px 6px rgba(143,227,255,.55); }
.sf-machine-core img { width: 88%; height: 88%; object-fit: contain; }
.sf-machine.is-on .sf-machine-core { animation: sfCore 1.2s ease-in-out infinite; }
.sf-machine.is-on .sf-machine-ring { animation-duration: 3s; border-color: #ffe27a; }
@keyframes sfSpin { to { transform: rotate(360deg); } }
@keyframes sfCore { 0%, 100% { box-shadow: 0 0 24px 6px rgba(255,226,122,.6); transform: translate(-50%, -50%) scale(1); } 50% { box-shadow: 0 0 44px 16px rgba(255,236,160,.95); transform: translate(-50%, -50%) scale(1.12); } }
.sf-confetti { position: absolute; top: -10%; font-size: 22px; animation: sfConfetti 3.4s linear infinite; pointer-events: none; }
@keyframes sfConfetti { 0% { transform: translateY(0) rotate(0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translateY(260px) rotate(360deg); opacity: 0; } }
.sf-rainbow { position: absolute; left: 50%; top: 4%; width: 70%; aspect-ratio: 2; transform: translateX(-50%); border-radius: 999px 999px 0 0; background: radial-gradient(circle at 50% 100%, transparent 44%, #9b5cff 44% 50%, #3d8bff 50% 56%, #37d67a 56% 62%, #ffe14d 62% 68%, #ff9a3c 68% 74%, #ff4f5e 74% 80%, transparent 80%); opacity: .9; }
.sf-cert { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 18px; background: rgba(255,251,235,.94); border: 3px solid #ffd35a; color: #5a3b00; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.sf-cert strong { font: 800 22px "Baloo 2", Nunito, sans-serif; }
.sf-cert-badges { display: grid; grid-template-columns: repeat(5, 36px); gap: 4px; }
.sf-cert-badges img { width: 36px; height: 36px; object-fit: contain; filter: grayscale(1); opacity: .35; }
.sf-cert-badges img.is-done { filter: none; opacity: 1; }

.sf-panel {
  position: relative; z-index: 4; flex: 0 0 auto; overflow: hidden;
  padding: 12px 34px 10px 16px; border-radius: 22px;
  background: rgba(250, 252, 255, .95); border: 3px solid #a9c8ff;
  box-shadow: 0 10px 30px rgba(10, 5, 50, .4); color: #1f1a4d;
}
.sf-speaker { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 6px; padding: 3px 12px; border-radius: 999px; background: #e7e0ff; color: #3a2a7a; font-weight: 900; font-size: 13px; }
.sf-sp-captain { background: #dff4ff; color: #0f4f73; }
.sf-sp-ziggy { background: #dcf7d8; color: #1f6b35; }
.sf-sp-bleep { background: #f1e6ff; color: #5b2b9a; }
.sf-text { font-size: 18px; font-weight: 800; line-height: 1.35; }
.sf-pl { margin-top: 3px; font-size: 13px; color: #6a5f93; font-weight: 700; }
.sf-task { margin-top: 8px; }
.sf-task:empty { display: none; }
.sf-q { font-size: 20px; font-weight: 900; margin-bottom: 8px; }
.sf-gap { display: inline-block; min-width: 54px; padding: 0 8px; border-radius: 8px; background: #fff3c4; border-bottom: 3px solid #f0b400; text-align: center; }
.sf-options { display: flex; flex-wrap: wrap; gap: 8px; }
.sf-opt { border: 2px solid #c9d8ff; border-radius: 14px; padding: 7px 14px; background: #fff; color: #1f1a4d; font: 800 16px Nunito, sans-serif; cursor: pointer; transition: transform .12s, background .2s; }
.sf-opt:hover:not(:disabled) { transform: translateY(-2px); background: #f1f5ff; }
.sf-opt.is-good { background: #d9fbe0; border-color: #36b25a; color: #14532d; }
.sf-opt.is-bad { background: #ffe1e1; border-color: #e45b5b; animation: sfShake .35s ease; }
.sf-opt:disabled { cursor: default; }
@keyframes sfShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.sf-hint { margin-top: 8px; padding: 6px 10px; border-radius: 12px; background: #fff7d6; color: #6b4b00; font-weight: 700; font-size: 14px; }
.sf-why { margin-top: 8px; padding: 6px 10px; border-radius: 12px; background: #e3fbe8; color: #14532d; font-weight: 800; font-size: 14px; }
.sf-hint-btn { margin-top: 8px; border: 0; background: none; color: #7a5b00; font: 800 13px Nunito, sans-serif; cursor: pointer; text-decoration: underline; }
.sf-dots { display: flex; gap: 5px; margin-bottom: 6px; }
.sf-dots i { width: 10px; height: 10px; border-radius: 50%; background: #d7dcf5; }
.sf-dots i.is-done { background: #36b25a; }
.sf-dots i.is-cur { background: #6f5bff; box-shadow: 0 0 0 3px #d9d3ff; }
.sf-built { min-height: 38px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 5px 8px; border-radius: 12px; border: 2px dashed #c9d8ff; background: #f6f8ff; margin-bottom: 8px; }
.sf-built em { color: #8b86ad; font-weight: 700; font-size: 13px; }
.sf-built.is-good { border-style: solid; border-color: #36b25a; background: #e3fbe8; font-weight: 900; }
.sf-built.is-bad { animation: sfShake .35s ease; border-color: #e45b5b; }
.sf-built.is-lines, .sf-chips.is-lines { flex-direction: column; align-items: stretch; }
.sf-built.is-good span { padding: 0 2px; }
.sf-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.sf-chip { border: 2px solid #c9b8ff; border-radius: 12px; padding: 5px 11px; background: #fff; color: #2a1f5c; font: 800 15px Nunito, sans-serif; cursor: pointer; text-align: left; }
.sf-chip.is-used { opacity: .3; }
.sf-chip.is-in { background: #ece6ff; }
.sf-col-red { border-color: #ff4f5e; background: #fff0f1; } .sf-col-orange { border-color: #ff9a3c; background: #fff5ec; } .sf-col-yellow { border-color: #f0c800; background: #fffbe0; }
.sf-col-green { border-color: #37d67a; background: #ecfbf2; } .sf-col-blue { border-color: #3d8bff; background: #edf4ff; } .sf-col-purple { border-color: #9b5cff; background: #f5efff; }
.sf-type { display: flex; gap: 8px; }
.sf-input { flex: 1; min-width: 0; border: 2px solid #c9d8ff; border-radius: 12px; padding: 7px 12px; font: 800 17px Nunito, sans-serif; color: #1f1a4d; }
.sf-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sf-final-row { justify-content: center; }
.sf-reward { padding: 6px 12px; border-radius: 12px; background: #fff3c4; color: #6b4b00; font-weight: 900; display: inline-block; }
.sf-actions { display: flex; align-items: center; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.sf-spacer { flex: 1; }
.sf-btn { border: 2px solid #c9d8ff; border-radius: 12px; padding: 6px 12px; background: #fff; color: #2a1f5c; font: 900 14px Nunito, sans-serif; cursor: pointer; }
.sf-btn:disabled { opacity: .45; cursor: default; }
.sf-btn-main { background: linear-gradient(#8a7bff, #5b4bd6); border-color: #4b3bc4; color: #fff; box-shadow: 0 3px 0 #3a2aa6; }
.sf-btn-icon { padding: 6px 9px; }
.sf-btn-icon.is-on { background: #e7e0ff; }
.sf-next:not(:disabled) { animation: sfNudge 1.4s ease-in-out infinite; }
@keyframes sfNudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }
.sf-restart { position: absolute; right: 8px; top: 8px; border: 0; background: none; color: #a4a0c8; font-size: 16px; cursor: pointer; }

/* Slowniczek: 30 kart zawsze na jednym ekranie (bez przewijania). */
.sf-dict { position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: inherit; background: rgba(18, 10, 52, .92); animation: sfIn .25s ease both; }
.sf-dict-head { display: flex; align-items: center; justify-content: space-between; color: #fff; font: 800 18px "Baloo 2", Nunito, sans-serif; }
.sf-dict-head small { font-size: 13px; opacity: .8; }
.sf-dict-fact { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 14px; background: #fff; color: #1f1a4d; font-size: 14px; }
.sf-dict-fact.is-empty { color: #5b5680; font-weight: 700; }
.sf-dict-fact img { width: 48px; height: 48px; object-fit: contain; }
.sf-dict-fact p { margin: 2px 0 0; font-weight: 700; }
.sf-dict-fact > div { flex: 1; }
.sf-dict-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(5, minmax(0, 1fr)); gap: 5px; }
.sf-dcard { min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 3px; border: 2px solid rgba(143,227,255,.35); border-radius: 12px; background: rgba(255,255,255,.08); color: #fff; font-family: Nunito, sans-serif; cursor: pointer; overflow: hidden; }
.sf-dcard img { flex: 1; min-height: 0; max-height: 64%; width: auto; max-width: 100%; object-fit: contain; filter: brightness(0) opacity(.45); }
.sf-dcard b { font-size: 12px; font-weight: 900; line-height: 1.1; }
.sf-dcard small { font-size: 10px; opacity: .8; line-height: 1.1; }
.sf-dcard.is-found img { filter: drop-shadow(0 0 6px rgba(143,227,255,.7)); }
.sf-dcard.is-sel { border-color: #ffe27a; background: rgba(255,226,122,.18); }
.sf-dcard:disabled { cursor: default; }

/* ---------- LOT ---------- */
.sf-ph-fly { padding: 0; }
.sf-sky { position: absolute; inset: 0; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; cursor: crosshair; --sf-tile: 1500px; }
.sf-sky.is-viewer { cursor: default; }
.sf-sky-bg { position: absolute; inset: 0; background: #1c1242 url("/assets/games/space/bg/sky.jpg?v=1") 0 0 / var(--sf-tile) 100% repeat-x; animation: sfScroll 38s linear infinite; }
.sf-sky-stars { position: absolute; inset: 0; opacity: .8; background-image: radial-gradient(1.6px 1.6px at 20px 30px, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 140px 90px, #cfe9ff 50%, transparent 51%), radial-gradient(2px 2px at 90px 160px, #fff 50%, transparent 51%), radial-gradient(1.3px 1.3px at 190px 210px, #ffe7fb 50%, transparent 51%); background-size: 220px 240px; animation: sfStars 9s linear infinite; }
@keyframes sfScroll { from { background-position: 0 0; } to { background-position: calc(-1 * var(--sf-tile)) 0; } }
@keyframes sfStars { from { background-position: 0 0; } to { background-position: -220px 0; } }
.sf-layer { position: absolute; inset: 0; pointer-events: none; }
.sf-obj { position: absolute; left: 0; top: 0; will-change: transform; }
.sf-item img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 10px rgba(255,240,180,.75)); animation: sfBob 1.6s ease-in-out infinite; }
@keyframes sfBob { 0%, 100% { transform: rotate(-6deg) scale(1); } 50% { transform: rotate(6deg) scale(1.06); } }
.sf-ast { background: url("/assets/games/space/sheets/asteroid_spin.webp?v=1") 0 0 / 1200% 100% no-repeat; animation: sfSheet 1.2s steps(12, jump-none) infinite; filter: drop-shadow(0 0 6px rgba(255,120,80,.45)); }
.sf-shot { position: absolute; left: 0; top: 0; background: url("/assets/games/space/sheets/plasma.webp?v=1") 0 0 / 800% 100% no-repeat; animation: sfSheet .45s steps(8, jump-none) infinite; filter: drop-shadow(0 0 6px #8fe3ff); }
@keyframes sfSheet { from { background-position: 0% 0; } to { background-position: 100% 0; } }
.sf-ship { position: absolute; left: 0; top: 0; z-index: 2; will-change: transform; }
.sf-ship-spr { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url("/assets/games/space/sheets/ship_flight.webp?v=1") 0 0 / 800% 100% no-repeat; animation: sfSheet .66s steps(8, jump-none) infinite; filter: drop-shadow(0 6px 12px rgba(0,0,0,.35)); }
.sf-ship.is-happy .sf-ship-spr { background-image: url("/assets/games/space/sheets/ship_happy.webp?v=1"); }
.sf-ship.is-sad .sf-ship-spr { background-image: url("/assets/games/space/sheets/ship_sad.webp?v=1"); }
.sf-ship.is-fire .sf-ship-spr { width: 125%; background-image: url("/assets/games/space/sheets/ship_fire.webp?v=1"); animation-duration: .45s; }
.sf-ship.is-inv { animation: sfBlink .25s steps(2, jump-none) infinite; }
@keyframes sfBlink { 50% { opacity: .35; } }
.sf-break { position: absolute; left: 0; top: 0; pointer-events: none; }
.sf-break i { position: absolute; inset: 0; background: url("/assets/games/space/items/asteroid.webp?v=1") center / contain no-repeat; animation: sfShard .8s ease-out forwards; }
.sf-break i:nth-child(1) { clip-path: polygon(50% 50%, 0 0, 55% 0); --dx: -60%; --dy: -70%; --r: -120deg; }
.sf-break i:nth-child(2) { clip-path: polygon(50% 50%, 55% 0, 100% 0, 100% 45%); --dx: 70%; --dy: -60%; --r: 140deg; }
.sf-break i:nth-child(3) { clip-path: polygon(50% 50%, 100% 45%, 100% 100%, 60% 100%); --dx: 80%; --dy: 60%; --r: 100deg; }
.sf-break i:nth-child(4) { clip-path: polygon(50% 50%, 60% 100%, 0 100%, 0 70%); --dx: -70%; --dy: 70%; --r: -90deg; }
.sf-break i:nth-child(5) { clip-path: polygon(50% 50%, 0 70%, 0 0); --dx: -90%; --dy: 5%; --r: -160deg; }
.sf-break b { position: absolute; inset: 20%; border-radius: 50%; background: radial-gradient(circle, #fff 0%, #ffe38a 40%, rgba(255,140,60,0) 70%); animation: sfFlash .45s ease-out forwards; }
@keyframes sfShard { to { transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(.6); opacity: 0; } }
@keyframes sfFlash { 0% { transform: scale(.3); opacity: 1; } 100% { transform: scale(2.2); opacity: 0; } }
.sf-pop { position: absolute; transform: translateX(-50%); padding: 4px 12px; border-radius: 999px; font: 900 16px Nunito, sans-serif; white-space: nowrap; pointer-events: none; animation: sfPopUp 1.5s ease-out forwards; box-shadow: 0 4px 12px rgba(0,0,0,.3); z-index: 3; }
.sf-pop-good { background: #d9fbe0; color: #14532d; border: 2px solid #36b25a; }
.sf-pop-bad { background: #ffe1e1; color: #7f1d1d; border: 2px solid #e45b5b; }
.sf-pop-info { background: #fff3c4; color: #6b4b00; border: 2px solid #f0b400; }
@keyframes sfPopUp { 0% { transform: translate(-50%, 10px) scale(.8); opacity: 0; } 15% { transform: translate(-50%, 0) scale(1.05); opacity: 1; } 80% { opacity: 1; } 100% { transform: translate(-50%, -40px) scale(1); opacity: 0; } }
.sf-hud { position: absolute; left: 8px; right: 8px; top: 8px; z-index: 4; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 5px 8px; border-radius: 16px; background: rgba(20,10,60,.6); color: #fff; backdrop-filter: blur(4px); }
.sf-hud-title { font: 800 15px "Baloo 2", Nunito, sans-serif; white-space: nowrap; }
.sf-needs { display: flex; gap: 5px; flex-wrap: wrap; flex: 1; min-width: 0; }
.sf-need { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 3px; border-radius: 999px; background: rgba(255,255,255,.16); font-size: 13px; }
.sf-need img, .sf-need i { width: 22px; height: 22px; object-fit: contain; display: grid; place-items: center; font-style: normal; font-weight: 900; border-radius: 50%; background: rgba(255,255,255,.12); }
.sf-need b { font-weight: 900; }
.sf-need em { font-style: normal; font-weight: 900; color: #ffe27a; }
.sf-need.is-done { background: rgba(54,178,90,.55); }
.sf-need.is-done em::after { content: " \2713"; }
.sf-shields { font-size: 14px; letter-spacing: -1px; white-space: nowrap; }
.sf-hbtn { border: 0; border-radius: 10px; padding: 3px 7px; background: rgba(255,255,255,.9); color: #3a2a7a; font: 900 12px Nunito, sans-serif; cursor: pointer; }
.sf-hbtn.is-on { background: #ffe27a; }
.sf-banner { position: absolute; left: 50%; top: 45%; z-index: 5; transform: translate(-50%, -50%); padding: 10px 22px; border-radius: 18px; background: rgba(255,251,235,.95); border: 3px solid #ffd35a; color: #5a3b00; font: 900 20px Nunito, sans-serif; text-align: center; animation: sfPopIn .4s ease both; max-width: 90%; }
.sf-help { position: absolute; left: 50%; bottom: 12px; z-index: 4; transform: translateX(-50%); padding: 4px 12px; border-radius: 999px; background: rgba(20,10,60,.7); color: #fff; font-weight: 800; font-size: 13px; white-space: nowrap; transition: opacity .6s; max-width: 70%; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.sf-help.is-hidden { opacity: 0; }
.sf-help.is-wait { top: 50%; bottom: auto; transform: translate(-50%, -50%); white-space: normal; text-align: center; font-size: 15px; max-width: 86%; }
.sf-fire { position: absolute; right: 12px; bottom: 12px; z-index: 5; width: 58px; height: 58px; border-radius: 50%; border: 3px solid #fff; background: radial-gradient(circle at 35% 30%, #ffb36b, #ff5a3c); font-size: 26px; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.4); touch-action: none; }
.sf-fire:active { transform: scale(.92); }
.sf-pilotbar { position: absolute; left: 10px; bottom: 10px; z-index: 5; display: flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; border-radius: 999px; background: rgba(20,10,60,.7); color: #fff; font-size: 12px; font-weight: 800; }
.sf-pilotbar .sf-btn { padding: 3px 9px; font-size: 12px; }

@container (max-width: 640px) {
  .sf-top { padding: 4px 8px; gap: 6px; row-gap: 3px; }
  .sf-title strong { font-size: 16px; }
  .sf-badge { width: 20px; height: 20px; }
  .sf-focus { font-size: 11px; }
  .sf-dict-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(6, minmax(0, 1fr)); }
  .sf-hud-title { display: none; }
  .sf-need { font-size: 11px; }
  .sf-need img, .sf-need i { width: 18px; height: 18px; }
  .sf-fire { width: 50px; height: 50px; font-size: 22px; }
}
@container (max-width: 520px) {
  .sf-ship-big { max-width: 28%; height: 50%; bottom: 2%; }
  .sf-ph-lab .sf-vis-wrap { left: 64%; width: 70%; }
  .sf-captain { height: 70%; }
  .sf-hud { row-gap: 4px; }
  .sf-needs { order: 3; flex: 1 1 100%; }
  .sf-shields { margin-left: auto; }
  .sf-help { white-space: normal; text-align: center; border-radius: 14px; }
}
@container (max-width: 420px) {
  .sf-title small, .sf-title em { display: none; }
  .sf-badges { display: none; }
  .sf-dict-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(8, minmax(0, 1fr)); }
  .sf-dcard small { display: none; }
}

/* /gry na telefonie: ramka innych gier bierze wysokosc z tresci, a przygoda Luny i
   Kosmiczna Zabka maja scene pozycjonowana absolutnie - bez tego okienko mialo 6 px. */
@media (max-width: 900px) {
  html body.games-page-v9 .y9-world .y9-board-wrap > .y9-board.y9-game-board.mq-board,
  html body.games-page-v9 .y9-world .y9-board-wrap > .y9-board.y9-game-board.sf-board {
    height: clamp(440px, calc(100svh - 230px), 660px) !important;
    max-height: none !important;
  }
}