:root {
  --ui-safe: 16px;
  --ctrl-size: 110px;
  /* kioskowe przyciski */
  --ctrl-gap: 14px;
  --sheet-h: 520px;
  /* wysokość bottom sheet */
  --hud-h: 64px;
  --radius: 18px;
  --shadow: 0 10px 30px rgba(0, 0, 0, .25);
  --bg-penguin: #007acc;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  background: var(--bg-penguin);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: #fff;
}

html,
body {
  overscroll-behavior: none;
  touch-action: none;
  /* globalnie blokuje gesty, a kontrolki i tak działają bo pointer events */
}

#game {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /*padding:12px;*/
}

/* Viewport: trzymamy pionowe FHD jako "design size" i skalujemy w dół/w górę */
#viewport {
  width: min(1080px, 100vw);
  height: min(1920px, 100vh);
  aspect-ratio: 9/16;
  position: relative;
  overflow: hidden;
  /* background: linear-gradient(#2b3a77, #0b1020 60%); */
  background-color: var(--bg-penguin);
  border-radius: 22px;
  box-shadow: var(--shadow);
  touch-action: none;
  /* kontrola dotyku w grze */
}

/* World jest większy niż viewport, przesuwamy go transformem = kamera */
#world {
  position: absolute;
  left: 0;
  top: 0;
  width: 2400px;
  height: 1400px;
  transform: translate3d(0, 0, 0);
}

/* Warstwy */
#platform-layer,
#npc-layer,
#sheep-layer,
#followers-layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

/* Player i sprite’y */
#player {
  position: absolute;
  width: 110px;
  height: 180px;
  object-fit: contain;
  image-rendering: auto;
  transform: translate3d(0, 0, 0);
  user-select: none;
  -webkit-user-drag: none;
}

.entity {
  position: absolute;
  transform: translate3d(0, 0, 0);
  user-select: none;
  -webkit-user-drag: none;
}

/* Platformy startowo jako prostokąty – łatwo podmienisz na PNG */
.platform {
  position: absolute;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.15);
  outline: 2px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(2px);
}

.platform.ground {
  background: rgba(40, 120, 70, 0.8);
  outline-color: rgba(40, 180, 90, 0.35);
}

/* Meta */
#finish {
  position: absolute;
  border-radius: 18px;
  background: rgba(255, 220, 120, 0.35);
  outline: 2px solid rgba(255, 220, 120, 0.55);
}

/* HUD */
#hud {
  position: absolute;
  left: var(--ui-safe);
  top: var(--ui-safe);
  display: flex;
  gap: 12px;
  z-index: 20;
}

#hud>div {
  padding: 12px 16px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
  font-size: 22px;
}

/* Sterowanie: A = lewo/prawo po lewej, skok po prawej */
#controls {
  position: absolute;
  left: var(--ui-safe);
  right: var(--ui-safe);
  bottom: var(--ui-safe);
  display: flex;
  justify-content: space-between;
  align-items: end;
  z-index: 30;
  pointer-events: none;
  /* a przyciski mają pointer-events: auto */
}

.ctrl {
  pointer-events: auto;
  width: var(--ctrl-size);
  height: var(--ctrl-size);
  border-radius: 999px;
  border: 0;
  font-size: 42px;
  color: #fff;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow);
  touch-action: none;
}

#btnLeft,
#btnRight {
  margin-right: var(--ctrl-gap);
}

#btnRight {
  margin-right: 0;
}

.ctrl:active {
  transform: scale(0.98);
}

.ctrl.jump {
  width: calc(var(--ctrl-size) + 10px);
  height: calc(var(--ctrl-size) + 10px);
  font-size: 46px;
}

/* Quiz bottom sheet */
#quizSheet {
  position: absolute;
  left: var(--ui-safe);
  right: var(--ui-safe);
  bottom: calc(var(--ui-safe) + var(--ctrl-size) + 16px);
  /* nad kontrolkami */
  height: var(--sheet-h);
  border-radius: 22px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  padding: 16px;
  z-index: 40;
}

#quizSheet.hidden {
  display: none;
}

#quizHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

#quizTitle {
  font-size: 26px;
  font-weight: 700;
}

#quizClose {
  border: 0;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  font-size: 22px;
}

#quizQuestion {
  font-size: 26px;
  line-height: 1.25;
  margin: 10px 0 14px;
}

#quizAnswers {
  display: grid;
  gap: 12px;
}

.answerBtn {
  border: 0;
  border-radius: 18px;
  padding: 18px 16px;
  font-size: 24px;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  text-align: left;
}

.answerBtn:active {
  transform: scale(0.99);
}

#quizFeedback {
  margin-top: 12px;
  font-size: 22px;
  opacity: 0.9;
}



#parallax {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

/* Warstwa */
.bg-layer {
  position: absolute;
  inset: 0;
  will-change: background-position;
  background-repeat: no-repeat;
  /* dla Twojego długiego PNG */
  background-position: 0 0;
  background-size: auto 100%;
  /* wysokość = 100%, szerokość zachowana */
}


/* Przykładowe grafiki */
#bgFar {
  background-image: url("assets/bg_far.png");
  /* np. góry/niebo */
  background-size: auto 100%;
}

