html,

body {
  height: 100%;
  margin: 0;
  color: #e8e8e8;



  background: #0b0c10 url("assets/bg/Mur.jpg") center/cover fixed no-repeat;
  .fontFamilyList {
font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial;
font-family: Arial, Helvetica, sans-serif;
font-family: 'Arial Black', Gadget, sans-serif;
font-family: 'Bookman Old Style', serif;
font-family: 'Comic Sans MS', cursive;
font-family: Courier, monospace;
font-family: 'Courier New', Courier, monospace;
font-family: Garamond, serif;
font-family: Georgia, serif;
font-family: Impact, Charcoal, sans-serif;
font-family: 'Lucida Console', Monaco, monospace;
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-family: 'MS Sans Serif', Geneva, sans-serif;
font-family: 'MS Serif', 'New York', sans-serif;
font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
font-family: Symbol, sans-serif;
font-family: Tahoma, Geneva, sans-serif;
font-family: 'Times New Roman', Times, serif;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
font-family: Verdana, Geneva, sans-serif;
font-family: Webdings, sans-serif;
font-family: Wingdings, 'Zapf Dingbats', sans-serif;
  color: black;
}
}
@font-face {
  font-family: 'WingdingsFallback';
  src: local('Wingdings'), local('Zapf Dingbats');
}
.wingdings {
  font-family: 'WingdingsFallback', sans-serif;
}

/* ====== Header ====== */
header {
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
}

.title {
  margin: 0;
  font-weight: 800;
  letter-spacing: 0.02em;
  font-size: clamp(18px, 2.4vw, 28px);
}

/* ====== Controls ====== */
.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.controls button,
.controls select {
  background: #181a20;
  color: black;
  border: 1px solid #2a2d36;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 14px;
  cursor: url(assets/gif/murmur/mur_cur.cur) auto!important;
}

.controls button:hover {
  background: #20232b;
}

.parent {
display: grid;
grid-template-columns: repeat(10, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}

.div1 { grid-area: 1 / 1 / 4 / 2; }
.div2 { grid-area: 1 / 2 / 4 / 10; }
.div3 { grid-area: 1 / 10 / 4 / 11; }
.div4 { grid-area: 4 / 1 / 5 / 2; }
.div5 { grid-area: 4 / 2 / 5 / 10; }
.div6 { grid-area: 4 / 10 / 5 / 11; }



.parent_credits {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 0px;
grid-row-gap: 0px;
}

.credit1 { grid-area: 1 / 1 / 2 / 2; }
.credit2 { grid-area: 1 / 2 / 2 / 3; }
.credit3 { grid-area: 1 / 3 / 2 / 4; }
.credit4 { grid-area: 1 / 4 / 2 / 5; }
.credit5 { grid-area: 1 / 5 / 2 / 6; }
.credit6 { grid-area: 1 / 6 / 2 / 7; }



/* ====== Stage ====== */
#murmuration {
  position: relative;
  width: 100%;
  height: clamp(100%, 50vh, 600px);
  overflow: hidden;
  isolation: isolate;
background: #F27B5D;
background: linear-gradient(0deg,rgba(242, 123, 93, 1) 0%,  rgba(243, 167, 143, 1) 25%, rgba(245, 159, 81, 1) 50%, rgba(123, 134, 130, 1) 100%);
color: black;
}

/* ====== Footer ====== */
footer {
  opacity: .75;
  text-align: center;
  font-size: 13px;
  padding: 8px 16px 22px;
}

  /* Шар ґрунту вже є: гарантуємо відсутність обрізання і правильну глибину */
  #groundLayer { position: absolute; left:0; right:0; bottom:0; height:auto; overflow: visible; z-index: 300; }
  #groundStrip { position: absolute; left:0; bottom:0; height:auto; white-space: nowrap; overflow: visible; }

  /* Курйозні (curious) об'єкти: поверх землі, під птахами */
  .curious {
    position: absolute;
    will-change: transform, filter, opacity;
    pointer-events: auto;
    user-select: none;
    z-index: 320;                /* земля ~300, птахи вище (500+), тож ми позаду птахів */
    transform: translateY(-10px);/* «сидить» на землі, влізає на тайл на ~10px вгору */
    transition: filter .15s ease, transform .15s ease;
    cursor: url(assets/gif/murmur/mur_cur.cur) auto!important;
    /* напівпрозорий теплий тон, той самий, що й земля */
    filter: url(#tint-f17d58);
  }
  .curious:hover {
    filter: url(#tint-f17d58) drop-shadow(0 0 6px rgba(241,125,88,.55)) brightness(1.08) saturate(1.15);
    transform: translateY(-12px) scale(1.03);
  }

  /* Попап (на 7.css) поверх усього */
  #curiousModalBackdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.35);
    display: none;
    align-items: center; justify-content: center;
    z-index: 20000; /* вище за все інше */
  }
  #curiousModalBackdrop.is-open { display: flex; }
  #curiousModal { max-width: 520px; width: min(92vw, 520px); }
  #curiousModal {
  color: #000;
}

/* Якщо треба зробити чорним і текст у верхній плашці */
#curiousModal .title-bar-text {
  color: #000;
}

