/*///////////////////////////////////////////////////////////////////////////////////////////////////*/

.bg-svg 
{
position: fixed;   /* 👈 как background-attachment: fixed */
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
}

.checker-grid, #system-message-container 
{
position: relative;
z-index: 1;
}


#scene 
{
position: relative;
width: 100%;
height: calc(100dvh - 80px);
margin-top: 80px;
overflow: hidden;
}

/* ОБЛАКА */
#bubble-area {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 65%;
  z-index: 13000;
}

/* КАМЕНЬ */
#stone-area {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 11900;
  text-align: center;
}

#stone {
  width: clamp(220px, 75vw, 820px);
  height: auto;
}

/* ТЕКСТ НА КАМНЕ */
#stone-text {
  position: absolute;
  top: 35%;
  left: 60%;
  transform: translate(-50%, -50%);
  width: 70%;
  text-align: center;
  font-size: clamp(16px, 2.5vw, 28px);
  font-weight: bold;
}

/* ПЕЩЕРНЫЙ ЧЕЛ */
#caveman-area {
  position: absolute;
  bottom: 0;
  left: calc(50% + 180px);
  z-index: 12000;
}

#caveman {
  position: absolute;
  bottom: 0;
  left: 75%;          /* положение относительно камня */
  width: clamp(120px, 18vw, 220px);
  height: auto;
}


.bubble {
  position: absolute;
  width: 420px;
  height: 260px;
  cursor: pointer;
  transition: left 0.8s ease, top 0.8s ease, width 0.3s, height 0.3s;
}

.bubble svg {
  width: 100%;
  height: 100%;
}

.bubble svg * {
  pointer-events: none;
}

/*
.caveman-a-think img 
{
width: 70rem;   /* нужная ширина *
height: auto;   /* чтобы не искажалась *
}

caveman-a-think
{
margin: 0 auto;
}

/*
.bubble-wrap{
width:420px;
height:260px;
margin:40px auto;
position:relative;
}

.bubble-svg{
width:420px !important;
height:260px !important;
display:block;
}

.bubble-shape{
fill:#a9c7e3;
stroke:#2f3e9e;
stroke-width:8;
}

.bubble-text{
font-size:42px;
font-family:Arial;
font-weight:bold;
fill:#ffd400;
stroke:black;
stroke-width:3;
text-anchor:middle;
}
*/

/*
#bubble-area
{
position:relative;
width:100%;
height:50vh;
overflow:hidden;
}

.bubble
{
position:absolute;
width:28vw;
max-width:420px;
aspect-ratio:420/260;

transition:
left 1.2s cubic-bezier(.22,.8,.25,1),
top 1.2s cubic-bezier(.22,.8,.25,1);
}
*/



/*
.caveman-a 
{
margin-right:auto;
text-align: center;
position: fixed;
}

.caveman-a-joy, .caveman-a-angry 
{
display:none;
}
*/
.caveman-a-joy:hover, .caveman-a-angry:hover, .caveman-a-joy.hover-trigger, .caveman-a-angry.hover-trigger 
{
  /* Запустите анимацию встряхивания и сделайте так, чтобы анимация длилась 0,5 секунды */
  animation: shake 0.5s;

  /* Когда анимация будет закончена, начните снова */
  animation-iteration-count: infinite;
}

@keyframes shake 
{
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

/*margin-left:calc(50vw - 100px);
margin-top: calc(100vh - 165px);*/


.clo-first
{
margin-right:auto;
text-align: center;
position: absolute;
cursor:pointer;
}

.clo-second
{
margin-right:auto;
text-align: center;
position: absolute;
cursor:pointer;
}

.clo-third
{
margin-right:auto;
text-align: center;
position: absolute;
cursor:pointer;
}

.clo-first h1
{
position: absolute;
left:-20%;
}

.clo-second h1
{
position: absolute;
left:-20%;
}

.clo-third h1
{
position: absolute;
left:-20%;
}

.clo-think
{
margin-right:auto;
text-align: center;
position: fixed;
}



.clo-first
{
margin-top: 50px;
margin-left: 800px;
}

.clo-second
{
margin-top: 150px;
margin-left: 1100px;
}

.clo-third
{
margin-top: 300px;
margin-left: 900px;
}

.clo-think
{
margin-top: 00px;
margin-left: -00px;
}

.caveman-a 
{
margin-top: 670px;
margin-left: 700px;
}

.clo-first h1, .clo-second h1, .clo-third h1
{
font-family: "EB Garamond", serif;
font-size: 2.5em;
line-height: 2.5em;
}

.clo-think h1
{
font-family: "EB Garamond", serif;
font-size: 2.5em;
line-height: 1.8em;
}


.d33 
{
background: #B5DDD4;
position: relative;
border-style: solid;
border-color: #6E839E;
position: fixed;
}

.d33:before 
{
content: "";
width: 0; 
height: 0;
position: absolute; 
}


.d33 
{
width: 50em; 
height: 150px; 
margin-top: 500px;
margin-left: 30vw;
border-radius: 10px;
border-width: 0.25em;
}

.d33:before 
{
right: 50%; 
top: calc(50% + 75px);
border-left: 12px solid transparent;
border-top: 24px solid #B5DDD4;
border-right: 12px solid transparent;
}



.d39 
{
position: relative;
width: 10em; 
height: 6em; 
margin: 2em;
background: #D5DEE9;
border-width: 0.25em;
border-style: solid;
border-color: #6E839E;
border-radius: 50% 50% 0 0;
}

.d39:before, 
.d39:after 
{
content: "";
position: absolute; 
bottom: -0.25em;
background: inherit;
border-width: 0.25em;
border-style: solid;
border-color: #6E839E;
}

.d39:after 
{
left: 80%; 
width: 60%; 
height: 60%;
border-left: none;
border-radius: 50% 50% 50% 0;
}

.d39:before 
{
right: 80%;
width: 80%; 
height: 80%;
border-right: none;
border-radius: 50% 50% 0;
}


.red
{
color: #F00;
}