#bgMid {
  background-image: url("assets/bg_mid.png");
  /* np. drzewa w oddali */
  background-size: auto 100%;
  opacity: 0.95;
}

#bgNear {
  background-image: url("assets/bg_near.png");
  /* np. krzaki/elementy najbliżej */
  background-size: auto 100%;
  opacity: 0.9;
}

/* World ma być nad tłem */
#world {
  z-index: 1;
}

#startScreen {
  position: absolute;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(10px);
}

#startCard {
  width: min(900px, 100%);
  border-radius: 26px;
  background: rgba(0, 0, 0, 0.65);
  box-shadow: var(--shadow);
  padding: 22px;
}

#startTitle {
  font-size: 40px;
  font-weight: 900;
  margin-bottom: 10px;
}

#startStory {
  font-size: 24px;
  line-height: 1.3;
  opacity: 0.95;
  margin-bottom: 14px;
}

#startHow {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
}

.howRow {
  font-size: 22px;
  display: flex;
  gap: 10px;
  align-items: baseline;
}

.howKey {
  display: inline-block;
  min-width: 90px;
  opacity: 0.85;
  font-weight: 700;
}

#btnStart {
  width: 100%;
  font-size: 28px;
  padding: 16px 18px;
  border-radius: 20px;
  border: 0;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

#btnStart:active {
  transform: scale(0.99);
}

#startHint {
  margin-top: 12px;
  font-size: 18px;
  opacity: 0.75;
}


/* elementy między kamerą a graczem, "przysłaniajki" */
#foreground-layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  /* ważne: nad graczem i owcami */
  pointer-events: none;
}

#player,
.npc,
.sheep,
.follower {
  z-index: 5;
}

.foreground {
  position: absolute;
  transform: translate3d(0, 0, 0);
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.25));
}


/* TABELA WYNIKÓW */

#endScreen {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(10px);
}

#endScreen.hidden {
  display: none;
}

#endCard {
  width: min(900px, 100%);
  border-radius: 26px;
  background: rgba(0, 0, 0, 0.65);
  box-shadow: var(--shadow);
  padding: 20px;
}

#endHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

#endTitle {
  font-size: 36px;
  font-weight: 800;
}

#endSummary {
  font-size: 26px;
  line-height: 1.25;
  margin: 8px 0 14px;
  opacity: 0.95;
}

#scoreForm {
  display: grid;
  gap: 10px;
  margin: 8px 0 14px;
}

#scoreForm.hidden {
  display: none;
}

#scoreForm label {
  font-size: 22px;
  opacity: 0.9;
}

#playerName {
  font-size: 26px;
  padding: 14px 14px;
  border-radius: 18px;
  border: 2px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  outline: none;
}

#saveScoreBtn {
  font-size: 24px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 0;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

#saveScoreBtn:active {
  transform: scale(0.99);
}

#rankInfo {
  font-size: 22px;
  opacity: 0.9;
}

#leaderboardWrap {
  margin-top: 8px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
}

#leaderboardTitle {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 8px;
}

#leaderboard {
  margin: 0;
  padding-left: 26px;
  display: grid;
  gap: 8px;
  font-size: 22px;
}

#leaderboard li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.lbName {
  opacity: 0.95;
}

.lbTime {
  opacity: 0.9;
  font-variant-numeric: tabular-nums;
}

.lbMeta {
  opacity: 0.7;
  font-size: 18px;
}

#endActions {
  margin-top: 16px;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

#btnReplay {
  font-size: 24px;
  padding: 14px 18px;
  border-radius: 18px;
  border: 0;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

#btnMenu {
  font-size: 24px;
  padding: 14px 18px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
  text-decoration: none;
}

#btnReplay:active {
  transform: scale(0.99);
}


/* Przeszkody */

#obstacle-layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.obstacle {
  position: absolute;
  overflow: hidden;
  border-radius: 22px 22px 12px 12px;
  border: 2px solid rgba(61, 37, 18, 0.45);
  box-shadow:
    inset 0 14px 18px rgba(255, 255, 255, 0.18),
    inset 0 -16px 22px rgba(53, 31, 15, 0.28),
    0 14px 24px rgba(0, 0, 0, 0.2);
}

.obstacle::before {
  content: "";
  position: absolute;
  inset: 10px 12px auto;
  height: 22%;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
}

.obstacle--post {
  background:
    linear-gradient(180deg, #b88d59 0%, #94683d 42%, #6b4728 100%);
}

.obstacle--pillar {
  background:
    linear-gradient(180deg, #c79a63 0%, #a06d3f 38%, #744825 100%);
  border-radius: 26px 26px 14px 14px;
}

.obstacle--cave {
  background:
    linear-gradient(180deg, #756a62 0%, #5e534d 45%, #433932 100%);
  border-color: rgba(40, 31, 25, 0.55);
}

.platform.cave {
  background: linear-gradient(180deg, rgba(126, 118, 111, 0.95) 0%, rgba(88, 80, 74, 0.98) 100%);
  outline: 2px solid rgba(62, 51, 43, 0.55);
  backdrop-filter: none;
  box-shadow:
    inset 0 8px 14px rgba(255, 255, 255, 0.08),
    inset 0 -10px 16px rgba(0, 0, 0, 0.2);
}