/* На всяк випадок: абзаци/посилання/кнопки всередині */
#curiousModal .window-body,
#curiousModal p,
#curiousModal a,
#curiousModal button {
  color: #000;
}

.ground-tile .ground-img {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 0;               /* земля — найнижче у тайлі */
}

/* Об’єкти тла (env1..env10) завжди над землею */
.ground-tile .env-item {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -10px); /* перекриття землі на ~10px */
  bottom: 0;
  height: auto;
  z-index: 10;              /* вище за землю */
  pointer-events: none;     /* щоб не заважати клікам по curious */
  filter: url(#tint-f17d58);
}

/* Curious — над усім у тайлі */
.ground-tile .curious {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 0);
  z-index: 20;              /* найвище в тайлі */
  pointer-events: auto;     /* має ловити hover/click */
}

.rotate-center {
	-webkit-animation: rotate-center 1s ease-in-out infinite both;
	        animation: rotate-center 1s ease-in-out infinite both;
}
/* ----------------------------------------------
 * Generated by Animista on 2025-10-17 23:48:18
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation rotate-center
 * ----------------------------------------
 */
@-webkit-keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
  /* ...інше... */

  /* Overlay з айтемами: вище за ground */
  #groundOverlay{
    position:absolute; left:0; right:0; bottom:-50px;
    z-index:900;                /* ВИЩЕ за groundLayer */
    pointer-events:none;
    overflow:visible;
    filter:url(#tint-f17d58);
  }
  .overlay-item{ position:absolute; left:0; bottom:0; transform:translate(-50%,-60px); z-index:1; }

  /* ground images всередині тайлів можна лишити без z-index або поставити 0 */
  .ground-img{ z-index:0; }

.flip-card {
margin: auto;
width: 200px; /*change the sizing*/
height: 200px; /*change the sizing*/
perspective: 1000px;
border-radius:10px;
}
 
.flip-card-inner {
width: 100%;
height: 100%;
transition: transform 1.5s;
transform-style: preserve-3d;
transition-timing-function: cubic-bezier(.175, .885, .32, 1.275);
}
 
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
 
.flip-card-front, .flip-card-back {
position: absolute;
width: 90%;
height: 90%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
 
.flip-card-front {
/*change the appearance of the front here*/
background: linear-gradient(-180deg, #FFFFFF40 30%, #b8cef360 100%);
backdrop-filter: blur(5px); /*delete if you don't want the frosted glass effect*/
box-shadow:0px 0px 5px 1px #61616130;
border-radius:10px;
border:1px solid #f5f5f5;
padding: 10px;
color: #000;
font-size: 0.9em;
}
 
.flip-card-back {
/*change the appearance of the back here*/
background: linear-gradient(-180deg, #FFFFFF40 30%, #b8cef360 100%);
backdrop-filter: blur(5px); /*delete if you don't want the frosted glass effect*/
box-shadow:0px 0px 5px 1px #61616130;
transform: rotateY(180deg);
border-radius:10px;
border:1px solid #f5f5f5;
padding: 10px;
color: #000;
font-size: 0.9em;
}
 
h1 {
background: -webkit-linear-gradient(-90deg, #ffffff 0%, #b8cef3 70%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: #FFDBF1;
font-size: 2.3em;
font-weight: 900;
line-height: 1.2em;
-webkit-filter: drop-shadow(0px 0px 1px #919191);
}
 
h2 {
background: -webkit-linear-gradient(-90deg, #ffffff 0%, #B8BAF3 70%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 1.4em;
font-weight: 600;
line-height: 1.2em;
-webkit-filter: drop-shadow(0px 0px 1px #919191);
}

::-webkit-scrollbar {
  width: 0px;
}

#cont {
width:28em;
height:18em;
padding:.5em;
background-color:transparent;
z-index:999;
}

#cover {
width:14em;
height:18em;
background-image:url("https://cdn.discordapp.com/attachments/518322113111785473/894200434762330162/IMG_20211003_193251.jpg");
background-size:cover;
background-position:center;
position:absolute;
z-index:998;
top: calc(-1 * var(--sw));
	right: calc(-1 * var(--sw));
perspective: 1000px;
transform-origin: left;
	transform-style: preserve-3d;
    transform:translateX(13em);
animation:backflip 1.7s cubic-bezier(.75,.03,.4,.97);
animation-fill-mode:forwards;
}

@keyframes backflip {
	100% {
		transform: rotateY(0) translateX(0) skewY(0);
	}

	50% {
		transform: rotateY(-90deg) translateX(0em) skewY(-20deg);
	}

	0% {
		transform: rotateY(-180deg) translateX(0em) skewY(0);
	}
}

#cont:hover #cover {
animation:flip 1.7s cubic-bezier(.75,.03,.4,.97);
animation-fill-mode:forwards;
}

@keyframes flip {
	0% {
		transform: rotateY(0) translateX(0) skewY(0);
	}

	50% {
		transform: rotateY(-90deg) translateX(0em) skewY(-20deg);
	}

	100% {
		transform: rotateY(-180deg) translateX(0em) skewY(0);
	}
}

#page {
width:14em;
height:18em;
background-color:pink;
position:relative;
overflow:auto;
box-sizing: border-box;
}

#page p {
margin:.5em;
margin-left:1em;
}